eslint.config.js로 변경된 ESLint 설정

최근 ESLint 설정 방식이 변경되면서 기존 .eslintrc 대신 eslint.config.js이 기본이 되었다.

기존과 새로운 방식의 차이점을 비교하면 다음과 같다.

항목	.eslintrc	eslint.config.js
파일 포맷	JSON, YAML, JS	JavaScript (JS)
설정 형식	CommonJS (module.exports)	ES Module (export default)
확장 방식	"extends" 배열 사용	import 후 직접 구성
플러그인 로드 방식	"plugins" 배열에 문자열로 추가	import 후 객체로 등록

설정 비교 예제

.eslintrc

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {
    "react/react-in-jsx-scope": "off",
  },
};

eslint.config.js

import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    },
  },
);

주요 차이점

1️⃣ eslint.config.js 에서는 import를 사용해야 한다.

• .eslintrc에서는 "extends": [...] 방식으로 설정했지만, 이제 import로 직접 가져와야 한다.
  
  

2️⃣ 플러그인을 문자열이 아닌 객체로 설정해야 한다.

// .eslintrc
"plugins": ["react-hooks"]

// eslint.config.js
plugins: { "react-hooks": reactHooks }

3️⃣ 파일 확장자 설정 방법이 바뀌었다.

• 이전에는 overrides를 사용했지만, 이제는 files 키워드를 사용해야 한다.
  
  

4️⃣ 설정 파일이 ES Module이므로 module.exports가 아니라 export default를 사용해야 한다.

// .eslintrc(CommonJS)
module.exports = { ... }

// eslint.config.js(ES Module)
export default { ... }

왜 바뀌었을까?

eslint.config.js는 Flat Config를 통해 기존 방식보다 더 직관적이고 유연하게 설정할 수 있도록 개선된 방식이다.
또한, 기존의 문제점을 해결하고 성능 및 유지보수성을 향상시키는 것을 목표로 한다.

✅ 기존 방식(.eslintrc)의 한계점

1️⃣ JSON 기반 설정의 한계

• .eslintrc는 JSON 기반이어서 조건부 설정(예: 특정 파일만 다른 규칙 적용)을 직관적으로 관리하기 어려웠다.
  예를 들어, src/ 폴더와 tests/ 폴더에 각각 다른 규칙을 적용하려면 overrides을 사용해야 했다.

2️⃣ 설정 병합 방식이 비효율적

• extends를 사용하여 여러 설정을 조합할 수 있지만, 규칙이 많아질수록 어떤 규칙이 최종적으로 적용되는지 파악하기 어렵다.
  예제: "eslint:recommended" → "plugin:react/recommended" → "plugin:@typescript-eslint/recommended" 순서대로 규칙이 덮어씌워진다.
  

3️⃣ 플러그인 로드 방식이 비효율적

• 기존 방식에서는 plugins에 문자열을 넣고, 확장 설정(extends)을 따로 관리해야 했음.

✅ 새로운 방식(eslint.config.js)

1️⃣ JSON 대신 JavaScript 기반 설정

• 설정을 함수형으로 정의할 수 있어서 동적인 설정이 가능하다.
• 특정 파일 패턴에 따라 규칙을 유연하게 적용할 수 있다.
• files 키를 사용해서 특정 파일에만 ESLint 규칙을 적용할 수도 있다.

2️⃣ 설정이 자동으로 병합

• 기존 방식에서는 extends를 사용해서 설정을 조합해야 했지만, Flat Config에서는 배열을 사용하여 순차적으로 설정을 추가하면 된다.
• 순서대로 적용되기 때문에 어떤 규칙이 최종적으로 적용되는지 명확하게 확인 가능하다.

3️⃣ 플러그인을 더 쉽게 관리할 수 있다

• 기존 방식에서는 plugins과 extends를 분리해서 관리해야 했다.
• Flat Config에서는 import로 직접 플러그인을 가져와서 plugins: {} 형태로 설정이 가능하다

언제 뭘 써야 할까?

.eslintrc

• 기존 프로젝트에서 이미 사용하고 있다면 그대로 유지해도 무방하다.

• 기본적인 ESLint 설정만 필요하다면 여전히 충분히 활용 가능하다.

eslint.config.js

• 프로젝트에서 최신 ESLint 기능을 활용 하고싶거나 더 유연하고 동적인 설정을 원할 경우 사용하면 된다.

• 대규모 프로젝트에서 성능 최적화 및 유지보수성을 높이는 데 유리하다.