ESLint 9 버전 Flat config

기존 8 버전 eslint 구조 이해

주로 설정 세트를 가져오고(extends) 특별한 기능 지원이 필요한 경우 plugins 에 등록, 나머지 세부 설정(env, parser, settings, etc..) 및 일부 변경이 필요한 규칙의 경우 rules 에서 작성하는 구조

// 기존 .eslintrc.json 파일 구조
{
  "extends": [ ... ],
  "plugins": [ ... ],
  "rules": { ... },
  ...etc          
}

---

8 버전 vs 9 버전 Flat config

이전 8 버전

• 계층적인 구조(extends, overrides)를 사용
• 파일별로 설정을 병합하는 방식
• CommonJS 기반의 JS 설정만 지원

new 9 버전 Flat config

• 배열 기반 설정: 설정을 하나의 배열로 구성하고 순서대로 평가
• 빠른 성능: 설정 병합 과정 없이 직접 평가
• 더 유연한 설정: 함수, 조건문을 활용한 동적 설정 가능
• JSON이 아닌 JS 설정 방식: eslint.config.js 파일에서 JavaScript 문법을 활용 가능
• ESModules (import/export) 방식과의 호환성

단점

eslint 관련 설정 패키지들의 구조 달라 적용 방법이 일관적이지 않아 각각 다르게 적용하는 번거러움이 존재 (ex: plugin 설정만 존재하거나, 배열 형식의 설정이거나, flat 형식의 속성이 따로 존재하거나)

migrate 명령어

• .eslintrc.js 에는 제대로 작동하지 않을 수 있어 주의 필요
• 기존 설정 파일의 원시 데이터만 마이그레이션

npx @eslint/migrate-config .eslintrc.json 

---

참고

https://eslint.org/docs/latest/use/configure/
https://eslint.org/docs/latest/use/configure/migration-guide