Flat Config

ESLint 8.21.0 버전부터 구성 파일에 큰 변화가 생겼다. 기존 .eslintrc 파일 대신 플랫 구성(Flat Config)을 사용하는 eslint.config.js 형식이 새로 도입된 것. 플랫 구성은 extends나 overrides 같은 계층 구조없이 각 구성을 이루는 객체들을 포함한 1차원 배열로 표현한다. 이를 통해 규칙을 세분화해야 하는 상황에서 더 유연하게 대응할 수 있게 됐다. e.g., 구성 객체 1-자바스크립트 규칙, 구성 객체 2-타입스크립트 규칙

필요한 플러그인은 직접 import 한 후 사용하는 방식으로 변경돼서 종속성을 더 명확하게 관리할 수 있다.

import eslint from '@eslint/js';
import reactPlugin from 'eslint-plugin-react';

export default [
  // 불러온 구성 객체 1 { rules: { ... } }
  eslint.configs.recommended,
  // jsx, tsx 파일에만 적용할 구성 객체 2
  {
    files: ['**/*.{jsx,tsx}'],
    plugins: { 'react': reactPlugin },
    // ...
  }
];

배열에 들어가는 각 구성 객체는 아래 속성을 포함하며, 1개 이상의 구성 객체로 조합해서 사용할 수 있다.

• files : 구성이 적용될 파일 패턴
• languageOptions : 파서(Parser), 전역 변수 등 언어 관련 옵션
• plugins : 플러그인
• rules : 규칙
• settings : 플러그인이나 규칙에서 사용하는 추가 설정

하지만 아직까지 플랫 구성을 지원하지 않는 플러그인이 꽤 있고, ESLint 9 버전에서 여러 API가 변경됐기 때문에 기존 plugin(규칙 정의 모음)/config(규칙 정의 + 패키지 모음)가 지원할 때까진 8.x 버전을 사용하는게 좋다.

아래는 2024.06.28 기준 주요 플러그인 지원 현황. ESLint에서 제공하는 Compatibility Utilities를 사용하거나 별도의 Workaround가 필요한 플러그인은 🌗로 표시했다. 더 자세한 지원 현황은 링크를 참고하자.

ESLint 및 플러그인 셋업

<aside> <img src="/icons/search_gray.svg" alt="/icons/search_gray.svg" width="40px" /> 아래 세팅은 create vite 기준으로 작성했다. 패키지 매니저는 pnpm을 사용했다.

</aside>

프로젝트를 처음 시작한다면 ESLint v9 Flat Config 로 설정해두고, 향후 필요한 플러그인이 Flat Config를 지원했을 때 구성 파일을 업데이트하는게 더 편리할 수 있다.

eslint-config-airbnb는 아직 Flat Config를 지원하지 않기 때문에 대안으로 eslint-config-standard를 사용할 수 있다. Airbnb는 너무 엄격한 규칙 때문에 일일이 프로젝트에 맞춰 수정하는 과정이 번거로울 때가 종종 있는데, Standard JS는 규칙이 좀 더 유연한 장점이 있다.

ESLint 설치