[ESLint] ESLint 설정 정리

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  parser: '@typescript-eslint/parser',
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  plugins: ['react-refresh', 'react-hooks', 'import', 'react', 'prettier'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:import/recommended',
    'prettier',
  ],
  rules: {
    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
    'react/function-component-definition': [2, { namedComponents: 'arrow-function' }],
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
        pathGroups: [
          {
            pattern: 'react',
            group: 'external',
            position: 'before',
          },
          {
            pattern: '@/**',
            group: 'internal',
            position: 'after',
          },
        ],
        pathGroupsExcludedImportTypes: ['react', 'react-dom'],
        'newlines-between': 'always',
        alphabetize: { order: 'asc' },
      },
    ],
  },
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
};

 

root

프로젝트의 최상위 ESLint 설정 파일임을 명시

상위 디렉터리로부터 설정을 상속받지 않도록 만든다.

 

true로 설정하면 상위 디렉터리의 ESLint 설정을 무시

{
  root: true
}

env

코드가 실행되는 환경을 지정

각 환경은 미리 정의된 전역 변수를 포함하며, 이를 통해 특정 환경에서 오류를 방지할 수 있다.

{
  env: {
    browser: true,   // 브라우저 환경 (DOM API 허용)
    node: true,      // Node.js 환경
    es2022: true     // 최신 ECMAScript 기능 허용
  }
}

parser

ESLint가 코드 분석을 수행하기 위해 사용하는 파서를 지정하는 속성

ESLint는 기본적으로 순수한 자바스크립트 코드만 이해할 수 있기에 타입스크립트 및 바벨 또는 다른 확장된 문법을 사용하는 경우, 해당 문법을 이해할 수 있는 파서를 지정해야 한다.

{
  parser: '@typescript-eslint/parser', 
}

ignorePatterns

ESLint가 무시해야 할 파일이나 디렉터리를 지정

ESLint는 기본적으로 node_modules 폴더나 .로 시작하는 설정 파일은 무시한다. 그 밖의 다른 파일을 무시하고 싶을 때 ignorePatterns에 지정하자.

.eslintignore 파일을 대신하거나 함께 사용할 수 있다.

{
  ignorePatterns: ['dist', '.eslintrc.cjs'],
}

plugins

기본적으로 제공되는 규칙 외의 규칙을 추가하거나 동작 방식을 확장하기 위해 사용한다.

rules에서 해당 플러그인의 규칙을 활성화할 수 있다.

{
  plugins: ['react-refresh', 'react-hooks', 'import', 'react', 'prettier'],
}

extends

설정한 플러그인에서 제공하는 추천 설정을 사용할 수 있다.

이런 확장성을 이용하여 규칙을 편하게 설정할 수 있다!

  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:import/recommended',
    'prettier',
  ],

rules

특정 ESLint 규칙을 추가하거나 기존 규칙을 재정의할 수 있다.

extends에서 설정된 규칙을 덮어쓰고 싶을 때나 추가적인 규칙을 넣고 싶을 때 사용한다.

  rules: {
    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
    'react/function-component-definition': [2, { namedComponents: 'arrow-function' }],
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
        pathGroups: [
          {
            pattern: 'react',
            group: 'external',
            position: 'before',
          },
          {
            pattern: '@/**',
            group: 'internal',
            position: 'after',
          },
        ],
        pathGroupsExcludedImportTypes: ['react', 'react-dom'],
        'newlines-between': 'always',
        alphabetize: { order: 'asc' },
      },
    ],
  },

settings

플러그인이나 규칙에 전달할 추가적인 정보를 설정해줄 때 사용한다.

  settings: {
    'import/resolver': {
      typescript: {},
    },
  },