Next.js 12-2 Configuring ESLint

Next.js는 즉시 사용 가능한 통합 ESLint 경험을 제공한다. 다음 lint를 package.json에 스크립트로 추가한다.

// package.json

{
  "script": {
    "lint": "next lint"
  }
}

그런 다음 npm run lint 또는 yarn lint를 실행한다. 응용 프로그램에 ESLint가 아직 구성되어 있지 않은 경우 설치 및 구성 프로세스를 안내한다. 구성 프로세스에선 다음 세 가지 옵션 중 하나를 선택할 수 있다.

- Strict: 엄격한 Core Web Vitals 규칙 세트와 함께 Next.js의 기본 ESLint 구성을 포함한다. ESLint를 처음 설정하는 개발자에게 권장되는 구성이다.

// .eslintrc.json

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

- Base: Next.js의 기본 ESLint 구성을 포함한다.

// .eslintrc.json

{
  "extends": "next"
}

- Cancel: ESLint 구성을 포함하지 않는다. 사용자 정의 ESLint 구성을 설정할 계획인 경우에만 이 옵션을 선택하면 된다.

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

이제 ESLint를 실행하여 오류를 포착하려고 할 때마다 next lint를 실행할 수 있다. ESLint가 설정되면 모든 빌드(next build) 중에 자동으로 실행된다. 오류는 빌드에 실패하지만 경고는 그렇지 않다.

ESLint Config

기본 구성(eslint-config-next)에는 Next.js에서 즉시 사용가능한 최적의 linting 경험을 제공하는 데 필요한 모든 것이 포함되어 있다. 애플리케이션에 이미 ESLint가 구성되어 있지 않은 경우 next lint를 사용하여 이 구성과 함께 ESLint를 설정하는 것이 좋다.

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

eslint-plugin-react

eslint-plugin-react-hooks

eslint-plugin-next

이것은 next.config.js의 구성보다 우선한다.

ESLint Plugin

Next.js는 기본 구성 내에 이미 번들로 포함되어 있는 ESLint 플러그인인 eslint-plugin-next를 제공하여 Next.js 애플리케이션에서 일반적인 문제를 파악할 수 있다. 전체 규칙은 다음과 같다.

@next/next/google-font-preconnect	preconnect가 Google Fonts와 함께 사용되는지 확인한다.
@next/next/inline-script-id	인라인 콘텐츠가 있는 next/script 컴포넌트에 id 속성을 적용한다.
@next/next/next-script-for-ga	Google 애널리틱스에 인라인 스크립트를 사용하는 경우 next/script 컴포넌트를 선호한다.
@next/next/no-before-interactive-variable	module 변수에 대한 할당을 방지한다.
@next/next/no-before-interactive-script-outside-document	pages/_document.js 외부에서 next/script의 beforeInteractive 전략 사용을 방지한다.
@next/next/no-css-tags	수동 스타일시트 태그를 방지한다.
@next/next/no-document-import-in-page	pages/_document.js 외부에서 next/document 가져오기를 방지한다.
@next/next/no-duplicate-head	pages/_document.js에서 <Head>의 중복 사용을 방지한다.
@next/next/no-head-element	<head> 요소의 사용을 방지한다.
@next/next/no-head-import-in-document	pages/_document.js에서 next/head 사용을 방지한다.
@next/next/no-html-link-for-pages	내부 Next.js 페이지로 이동하기 위해 <a> 요소의 사용을 방지한다.
@next/next/no-img-element	더 느린 LCP와 더 높은 대역폭으로 인해 <img> 요소의 사용을 방지한다.
@next/next/no-page-custom-font	페이지 전용 사용자 지정 글꼴을 방지한다.
@next/next/no-script-component-in-head	next/head 컴포넌트에서 next/script의 사용을 방지한다.
@next/next/no-styled-jsx-in-document	pages/_document.js에서 styled-jsx의 사용을 방지한다.
@next/next/no-typos	Next.js의 데이터 가져오기 기능에서 일반적인 오타를 방지한다.
@next/next/no-unwanted-polyfillio	Polyfill.io에서 중복 폴리필을 방지한다.

애플리케이션에 이미 ESLint가 구성되어 있는 경우 몇 가지 조건이 충족되지 않는 한 eslint-config-next를 포함하는 대신이 플러그인에서 직접 확장하는 것이 좋다.

Custom Setting

rootDir

루트 디렉토리(예: monorepo)에 Next.js가 설치되지 않은 프로젝트에서 eslint-plugin-next를 사용하는 경우 .eslintrc의 설정 속성은 아래와 같다.

