next와 eslint

Next기반 프로젝트에 eslint와 prettier를 적용해보자.

next에서 eslint 적용 방법

Next설치시 eslint사용에 체크하게되면, 아래와 같은 파일이 생성된다.

//eslint.config.mjs

import { dirname } from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript'),
];

export default eslintConfig;

이후 린트 규칙이 알아서 잘 적용되는 모습을 볼 수 있다.

eslint의 flat config

이전 eslint(v8)를 사용했다면 아마 .eslintrc.json파일을 사용했을 것이다.
현재 eslint(v9)는 위 코드블록과 같은 형식을 사용하는데, flat config이라고 칭한다.

한 번 이전의 세팅과 어떻게 달라졌는지 살펴보자.

eslint v8 config

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "no-unused-vars": "warn",
    "semi": ["error", "always"]
  }
}

eslint v9 config

// eslint.config.mjs (ESLint 9+)
import js from '@eslint/js';
import reactPlugin from 'eslint-plugin-react';
import { createConfig } from 'eslint/config';

export default createConfig([
  js.configs.recommended,
  {
    plugins: {
      react: reactPlugin
    },
    languageOptions: {
      ecmaVersion: 2021,
      sourceType: 'module',
      globals: {
        window: 'readonly',
        document: 'readonly'
      }
    },
    rules: {
      'react/react-in-jsx-scope': 'off',
      'no-unused-vars': 'warn',
      'semi': ['error', 'always']
    }
  }
]);

• json에서 mjs로 변경되었다.
• 플러그인/파서 등을 기존 문자열대신 명확하게 import하여 사용
• 여러 설정 파일 존재시, v8에서는 디렉토리 트리를 탐색하여 설정파일 병합. 특별한 규칙에 의거하여 병합하였음.
  • v9에서는 디렉토리 병합규칙x. 설정을 하나의 배열(flat)에 나열함. 따라서 설정파일 내부에서 폴더/파일별로 규칙 적용 가능.

작성 방법만 달라졌을 뿐, 개념은 똑같으니 그 점에 집중해서 이해해보자.

next의 eslint.js 파일이 살짝 다른 이유

//eslint.config.mjs

import { dirname } from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript'),
];

export default eslintConfig;

예제에서 보지못한 FlatCompat이라는 eslint관련 생성자를 사용하고 있는걸 볼 수 있다.
해당 생성자는 Next가 자체적으로 제공중인 eslint파일이 .eslintrc 기반이기때문에, 현재 eslint버전과 호환되도록 맞추는 기능을한다.

즉, Next가 제공하는 레거시 eslint규칙을 마이그레이션하기 위한 기능임.

---

next와 eslint-plugin-react-hooks

eslint는 prettier와 충돌날 수 있으므로, eslint-config-prettier플러그인도 설치하고 세팅해주었다.

//eslint.config.mjs

...
const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript', 'prettier'),
];

리액트 훅 규칙 관련 플러그인인 react-hooks도 설치하고 적용해보려 했다.

출처 : https://www.npmjs.com/package/eslint-plugin-react-hooks

공식문서에 나온 방법대로 적용해봤으나, 에러가 발생한다.

react-hooks의 플러그인을 재정의할 수 없음.
재정의라는건, 이미 사용되고있다는 뜻이다.

위 코드에는 prettier를 제외하고 어떠한 플러그인도 사용하지 않고있다.

흠...공식문서를 한 번 살펴보자.

eslint-config-next

eslint-config-next는 Next를 설치시 eslint사용에 동의하면 기본적으로 세팅되는 규칙이다.
해당 규칙은 아래와 같은 플러그인을 기본적으로 포함한다.

출처 : https://nextjs.org/docs/app/api-reference/config/eslint?utm_source=chatgpt.com

그러니까 Next에서 제공하는 기본 eslint규칙들에 설치하려던 플러그인이 이미 들어있었다.
따라서 재정의할 수 없다고 오류가 발생했던 것이다.

설치할때는 관련 공식문서를 꼭 유심히 읽어보자. (시간많으면..ㅎㅎ)