Linting & Formatting

ESLint

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

Yarn

yarn create @eslint/config@latest

npm

npm init @eslint/config@latest

Prettier

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

Yarn

yarn add -D eslint-config-prettier

npm

npm install -D eslint-config-prettier

eslint.config.mjs

import eslintConfigPrettier from "eslint-config-prettier";

export default [
	// ...
	eslintConfigPrettier,
];

Typescript

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

Yarn

yarn add -D typescript-eslint

npm

npm install -D typescript-eslint

eslint.config.mjs

import eslint from "@eslint/js";
import tseslint from "typescript-eslint";

export default tseslint.config(eslint.configs.recommended, ...tseslint.configs.recommended);

Prettier

Yarn

yarn add -D prettier

npm

npm install -D prettier

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

prettier.config.mjs

export default {
	printWidth: 120,
	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

yarn add -D prettier-plugin-tailwindcss

npm

npm install -D prettier-plugin-tailwindcss

prettier.config.mjs

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