// .eslintrc.json

{
  "extends": "next",
  "Settings": {
    "next": {
      "rootDir": "package/my-app/"
    }
  }
}

rootDir은 경로(상대 또는 절대), glob(예: "packages/*/") 또는 경로 and/or glob의 배열일 수 있다.

Linting Custom Directories and Files

기본적으로 Next.js는 pages/, app/, components/, lib/ 및 src/ 디렉토리의 모든 파일에 대해 ESLint를 실행한다. 그러나 프로덕션 빌드를 위해 next.config.js의 eslint 구성에서 dirs 옵션을 사용하여 디렉토리를 지정할 수 있다.

// next.config.js

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

마찬가지로 --dir 및 --file 플래그는 특정 디렉토리 및 파일을 lint 하기 위한 next lint에 사용할 수 있다.

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

Caching

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

next lint --no-cache

Disabling Rules

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

// .eslintrc.json

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

Core Web Vitals

next/core-web-vitals 규칙 세트는 next/lint가 처음으로 실행되고 static 옵션이 선택될 때 활성화된다.

// .eslintrc.json

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

next/core-web-vitals는 Core Web Vitals에 영향을 미치는 경우 기본적으로 경고인 여러 규칙에 대한 eslint-plugin-next to error 업데이트한다.

Usage With Other Tools

Prettier

ESLint는 또 기존 Prettier 설정과 충돌할 수 있는 코드 서식 규칙을 포함하기도 한다. ESLint와 Prettier가 함께 작동하도록 ESLint 구성에 eslint-config-prettier를 포함하는 것이 좋다. 먼저, 종속성을 설치한다.

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

yarn add --dev eslint-config-prettier

그런 다음 기존 ESLint 구성에 prettier를 추가한다.

// .eslintrc.json

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

lint-staged

lint-staged와 함께 next lint를 사용하여 staged git 파일에서 linter를 실행하려면 프로젝트의 루트에 있는 .lintstagedrc.js 파일에 다음을 추가해야 한다. --file flag.

// .lintstagedrc.js

const path = require('path')

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

Migrating Existing Config

권장 플러그인 규칙 세트

애플리케이션에 ESLint가 이미 구성되어 있고 다음 조건 중 하나가 참인 경우:

다음 플러그인 중 하나 이상이 이미 설치되어 있다(별도로 또는 airbnb 또는 react-app과 같은 다른 구성을 통해). (react, react-hooks, jsx-a11y, import)
Next.js 내에서 Babel이 구성되는 방식과 다른 특정 parserOptions를 정의했다(Babel 구성을 사용자 지정하지 않은 경우 권장되지 않음).
가져오기를 처리하도록 정의된 Node.js and/or TypeScript 리졸버와 함께 exlint-plugin-import가 설치되어 있다.

그런 다음 이러한 속성이 eslint-config-next 내에서 구성되는 방식을 선호하는 경우 이러한 설정을 제거하거나 대신 Next.js ESLint 플러그인에서 직접 확장하는 것이 좋다.

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

플러그인 next lint를 실행할 필요 없이 프로젝트에 정상적으로 설치할 수 있다.

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

yarn add --dev @next/eslint-plugin-next

이렇게 하면 여러 구성에서 동일한 플러그인 또는 파서를 가져오기 때문에 발생할 수 있는 충돌 또는 오류의 위험이 제거된다.

Additional Configurations

이미 별도의 ESLint 구성을 사용하고 있고 eslint-config-next를 포함하려는 경우 다른 구성 후에 마지막으로 확장되었는지 확인해야 한다. 예를 들면,

// .eslintrc.json

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

다음 구성은 이미 파서, 플러그인 및 설정 속성에 대한 기본값 설정을 처리한다. 사용 사례에 대한 다른 구성이 필요한 경우가 아니면 이러한 속성을 수동으로 다시 선언할 필요가 없다.

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

저작자표시 비영리

'Next.js' 카테고리의 다른 글

Next.js 12-4 Configuring Absolute Imports and Module Path Aliases (0)	2023.06.23
Next.js 12-3 Configuring Environment Variables (0)	2023.06.22
Next.js 12-1 Configuring TypeScript (0)	2023.06.19
Next.js 9-8 OpenTelemetry (0)	2023.06.16
Next.js 9-7 Lazy Loading (0)	2023.06.15

安享

Next.js 12-2 Configuring ESLint

'Next.js' 카테고리의 다른 글

티스토리툴바

Next.js 12-2 Configuring ESLint

'Next.js' 카테고리의 다른 글

'Next.js' Related Articles

티스토리툴바