[Next.js 개발도구] ESLint와 Prettier, 및 다른 플러그인 설치

 

 

 

 

 

소스코드의 표준화와 자동 포매팅을 수행해, 소스 코드의 품질을 유지하는데 도움을 주는 도구들을 설치해 보도록 하겠습니다.

 

다음 플러그인들을 설치합니다.

 

 

 

 

• typescript-eslint
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-import

 

 

 

 

npm install --save-dev prettier eslint typescript-eslint @typescript-eslint/parser@6.1.0 @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import

 

 

@typescript-eslint/eslint-plugin 패키지는 6.1.0 버전의 @typescript-eslint/parser를 필요로 하고 있습니다. @typescript-eslint/parser버전이 6.1.0보다 낮으면 종속성 충돌로 인해 설치가 안될 겁니다. 

 

 

 

 

.eslintrc.json로 개별적으로 규칙을 취사선택/커터마이즈 할 수 있습니다.

저는 아래 내용을 추가 및 설정하였습니다.

 

 

• 작은따옴표 singleQuote 옵션
• 열의 너비를 설정하는 PrintWidth 옵션
• react/react-in-jsx-scopr 규칙을 off로 설정 - import React from 'react는 React 17부터 필요하지 않음
• import/orer는 import의 순서를 알파벳 오름차순으로 나열

 

 

## _.eslintrc.json

 

{

  "extends": [

    "next",

    "next/core-web-vitals",

    "eslint:recommended",

    "plugin:prettier/recommended",

    "plugin:react/recommended",

    "plugin:react-hooks/recommended",

    "plugin:@typescript-eslint/recommended",

    "plugin:import/recommended",

    "plugin:import/typescript"

  ],

  "rules": {

    "react/react-in-jsx-scope": "off",

    "import/order": [2, { "alphabetize": { "order": "asc" } }],

    "prettier/prettier": [

      "error",

      {

        "trailingComma": "all",

        "endOfLine": "lf",

        "semi": false,

        "singleQuote": true,

        "printWidh": 80,

        "tabWidth": 2

      }

    ]

  }

}

 

 

 

다음으로 npm 스크립트에 lint 명령어와 format을 추가합니다.

원래 있었던 next lint를 덮어씁시다. next lint는 기본적으로 pages, components, lib 아래 파일에 적용되므로 --dir 옵션을 추가하여 해당 디렉터리에 다음의 모든 파일에 적용합시다.

 

 

 

npm run lint                 #Lint를 수행해, 소스 코드의 문제를 출력한다.
npm run format            # 소스 코드의 포맷을 자동으로 수행한다.

 

 

 

## package.json

 

{

  "name": "c2c-express",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "dev": "next dev",

    "build": "next build",

    "start": "next start",

    "lint": "next lint --dir src",

    "format": "next lint --fix --dir src"

  },

 //생략

 

 

 

 

여기까지 설정이 완료됐다면 실제로 lint 명령어를 실행해 봅시다.

다수의 lint 에러가 검출될 겁니다.

이 에러를 자동 포맷을 수행하는  format 명령어를 실행해서 수정합니다.