[Configuring] Next 공식문서 번역 / Configuring - ESLint / Next.js ESLint / Next.js 린트

ESLint

Next.js는 바로 사용할 수 있는 통합 ESLint 환경을 제공합니다.

package.json에 next lint를 스크립트로 추가하세요:

"scripts": {
  "lint": "next lint"
}

그런 다음 npm 실행 린트 또는 실 린트를 실행합니다:

yarn lint

애플리케이션에 ESLint가 아직 구성되지 않은 경우 설치 및 구성 프로세스를 안내합니다.

다음과 같은 메시지가 표시됩니다:
? ESLint를 어떻게 구성하시겠습니까?

기본 구성 + Core Web Vitals 규칙 세트(권장) 기본 구성 없음

 

다음 세 가지 옵션 중 하나를 선택할 수 있습니다:

엄격: 보다 엄격한 코어 웹 바이탈 규칙 세트와 함께 Next.js의 기본 ESLint 구성을 포함합니다. ESLint를 처음 설정하는 개발자에게 권장되는 구성입니다.

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

Base: Next.js의 기본 ESLint 구성을 포함합니다.

{
  "extends": "next"
}

취소합니다: ESLint 구성을 포함하지 않습니다. 사용자 지정 ESLint 구성을 직접 설정하려는 경우에만 이 옵션을 선택합니다.

두 가지 구성 옵션 중 하나를 선택하면 Next.js가 애플리케이션의 개발 종속 요소로 eslint 및 eslint-config-next를 자동으로 설치하고 프로젝트 루트에 선택한 구성이 포함된 .eslintrc.json 파일을 생성합니다.

이제 ESLint를 실행할 때마다 next lint를 실행하여 오류를 포착할 수 있습니다. ESLint를 설정하면 모든 빌드(다음 빌드) 시에도 자동으로 실행됩니다. 오류는 빌드에 실패하지만 경고는 실패하지 않습니다.

다음 빌드 중에 ESLint가 실행되지 않도록 하려면 ESLint 무시하기 문서를 참조하세요.

개발 중에 코드 편집기에서 직접 경고 및 오류를 보려면 적절한 통합 기능을 사용하는 것이 좋습니다.

 

ESLint 구성

기본 구성(eslint-config-next)에는 Next.js에서 최적의 린팅 환경을 구현하는 데 필요한 모든 것이 포함되어 있습니다. 애플리케이션에 ESLint가 아직 구성되지 않은 경우 next lint를 사용하여 이 구성과 함께 ESLint를 설정하는 것이 좋습니다.

eslint-config-next를 다른 ESLint 구성과 함께 사용하려면 추가 구성 섹션을 참조하여 충돌을 일으키지 않고 사용하는 방법을 알아보세요.

다음 ESLint 플러그인의 권장 규칙 세트는 모두 eslint-config-next 내에서 사용됩니다:

eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-next

이 설정은 next.config.js의 설정보다 우선합니다.

 

ESLint 플러그인

Next.js는 기본 구성에 이미 번들로 제공되는 ESLint 플러그인 eslint-plugin-next를 제공하여 Next.js 애플리케이션의 일반적인 이슈와 문제를 포착할 수 있도록 합니다. 전체 규칙 세트는 다음과 같습니다:

 권장 구성에서 사용

(중략...)

애플리케이션에 ESLint가 이미 구성되어 있는 경우 몇 가지 조건이 충족되지 않는 한 eslint-config-next를 포함하지 않고 이 플러그인에서 직접 확장하는 것이 좋습니다. 자세한 내용은 권장 플러그인 규칙 집합을 참조하세요.

 

사용자 지정 설정

rootDir
루트 디렉터리에 Next.js가 설치되지 않은 프로젝트(예: 모노레포)에서 eslint-plugin-next를 사용하는 경우, .eslintrc의 설정 속성을 사용하여 eslint-plugin-next에 Next.js 애플리케이션을 찾을 위치를 지정할 수 있습니다:

{
  "extends": "next",
  "settings": {
    "next": {
      "rootDir": "packages/my-app/"
    }
  }
}

rootDir은 경로(상대 또는 절대), 글로브(예: "packages/*/") 또는 경로 및/또는 글로브의 배열일 수 있습니다.

 

사용자 정의 디렉토리 및 파일 린팅

기본적으로 Next.js는 pages/, app(실험적인 appDir 기능이 활성화된 경우에만), components/, lib/, src/ 디렉터리의 모든 파일에 대해 ESLint를 실행합니다. 그러나 프로덕션 빌드의 경우 다음.config.js의 eslint 구성에서 dirs 옵션을 사용하여 실행할 디렉터리를 지정할 수 있습니다:

module.exports = {
  eslint: {
    dirs: ['pages', 'utils'], // Only run ESLint on the 'pages' and 'utils' directories during production builds (next build)
  },
};

