프로젝트에서 코드 품질과 일관성을 유지하기 위해 찾아보다 ESLint와 Prettier라는 라이브러리를 보게 되었다.
해당 게시글에서는 Next.js + Typescript 환경에서 Eslint 와 prettier를 적용하는 방법을 정리 해볼까 한다.
Eslint 기본 라이브러리 설치 후 Typescript , Next.js, React 환경에서 사용할 룰를 추가로 설치 했다.
npm install -D eslint eslint-config-next @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
프로젝트 루트에 .eslintrc.json 파일을 생성하고 다음과 같이 설정한다.
{
"env": {
"browser": true,
"es6": true,
"node": true,
"jest": true
},
"parser": "@typescript-eslint/parser",
"extends": [
"next/core-web-vitals",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@tanstack/eslint-plugin-query/recommended",
"prettier"
],
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"node": {
"extensions": [
".js",
".jsx",
".ts",
".tsx"
],
"moduleDirectory": [
"node_modules",
"src/"
]
}
}
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"react-hooks",
"prettier"
],
"rules": {
"prettier/prettier": "error",
"react/react-in-jsx-scope": 0, // Next.js에서는 React를 임포트할 필요가 없음
"react/prefer-stateless-function": 0, // 상태가 없는 컴포넌트에서도 클래스형 컴포넌트 사용 허용
"react/jsx-filename-extension": 0, // .jsx 파일뿐만 아니라 .js 파일에서도 JSX 문법 사용 허용
"react/jsx-one-expression-per-line": 0, // JSX 한 줄에 여러 표현식 사용 허용
"@typescript-eslint/explicit-module-boundary-types": "off", // 함수 반환 타입 명시를 강제하지 않음
"@typescript-eslint/no-non-null-assertion": "off", // non-null assertion(!) 사용 허용
"@typescript-eslint/no-inferrable-types": "off", // 타입 추론 가능한 변수 타입 명시 허용
"@typescript-eslint/no-unused-vars": [
"error",
{
"vars": "all",
"varsIgnorePattern": "^_",
"args": "after-used",
"argsIgnorePattern": "^_"
}
],
"@typescript-eslint/no-explicit-any": [
"warn"
],
"no-nested-ternary": 0, // 중첩 삼항 연산자 사용 허용
"no-alert": "off", // alert, confirm, prompt 사용 허용
"import/order": [
"warn",
{
"groups": [
[
"builtin",
"external"
],
"internal",
"parent",
[
"sibling",
"index"
],
"object"
],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
"complexity": "warn", // 코드 복잡성 경고
"no-console": [
"error"
]
}
}
Prettier는 코드 스타일을 자동으로 포맷팅해주는 도구다.
Prettier 도 Eslint 와 마찬가지로 라이브러리 설치, eslint-prettier 연동, tailwindcss 관련 라이브러리를 추가로 설치한다
npm install -D prettier eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss
프로젝트 루트에 .prettierrc 파일을 생성하고 다음과 같이 설정한다.
{
"printWidth": 80,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "avoid",
"trailingComma": "es5",
"plugins": [
"prettier-plugin-tailwindcss"
],
"tailwindConfig": "./tailwind.config.js"
}
package.json 파일에 ESLint와 Prettier를 실행할 수 있는 스크립트를 추가한다.