ESLint v9 이상에서 eslintrc.js 대신 eslint.config.js로 전환하기

버전을 확인하지 않고 package.json에 lint 명령어 추가 후 실행했다.

// ... 생략 ..
    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix"
  },
// ... 생략 ..

ESLint를 최신 버전을 사용하면서 기존에 사용하던 eslintrc.js 설정이 작동하지 않는 문제가 발생했다.

ESLint가 v9 이후부터 새로운 구성 방식인 flat config를 권장하면서, 더 이상 .eslintrc.js 방식이 기본적으로 지원되지 않기 때문이다.

린트가 정상 동작 될 수 있도록 수정한 과정을 정리해보고자 한다.

 

1. eslint.confing.js 만들기

touch eslint.config.js

 

2. 플러그인 추가 (참고한 블로그)

pnpm add -D eslint @eslint/js eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-prettier eslint-config-prettier prettier globals

 

3. 파일 작성

import js from '@eslint/js';
import { defineConfig } from 'eslint/config';
import importPlugin from 'eslint-plugin-import';
import jsxA11y from 'eslint-plugin-jsx-a11y';
import prettier from 'eslint-plugin-prettier';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import globals from 'globals';

export default defineConfig([
  {
    files: ['**/*.{js,jsx}'],

    ignores: ['node_modules', 'dist'],

    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      globals: {
        ...globals.browser,
        React: 'readonly',
      },
    },

    settings: {
      react: {
        version: 'detect',
        runtime: 'automatic',
      },
      'import/resolver': {
        node: {
          extensions: ['.js', '.jsx', '.ts', '.tsx', '.css'],
        },
      },
    },

    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      prettier,
      react,
      'jsx-a11y': jsxA11y,
      import: importPlugin,
    },

    rules: {
      semi: ['error', 'always'],
      quotes: ['error', 'single'],
      indent: ['error', 2],
      'prettier/prettier': 'error',
      'react/react-in-jsx-scope': 'off',
      'arrow-body-style': 'off',
      'prefer-arrow-callback': 'off',
      'react/jsx-no-target-blank': 'off',
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
      'no-unused-vars': 'off',
      'import/order': [
        'error',
        {
          groups: [
            'builtin',
            'external',
            'internal',
            ['parent', 'sibling', 'index'],
            'object',
            'type',
          ],
          pathGroups: [
            {
              pattern: '@/**',
              group: 'internal',
            },
          ],
          pathGroupsExcludedImportTypes: ['builtin'],
          'newlines-between': 'always',
          alphabetize: {
            order: 'asc',
            caseInsensitive: true,
          },
        },
      ],
    },
  },
]);

 

주요 설정

languageOptions	ES 최신 문법 + JSX 활성화, 전역 변수 설정
settings.react.version	React 버전 자동 감지 (CRA나 Next.js에서 유용)
import/resolver	@/ 같은 alias 경로를 인식하기 위한 설정
react/react-in-jsx-scope: off	React 17 이후 JSX 자동 import 대응
prettier/prettier: error	Prettier 스타일을 ESLint와 통합
import/order	import 정렬 규칙 설정 (가독성 향상)

 

4. lint command 변경

# package.json

// ... 생략 ...
  "scripts": {
    "lint": "eslint . --fix"
  },
// ... 생략 ...

 

이제 린트 명령어를 실행해보면 동작하는 것을 볼 수 있다.

 

 끝!