마찬가지로 --dir 및 --file 플래그를 사용하여 next lint에 특정 디렉터리 및 파일을 린트할 수 있습니다:

next lint --dir pages --dir utils --file bar.js

 

캐싱

성능 향상을 위해 ESLint가 처리하는 파일 정보는 기본적으로 캐시됩니다. 이 정보는 .next/cache 또는 정의한 빌드 디렉터리에 저장됩니다. 단일 소스 파일의 내용보다 더 많은 것에 의존하는 ESLint 규칙을 포함하고 캐시를 비활성화해야 하는 경우, next lint와 함께 --no-cache 플래그를 사용하세요.

next lint --no-cache

 

규칙 비활성화하기

지원되는 플러그인(react, react-hooks, next)에서 제공하는 규칙을 수정하거나 비활성화하려면 .eslintrc의 규칙 속성을 사용하여 직접 변경할 수 있습니다:

{
  "extends": "next",
  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off"
  }
}

 

핵심 웹 바이탈

next lint를 처음 실행하고 엄격 옵션을 선택하면 next/core-web-vitals 규칙 세트가 활성화됩니다.

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

next/core-web-vitals는 코어 웹 바이탈에 영향을 미치는 경우 기본적으로 경고하는 여러 규칙에 대한 오류에 대해 eslint-plugin-next를 업데이트합니다.

Create Next App으로 빌드된 새 애플리케이션에 자동으로 포함됩니다.

 

다른 도구와 함께 사용

Prettier
ESLint에는 코드 서식 지정 규칙이 포함되어 있어 기존 Prettier 설정과 충돌할 수 있습니다. ESLint와 Prettier가 함께 작동하도록 ESLint 구성에 eslint-config-prettier를 포함할 것을 권장합니다.

먼저 의존성을 설치합니다:

npm install --save-dev eslint-config-prettier
 
yarn add --dev eslint-config-prettier

그런 다음 기존 ESLint 구성에 prettier 를 추가하세요:

{
  "extends": ["next", "prettier"]
}

 

lint-staged

next lint를 lint-staged와 함께 사용하여 스테이징된 git 파일에서 린트를 실행하려면 프로젝트 루트에 있는 .lintstagedrc.js 파일에 다음을 추가하여 --file 플래그의 사용을 지정해야 합니다.

const path = require('path');
 
const buildEslintCommand = (filenames) =>
  `next lint --fix --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`;
 
module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
};

 

기존 구성 마이그레이션

권장 플러그인 규칙 집합

애플리케이션에 이미 ESLint가 구성되어 있고 다음 조건 중 하나라도 해당되는 경우:

다음 플러그인 중 하나 이상이 이미 설치되어 있습니다(개별적으로 또는 airbnb 또는 react-app과 같은 다른 구성을 통해):
react
react-hooks
jsx-a11y
import

• Next.js 내에서 Babel이 구성되는 방식과 다른 특정 parserOptions을 정의한 경우(Babel 구성을 사용자 정의하지 않은 경우 권장하지 않음).
• 가져오기를 처리하도록 정의된 Node.js 및/또는 TypeScript resolvers 함께 eslint-plugin-import가 설치되어 있습니다.

이러한 프로퍼티가 eslint-config-next 내에서 구성되는 방식을 선호하는 경우 이러한 설정을 제거하거나 대신 Next.js ESLint 플러그인에서 직접 확장하는 것이 좋습니다:

module.exports = {
  extends: [
    //...
    'plugin:@next/next/recommended',
  ],
};

플러그인은 다음 린트를 실행할 필요 없이 프로젝트에 정상적으로 설치할 수 있습니다:

npm install --save-dev @next/eslint-plugin-next
 
yarn add --dev @next/eslint-plugin-next

이렇게 하면 여러 구성에서 동일한 플러그인이나 구문 분석기를 가져올 때 발생할 수 있는 충돌이나 오류의 위험이 사라집니다.

 

추가 구성

이미 별도의 ESLint 구성을 사용하고 있고 eslint-config-next를 포함하려는 경우 다른 구성 다음에 마지막으로 확장해야 합니다. 예를 들어

{
  "extends": ["eslint:recommended", "next"]
}

next 구성에서는 구문 분석기, 플러그인 및 설정 속성의 기본값 설정을 이미 처리하고 있습니다. 사용 사례에 따라 다른 구성이 필요한 경우가 아니라면 이러한 속성을 수동으로 다시 선언할 필요가 없습니다.

다른 공유 가능한 구성을 포함하는 경우 이러한 속성을 덮어쓰거나 수정하지 않았는지 확인해야 합니다. 그렇지 않으면 다음 구성과 동작을 공유하는 모든 구성을 제거하거나 위에서 언급한 대로 Next.js ESLint 플러그인에서 직접 확장하는 것이 좋습니다.