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
	}
};

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: true,
	trailingComma: 'none',
	useTabs: true
};

TailwindCSS

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

yarn add -D prettier-plugin-tailwindcss

.prettierrc.cjs

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