ESLint V9 에러가 IDE에 표시되지 않는 경우

TLDR

Eslint v9의 경우 현재진행중인 이슈로 인해 vs code에서 nextjs eslint가 표시되지 않는데, biome으로 대체함.

1. ESLint가 IDE에서 작동하지 않는다?

eslint는 지금까지 vs code 및 cursor로 개발하는데 정말 도움이 되는 플러그인이었지만, 최근 새로운 프로젝트를 시작하면서 몇 가지 차이점이 생겼다.

1-1. eslint가 v9로 업데이트되었다.

• eslint v9 작년 eslint가 v9로 업데이트 되면서, 기존 .eslintrc 파일이 deprecated되고 eslint.config.js의 형태로 변경되었다.
• 플러그인을 불러오는 방법도

{
    "root": true,
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": { "project": ["./tsconfig.json"] },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "@typescript-eslint/strict-boolean-expressions": [
            2,
            {
                "allowString" : false,
                "allowNumber" : false
            }
        ]
    },
    "ignorePatterns": ["src/**/*.test.ts", "src/frontend/generated/*"]
}

기존의 array를 사용한 방법에서

import { FlatCompat } from '@eslint/eslintrc'
 
const compat = new FlatCompat({
  // import.meta.dirname is available after Node.js v20.11.0
  baseDirectory: import.meta.dirname,
})
 
const eslintConfig = [
  ...compat.config({
    extends: ['next'],
    settings: {
      next: {
        rootDir: 'packages/my-app/',
      },
    },
  }),
]
 
export default eslintConfig

flatConfig 방식으로 spread operator를 사용하는 것으로 변경되었다.

2. IDE에서 lint error가 작동하지 않음.

여기서 문제는, 이전에는 잘 작동하던 nextjs 프로젝트의 린트가 9로 업데이트하니 적용되지 않는다는 점이다.

찾을 수 있는 가장 최근의 레퍼런스는 official issue 으로 2025년 5월 기준

해당 문제는 진행중인 것으로 보인다. 여기서는 package manager로 yarn berry을 사용했다.

여기서는 synckit이라는 디펜던시의 버그로 생기는 문제라고 하지만, 지금 나는 pnpm을 사용하고 있으므로 저렇게 패치를 진행해도 문제가 해결되지 않을거라고 생각하기 때문에, biome을 사용해 일단 문제를 해결할 수 있었다.

ps1)pnpm issuepnpm 을 사용하는 경우도 확인할 수 있었고 거기 제시된 해결책을 사용해보았지만, 이 프로젝트에서는 적용되지 않았다

ps2) Eslint Debugger를 사용해 문제를 확인할 수 있다고도 한다. 지금까지 그걸 사용해 본 적은 없지만... 현재로써는 가장 손쉬운 Biome을 사용하거나 eslint 버전을 8로 내리는 것이 개발 시간 단축에 도움이 되지 않을까 한다.