[ESLint, Prettier] Next JS 에 ESLint 와 Prettier 적용하기

 

안녕하세요. gaki 입니다. 

오늘은 Next js 에 Eslint 와 Prettier 를 적용하는 방법에 대해서 알아보겠습니다.

Eslint 와 Prettier 는 코드를 깔끔하게 유지하고 컨벤션을 통일하기에 좋은 툴입니다.

 

<목차>

ESLint

1. 패키지 설치

2. 설정 파일 세팅

3. 추가 설정하기

Prettier

1. 패키시 설치

2. 설정 파일 세팅

3. IDE 설정 (vsCode)

 

 

1. ESLint 적용하기

(1) 패키지 설치

우선 다음 명령어를 통해 패키지를 설치합니다.

npm install eslint --save-dev
# or
yarn add eslint --dev

 

(2) 설정 파일 세팅하기

그리고 설정파일을 세팅하면 되는데요, 이때 --init 플래그를 사용한 다음 명령어를 이용하면 쉽게 설치 할 수 있습니다.

npx eslint --init
# or
yarn run eslint --init

그럼 아마 몇개의 질문이 나올텐데요, 각 질문마다 본인의 상황에 맞는 선택지를 고르면 됩니다.

질문을 다 선택하면 질문에 해당하는 추가적인 패키지를 설치할거냐는 질문이 나오고, YES 를 선택하면 해당되는 패키지를 모두 설치한뒤, .eslintrc.js  라는 파일이 만들어집니다.

다음과 같은 .eslintrc.js 파일이 만들어집니다. 

이제 원하는 설정이 있다면, 추가해나가면서 적용하시면 됩니다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {
    "react/react-in-jsx-scope": 0,
  },
};

★ 간단 요약 정리

# env
env 는 eslint 를 적용할 환경을 설정하는 부분으로, 쉽게 생각해서 프로젝트가 어떤 환경에서 실행되는 
코드인지를 설정하는 것 입니다.

# extends
extends 는 설정을 특정하는 문자열이거나, 이전 설정을 확장하는 추가적인 설정에 대한 문자열 리스트입니다.

# parser
parser는 코드를 ESLint 에 맞게 파싱하기 위해 사용하는 것으로, 값을 주지 않으면 기본적으로
'Espree' 로 설정됩니다.

# parserOptions
parserOptions는 자바스크립트 지원 옵션을 설정하기 위한 부분으로, 기본적으로는 ECMAScript 5 를 지원합니다.

# plugin
ESLint는 다양한 외부 플러그인을 지원하는데, 사용하기 전에 패키지 다운로드가 필요합니다.

# rules
rules 는 린트로 잡아낼 에러에 대한 규칙을 설정하는 부분으로, Eslint 에는 built-in 된 다양한 rules 가 있고,
직접 추가할 수도 있습니다.

 

2. Prettier 적용하기

Prettier 는 문법 오류를 확인하는 Eslint 와는 다르게, 코딩 스타일만 확인해줍니다.

 

(1) 패키지 설치

우선 다음 명령어를 통해 세 가지 패키지를 설치합니다.

npm install -save-dev prettier eslint-config-prettier eslint-plugin-prettier
# or
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

패키지에 대해 간단히 설명하면 다음과 같습니다.

prettier : prettier 를 사용하기 위한 패키지 입니다.

eslint-config-pretter: ESLint 의 포멧팅 관련 설정 중 Prettier 와 충돌하는 부분을 비활성화 해줍니다.

Prettier 에서 문법 관련된 ESlint 규칙을 사용하지 않게 되기 때문에 ESLint 는 자바스크립트 문법을 담당하고, 코드 스타일 정리는 Prettier 가 담당하게 됩니다.

eslint-plugin-prettier:  원하는 형식의 포멧팅을 설정해줍니다.

 

(2) 설정 파일 세팅

그리고 프로젝트 루트에 .prettierrc 라는 이름의 파일을 만들고 아래 내용을 적어주세요.

{
  "parser": "typescript",
  "semi": true, // 코드의 끝에 항상 세미콜론을 찍습니다.
  "useTabs": false, // tab 대신 스페이스를 사용합니다.
  "tabWidth": 2, // 들여쓰기의 길이가 2칸입니다.
  "trailingComma": "all", // 객체나 배열을 작성할 때 맨뒤에 있는 것에도 쉼표를 붙입니다.
  "printWidth": 120, // 코드 한줄의 최대 길이가 120 이 되게합니다.
  "arrowParens": "always"
}

3. IDE 설정

자동수정을 적용하기 위해 vscode 의 formatOnSave 를 true 로 설정해주어야 합니다.