[Next.js@^11] Typescript, Prettier, ESLint 통합하기 with VSCode

[Next.js v11] Typescript, Prettier, ESLint 통합하기 with VSCode

들어가기 전에

버전정보

• VSCode@1.60.2
• Next.js@^11
• prettier@^2.4.1
• eslint@8.0.1
• typescript@4.4.4

VSCode에서 Next.js Typescript, Prettier, ESLint 통합하는 과정은 아래와 같습니다.

• VSCode 기본 설정
• Next.js 설치
• ESLint 기본구조 개선
• Prettier 플러그인 설치 및 ESLint 연동, 자동 포맷팅 적용
• ESLint + Typescript 연동

VSCode 기본 설정

세팅을 위해 비주얼 스튜디오 코드(VSCode, Visual Studio Code) 기본 설정을 진행하시기 바랍니다.

• VSCode용 ESLint 플러그인 설치
• VSCode 설정에 아래 구성 추가

"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

Next.js 설치

Next.js 기본 강의가 아니기 때문에 자세한 설명은 생략하고 넘어가겠습니다. Next.js와 타입스크립트를 함께 사용할 것이기 때문에 초기설정에 타입스크립트 옵션을 넣고 세팅합니다.

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

next-app 명령어를 통해 프로젝트 초기 세팅을 완료한 모습

create-next-app 명령어를 활용하면 번거로운 설정 과정 없이 모든 것을 자동으로 설정되어 새로운 Next.js 애플리케이션이 생성됩니다.

Getting Started | Next.js

다음은 일부 ESLint 구성과 함께 기본 제공됩니다. 이 ESLint 규칙으로 프로젝트가 생성됩니다.

{
  "extends": "next/core-web-vitals"
}

권장 구성에서 활성화된 ESLint Rule 목록

개선하기

기본 구성은 프로젝트 루트의 .eslintrc 파일에서 찾을 수 있습니다.

{
  "extends": ["next", "next/core-web-vitals"]
}

eslint:recommended 를 활성화합니다. 전체 규칙 확인

{
  "extends": [
    "eslint:recommended",
    "next", 
    "next/core-web-vitals"
  ]
}

필요한 전역 변수(env)를 정의합니다.

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "next", 
    "next/core-web-vitals"
  ]
}

코드 포맷팅 추가하기 (Prettier 연동)

Prettier 패키지를 설치합니다.

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

프로젝트의 루트에 .prettierrc 파일을 만들고 몇 가지 규칙을 정의합니다.

{
    "trailingComma": "none",
    "semi": false,
    "singleQuote": true
}

ESLint extends에 prettier 플러그인을 추가합니다.

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "next", 
    "next/core-web-vitals",
    "plugin:prettier/recommended" // 항상 마지막에 위치시킵니다
  ]
}

이제 파일을 저장할 때 자동으로 코드가 포맷팅됩니다!

타입스크립트 연동하기

TypeScript와 ESLint를 연동하여 사용하려면 몇 가지 플러그인을 설치해야 합니다. next에서 제공하는 내장 파서를 사용하면 파서 버전과 @typescript-eslint/eslint-plugin 문서에 따라 제어할 수 없습니다.

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser", // parser 추가!
  "parserOptions": {
    "ecmaFeatures": {
        "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended", // typescript eslint 추가!
    "next", 
    "next/core-web-vitals",
    "plugin:prettier/recommended" // always at the end
  ]
}

포맷팅 테스트

정상적으로 Prettier가 적용되는 모습