Linting & Formatting

ESLint

• https://eslint.org/docs/latest/use/getting-started

yarn add -D eslint

.eslintrc.cjs

module.exports = {
	root: true,
	extends: ["eslint:recommended"],
	parserOptions: {
		ecmaVersion: "latest",
		sourceType: "module",
	},
	env: {
		browser: true,
		es2021: true,
	},
};

.eslintignore

### macOS ###
# General
.DS_Store

### JavaScript ###
# Dependencies
node_modules
pnpm-lock.yaml
package-lock.json
yarn.lock

# Build
dist
build

Prettier

• https://github.com/prettier/eslint-config-prettier?tab=readme-ov-file#installation

yarn add -D eslint-config-prettier

.eslintrc.cjs

module.exports = {
	extends: ["prettier"],
};

Typescript

• https://typescript-eslint.io/getting-started

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc.cjs

module.exports = {
	extends: ["plugin:@typescript-eslint/recommended"],
	parser: "@typescript-eslint/parser",
	plugins: ["@typescript-eslint"],
};

Prettier

yarn add -D prettier

• https://prettier.io/docs/en/configuration.html

.prettierrc.cjs

module.exports = {
	printWidth: 100,
	singleQuote: false,
	trailingComma: "all",
	useTabs: true,
};

.prettierignore

### macOS ###
# General
.DS_Store

### JavaScript ###
# Dependencies
node_modules
pnpm-lock.yaml
package-lock.json
yarn.lock

# Build
dist
build

prettier --write .

TailwindCSS

• https://github.com/tailwindlabs/prettier-plugin-tailwindcss

yarn add -D prettier-plugin-tailwindcss

.prettierrc.cjs

module.exports = {
	plugins: [
		"prettier-plugin-tailwindcss", // 다른 플러그인과 호환성을 위해 마지막에 추가
	],
	tailwindFunctions: ["clsx"],
};