NextJS
[NextJS] ESLint, Prettier, Recoil, React-Query, Storybook, Jest 설정 - 1편
2024-03-30
1편은 NextJS에 TypeScript, Tailwind, ESLint, Prettier, Husky를 설정하는 내용입니다.
1. NextJS, TypeScript, TypeScript 설치
npx create-next-app@latest
2. ESLint (airbnb 방식) 설정
eslint-config-airbnb 라이브러리,패키지 설치
npx install-peerdeps --dev eslint-config-airbnb
eslint에 필요한 타입스크립트 추가
npm install -D eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps
eslint-config-airbnb-base 설정
npx install-peerdeps --dev eslint-config-airbnb-base
.eslintrc.json 설정 변경
{ "env": {"browser": true,"node": true}, "extends":"airbnb-base", "rules": { "linebreak-style": 0 } }
3. Prettier 설치, ESLint 연결
Prettier, 플러그인 설치
npm install -D prettier eslint-plugin-prettier eslint-config-prettier
- eslint-plugin-prettier : eslint에서 prettier랑 충돌하는 규칙 비활성화
- eslint-config-prettier : 포매팅시 prettier 사용
.prettierrc 파일 생성 후 코드추가
{ "semi": false, "singleQuote": true, "tabWidth": 2, "trailingComma": "all", "printWidth": 80, }
eslintrc.json 설정
{ "root": true, "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint", "prettier"], "parserOptions": { "project": "tsconfig.json", "createDefaultProgram": true }, "env": { "browser": true, "node": true, "es6": true }, "ignorePatterns": ["node_modules/"], "extends": [ "airbnb", "airbnb-typescript", "next/core-web-vitals", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "prettier" ], "rules": { "react/react-in-jsx-scope": "off", "react/jsx-props-no-spreading": 0, "@typescript-eslint/semi": "off", "react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }], "no-useless-catch": "off", "react/function-component-definition": [ 2, { "namedComponents": ["arrow-function", "function-declaration"] } ] } }
4. Husky, lint-stated로 commit 파일 eslint, prettier 자동실행
husky 설치 ( 주의 git repo랑 연결되어있어야 합니다.)
git hook(커밋,푸시 등) 제어하는 라이브러리
npx husky-init && npm install
lint-staged
staged된 파일만 특정 명령어 실행하는 도구
package.json에 해당 명령어 설정 (commit 파일 prettier,eslint 적용)
"lint-staged": { "*.{js,jsx,ts,tsx}": [ "prettier --write", "eslint --fix" ] }
.husky/pre-commit 에 명령어 추가
#!/usr/bin/env sh. "$(dirname -- "$0")/_/husky.sh" npx lint-staged # 추가
실행화면
git commit을 실행하게되면 eslint,prettier가 체크되는 모습