eslintrc 파일의 deprecated

프로젝트를 하면서 eslint를 안쓰는 곳이 있을까..?.. 

eslint 덕분에 문법 오류도 해결할 수 있고, 팀원들이랑 동일한 린트 환경에서 개발도 가능하다..!

그래서 꼭 쓰게 되는 eslint 인데, 혹시 본인의 프로젝트 eslint 설정 파일이 `eslintrc` 형식으로 되어있진 않으신가요? 

이게 deprecated 되었답니다.. 

Configuration Files (Deprecated) - ESLint - Pluggable JavaScript Linter

 

eslint 설정 파일 이름은 이제 이렇게 사용

 

• eslint.config.js
• eslint.config.mjs
• eslint.config.cjs

 

기존에 사용하던 방식이랑 조금 달라져서 처음에 파일을 보면 오잉(?) 하게 된다.

최근에 create-next-app 을 통해 자동으로 생성된 eslint 파일은 `eslint.config.mjs` 라는 형식의 파일이다.

 

Configuration Files - ESLint - Pluggable JavaScript Linter

 

이렇게만 보면 기존에 있는 eslintrc 파일과 큰 차이가 생기는 것은 아닐 것 같다.

// ESM 환경의 eslint.config.js
export default [
    {
        rules: {
            semi: "error"
        }
    }
];


// commonJS 환경의 eslint.config.js
module.exports = [
    {
        rules: {
            semi: "error",
            "prefer-const": "error"
        }
    }
];

 

 

위에서는 별반 다르지 않겠구나하고 넘어오는데, 달라진 점들이 조금 생겼다.

 

Eslint v9 - flat config 방식

eslint v9에서 사용하는 방식을 flat config 방식이라고 한다 !

 

1 ) plugins 설정 방법

 

eslint-plugin-unused-imports,  @typscript-eslint/eslint-plugin, @typescript-eslint/parser 등을 설치해서 plugin 에 다음과 같이 설정해주어서 사용해주었는데

{
// ...중략
	"plugins": ["unused-imports", "@typescript-eslint"],
}

 

기존 eslint 에서 plugin, extends 등을 string 형태로 사용하고 있었는데, import 해주어서 Object 에 넣어주는 형태로 변경되었다. 

실수를 훨씬 덜어낼 수 있지 않을까...

import unusedImports from "eslint-plugin-unused-imports";

export default [
    {
        plugins: {
            'unused-imports': unusedImports
        },
    }
];

 

2 ) extends 필드 삭제

extends 필드가 삭제되었으면 어떻게 써야할까 😓.. 그건 아래에 작성해두었다. 

 

Next.js eslint.config.mjs 파일 뜯어보기

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
];

export default eslintConfig;

 

 

그래서 FlatCompat 이 뭔데..

Configuration Migration Guide - ESLint - Pluggable JavaScript Linter

 

eslint는 v9으로 올리면서 flat config 를 도입했지만, 우리가 eslint 에서 많이 설정하는 eslint-airbnb 나  next/core-web-vitals 등은 아직 flat config 방식으로 마이그레이션이 되지 않았을 수 있다. 그래서 호환성 유지를 위해서 flat config 형태로 만들어주는 역할을 한다고 한다.

(eslint의 extends_rules가 자동으로 생성되는_에 한해 사용되는 내용이고, plugins _rules를 따로 설정해주어야 하는_는 어차피 상관 없는 얘기긴 하다.) 

 

plugins 는 아무 설정이 필요 없을까? 

 

가끔 .. plugin 도 rules을 설정해주는데 해당 rules이 인지가 안되는 현상이 있다.. 😓

 위에서 사용했던 unused-imports 도 그래서 다음과 같이 사용했는데요.

 

    plugins: {
      'unused-imports': fixupPluginRules(unusedImports),
    },

 

그럴 땐 `@eslint/compat` 을 사용해서 한 번 맵핑해주면 된다. 이렇게 사용해주면 기존에 사용하던 rules 들이 flat config 환경에서도 잘 적용될 수 있게 도와준다.

 

이제 저런거 안써도 된다고 2024년 3월에 업데이트 되긴 했네용

Support Flat Config · Issue #74 · sweepline/eslint-plugin-unused-imports