[Nextjs] eslint와 prettier 설정하기

CRA의 경우 기본적으로 ESLint 세팅이 다 되어 있다고 함. 그러나 Nextjs는 다 설치해 줘야 한다.

현재 Airbnb 에서 정의한 자바스크립트 규칙이 많이 사용된다고 한다.

다음과 같이 명령어를 입력하면 무엇을 설치해야 하는지 알 수 있다.

 npm info "eslint-config-airbnb@latest" peerDependencies
{
  eslint: '^5.16.0 || ^6.8.0 || ^7.2.0',
  'eslint-plugin-import': '^2.22.1',
  'eslint-plugin-jsx-a11y': '^6.4.1',
  'eslint-plugin-react': '^7.21.5',
  'eslint-plugin-react-hooks': '^4 || ^3 || ^2.3.0 || ^1.7.0'
}

우선 설치해야 하는 기본적인 리스트 들이 있다.

npm install -D eslint 
               prettier 
               eslint-plugin-prettier 
               eslint-config-prettier 
               eslint-plugin-import 
               eslint-plugin-react 
               eslint-plugin-react-hooks 
               @typescript-eslint/parser 
               @typescript-eslint/eslint-plugin

@typescript-eslint/parser : parser역할을 담당

.eslintrc.json파일을 생성해 준다.

{
  "parser": "@typescript-eslint/parser", // typescript 전용 parser로 지정
  "parserOptions": {
    "project": "./tsconfig.json",
    "sourceType": "module"
  },
  "env": {
    "node": true, // node 사용 OK
    "browser": true, // browser 인식 Ok
    "es6": true // es6 버전사용 OK
  },
  "plugins": ["@typescript-eslint"], 
  // react, react-hooks 가 있으면 Error Cannot get result from ~ 이 나옴.
  "extends": [
    "plugin:react/recommended", //recommended 붙여져 있는건 preset을 사용하겠다는 의미
    "prettier", // 8.0.0 버젼이상은 모두 prettier로 통합됨.
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  //plugin과 extends로 적용된 규칙에 덮어씌워져서 강제 설정할 수 있는 부분
  "rules": {
    "no-console": "off", // console.log(사용하는 것 금지)
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
    "react/react-in-jsx-scope": "off",
    "no-unused-expressions": 0,
    "import/extensions": ["off"],
    "import/no-unresolved": "off",
    "import/prefer-default-export": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",         //values returned from a module are of the expected type.
    "no-nested-ternary": "off", 
    // 삼항연산안에 또 삼항연산 하는 것을 방지
    "react/jsx-filename-extension": "off", // <> </>쓰는 것 방지
    "spaced-comment": "off", // 주석 쓰는 것 방지
    "no-unused-variable": "off",
    "@typescript-eslint/no-non-null-assertion": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx", ".js"]
    }
  }
}

.prettierrc.json파일도 생성해 준다.

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100
}

에러가 뜰때마다 eslint에서 나온 건지 확인 후 추가로 라이브러리 설치 환경파일 코딩을 변경해 준다.