코드

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true,
  "eslint.enable": true,
  "eslint.useFlatConfig": true,
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "html", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.workingDirectories": [{ "mode": "auto" }]
}

오류 메시지 혹은 문제 상황

eslint 규칙을 어겨도 vscode editor에 빨간 줄이 뜨지 않는다.

원인

eslint는 current working directory에 있는 eslint.config.js > eslint.config.mjs >eslint.config.cjs 순으로 파일을 우선 찾고 없다면 루트 디렉토리를 만날 때까지 부모 디렉토리로 올라가서 파일을 찾게 된다.

현재 프로젝트의 폴더 구조는 아래와 같다.

project/
├── apps/ # 애플리케이션을 모아두는 폴더
│   ├── client/ # 프론트엔드
│   └── server/ # 백엔드
├── packages/ # 공유 패키지
│   ├── eslint/ # eslint 설정
│   └── tsconfig/ # typescript 설정
├── .prettierrc # prettier는 전역으로 설정
└── package.json 

현재는 eslint.config.js 파일이 project 루트에 위치한 것이 아니라 apps/client/ 밑에 있어서 VS Code의 ESLint 플러그인이 eslint.config.js 파일을 자동으로 찾지 못해 ESLint 규칙 위반에 대한 경고나 에러 표시가 나타나지 않았던 것이다.

해결 방법

디렉토리별로 사용하는 eslint.config.js 파일을 지정해줬다.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true,
  "eslint.enable": true,
  "eslint.useFlatConfig": true,
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "html", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.workingDirectories": [
    {
      "directory": "apps/client",
      "!cwd": true,
      "changeProcessCWD": true,
      "configFile": "eslint.config.js"
    },
    {
      "directory": "apps/server",
      "!cwd": true,
      "changeProcessCWD": true,
      "configFile": "eslint.config.js"
    }
  ]
}

참고

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

https://rat2.tistory.com/40