[next.js 공식문서] 26. ESLint

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

ESLint

// package.json에 추가
"scripts": {
  "lint": "next lint"
}

실행

npm run lint

3가지 옵션

• Strict: 더 엄격하게

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

• Base : 기본구성

  {
  "extends": "next"
  }

• Cancel: 구성하지 않기

ESLint 구성

기본설정 그대로 쓰셈

ESLint 플러그인

기본설정 그대로 쓰셈

맞춤설정

모노레포와 같은 경우는 아래처럼 위치 찾을 수 있게

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

맞춤 디렉토리 및 파일 린팅

module.exports = {
  eslint: {
    dirs: ['pages', 'utils'], // 2개 폴더에서만 실행
  },
};

캐싱

캐시는 기본 활성화. 비활성화 방법은 다음과 같음

next lint --no-cache

특정 규칙 비활성화

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

다른 도구와 함께 사용

prettier

설치

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

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

설정에 추가

린트 스테이징

스테이징 된 파일만 검사

// .lintstagedrc.js

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],
};

기존 구성 마이그레이션은 생략