[error] vscode에서 eslint가 안돼요 (next 15)

김병훈·2024년 11월 24일

문제

내용

vscode(또는 cursor)에서 lint가 제대로 되지 않는다.
- ex) useEffect에 전달하는 deps에 값을 제대로 전달하지 않았을 때
- ex) 전달받은 매개변수를 사용하지 않았을 때

새로운 프로젝트를 진행하는데, lint 설정은 이전 프로젝트와 그대로지만 에디터에서 lint 경고나 에러를 제대로 나타내지 못했다.

환경

package.json

"next": "15.0.1",
"eslint": "^9.14.0",

.eslintrc.json

{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

해결

디버그 (debug)

eslint debugger를 통해 설정에 어떤 문제가 있는지 파악할 수 있다.
https://eslint.org/docs/latest/use/configure/debug

$ npx eslint --debug

Oops! Something went wrong! :(

ESLint: 9.14.0

ESLint couldn't find an eslint.config.(js|mjs|cjs) file.

From ESLint v9.0.0, the default configuration file is now eslint.config.js.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:

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

If you still have problems after following the migration guide, please stop by
https://eslint.org/chat/help to chat with the team.

eslint 버전이 9로 업데이트됨에 따라, eslint의 설정을 관리하는 파일의 형태가 변경되었고 기존에 사용하고 있던 형태인 .eslintrc.*는 새로운 파일 형태로 변경해주어야 한다는 것.

마이그레이션 (migration)

.eslintrc.json

{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

eslint.config.mjs

import path from "node:path";
import { fileURLToPath } from "node:url";
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all
});

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

export default config;