잠깐, eslint의 새로운 config 시스템에 대해 아시나요?

문제 상황

처음에 vite + react + typescript로 기본 프로젝트 설정을 진행했는데 eslint 9.13.0 버전이 설치되었고 기본 설정 파일은 eslint.config.js였다. 그래서 해당 파일에 팀원분께 받은 .eslintrc.js 파일 내용을 eslint.config.js 에 무지성으로 그대로 복사했더니 다음과 같은 에러를 마주했다.

A config object is using the "00" key, which is not supported in flat config system

 

해당 에러를 마주하면서 flat config system에 대해 처음 알게 되어서 정리하게 되었다.

Flat Config System?

ESLint v9.0.0부터는 기본적으로 flat config file format을 따르는 eslint.config.js를 사용한다. Flat config system은 확장성을 높이고 설정을 더 간결하게 만들기 위해 도입되었으며, ESLint v9.0.0 이상을 사용한다면 이제는 필수적으로 사용해야 한다. 공식 문서에 따르면 .eslintrc는 deprecated되었다고 한다.

공식 문서를 보면 기본적인 설정 예시는 다음과 같다.

// eslint.config.js
export default [
    {
        rules: {
            semi: "error",
            "prefer-const": "error"
        }
    }
];

 

flat config system은 설정을 배열로 export하며, 여러 설정을 배열 요소로 추가해 다른 config를 쉽게 결합할 수 있다.

import js from "@eslint/js";

export default [
    js.configs.recommended,

   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];

Mirgration 방법

.eslintrc 때와 eslint.config.js일 때와 설정 방법이 많이 바뀌었기 때문에 공식 문서를 참고해 수동으로 설정을 변경해주거나 eslint에서 제공하는 migration 방법을 사용하면 된다. 공식 문서에 따르면 .eslintrc, .eslintrc.json, .eslintrc.yml은 다음 명령으로 eslint.config.js로 migration 할 수 있다.

npx @eslint/migrate-config .eslintrc.json

 

🚨 단, 아직 .eslintrc.js 파일에 대해서는 마이그레이션이 제대로 작동하지 않을 수 있다. 함수, 조건문 같은 동적인 로직은 아직 제대로 변환되지 않기 때문이다.

참고

https://eslint.org/blog/2022/08/new-config-system-part-2/

https://eslint.org/docs/latest/use/configure/configuration-files

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