[Next.js] ESLint, Prettier 설정하기 (Typescript/VSCode)

ESLint란?

JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구.

 

Prettier란?

코드 포멧터(Code Formatter)

 

Next.js 프로젝트에 ESLint/Prettier 적용하기 (VSCode)

프로젝트 생성

npx create-next-app --typescript

저는 typescript를 사용할 예정이므로 —typescript 옵션을 추가했습니다.

 

ESLint 설치

npm i eslint --save-dev

 

ESLint 설정하기

eslint --init

위 명령어를 터미널에 실행하면 eslint 설정이 시작됩니다. 여러가지 질문들이 나오는데, 저는 아래와 같이 설정했습니다.

❯ eslint --init 
✔ How would you like to use ESLint? · problems 
✔ What type of modules does your project use? · esm 
✔ Which framework does your project use? · react 
✔ Does your project use TypeScript? · Yes 
✔ Where does your code run? · browser 
✔ What format do you want your config file to be in? · JSON 

The config that you've selected requires the following dependencies: 
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest 
✔ Would you like to install them now with npm? · Yes

여기까지 하면 eslint-plugin-react, @typescript-eslint/eslint-plugin, @typescript-eslint/parser는 기본적으로 설치가 됩니다.

추가적으로 몇 가지 eslint-plugin을 설치해봅니다. 플러그인 사용 여부는 프로젝트에 따라 다를 수 있기 때문에 본인의 기호(?)에 맞게 설치하시면 됩니다.

npm install eslint-plugin-react-hooks --save-dev 
npm install eslint-plugin-prettier --save-dev 
npm install eslint-plugin-import --save-dev

 

eslint —init을 통해 .eslintrc.json 파일을 생성된 것을 확인할 수 있습니다. 설치한 플러그인들을 사용할 수 있도록 설정을 수정합니다. 저는 아래와 같이 설정했습니다.

{ 
  "env": { 
    "browser": true, 
    "es2021": true, 
    "jest": true
  }, 
  "extends": [ 
    "plugin:react/recommended", 
    "plugin:react-hooks/recommended", 
    "plugin:@typescript-eslint/recommended", 
    "plugin:prettier/recommand" 
  ], 
  "parser": "@typescript-eslint/parser", 
  "parserOptions": { 
    "ecmaFeatures": { 
      "jsx": true 
    }, 
    "ecmaVersion": 12, 
    "sourceType": "module" 
  }, 
  "plugins": [ 
    "react", 
    "react-hooks", 
    "@typescript-eslint", 
    "prettier", 
    "import" 
  ], 
  "rules": { 
    "arrow-body-style": "error", 
    "prefer-arrow-callback": "off", 
    "no-var": "error", 
    "no-dupe-keys": "error", 
    "react/prop-types": "off" 
  } 
}

Prettier 설정하기

먼저 프로젝트에 .prettierrc 파일을 생성합니다. 저는 아래와 같이 세팅했습니다.

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

 

• 문자열에 홑따음표 사용(')
• 코드는 세미콘론으로 끝나야함.
• tab대신 스페이스 사용
• 들여쓰기 스페이스 2칸 사용
• 객체나 배열에서 맨 마지막 요소에 쉼표를 붙임
• 한줄이 80자를 넘지 않음

VSCode 설정

Extension 설치

Setting

Code → Preference → Settings