[TIL] eslint 적용하기

next 프로젝트에 eslint 적용

nextjs를 설치하면 eslint가 정말 기본으로 설치로되어있기 때문에 기본 eslint 설치는 생략한다.

eslint 룰은 유명한 air-bnb를 사용한다.

eslint의 추가 모듈 설치

yarn add -D eslint-plugin-react-hooks
yarn add -D eslint-plugin-import
yarn add -D prettier eslint-plugin-prettier eslint-config-prettier
yarn add -D eslint-config-airbnb

• eslint-plugin-react-hooks: 리액트 훅 관련 규칙
• eslint-plugin-import: import/export syntax 체크, 파일 경로나 import 이름을 잘못 입력하는지 여부를 체크
• eslint-config-airbnb: airbnb에서 자바스크립트 코드 규칙
• eslint-config-prettier: eslint 규칙 중 Prettier과 충돌하는 부분은 비활성화 하도록

.eslintrc.json 작성

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb",
    "prettier",
    "plugin:jsx-a11y/recommended",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "plugin:import/recommended"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "prettier",
    "import"
  ],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never",
        "json": "never"
      }
    ],
    "react/jsx-filename-extension": [
      2,
      {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ],
    "import/prefer-default-export": "off",
    "react/react-in-jsx-scope": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true
      }
    ],
    "react/jsx-props-no-spreading": [
      "warn"
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {},
      "node": {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    }
  }
}

• env: eslint를 활성화하고 싶은 환경을 설정, 현재 브라우저와 es2021에서 활성화됨
• extends: 추가한 플러그인에서 사용할 규칙을 설정
• overrides: 프로젝트 내의 일부 파일에 대해서만 다른 설정을 주고 싶을 때 사용
• parser: 구문 분석을 위해 어떤 것을 사용할 것인가?
• parserOptions: ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 지정
• plugins: 설치한 서드파티들
• rules: 프로젝트에서 사용하는 규칙을 수정할 수 있음

위의 eslint 설정파일을 작성하고 추가적으로 prettier를 설정한 후 사용한다.