CRA项目中VS Code的ESLint无法校验backend目录服务端文件如何解决

首先明确：你的问题不是CRA内置配置覆盖了自定义ESLint配置，核心是目录结构和ESLint工作区匹配的问题，具体原因和解决方案如下： #

核心原因 #

1. CRA 内置的ESLint校验逻辑默认仅作用于frontend/src目录下的React相关文件，不会自动覆盖同级的backend目录
2. VS Code的ESLint插件默认以当前打开的根目录为单一工作区加载配置，你这种前后端分两个子目录的monorepo结构，没有手动指定工作目录的话，backend的配置不会被识别

解决步骤 #

• 方案一：分别为前后端配置独立ESLint规则
  1. 保持frontend目录下原有的CRA ESLint配置不变，在backend目录下新增独立的.eslintrc.js和.eslintignore，按照Node服务端的规则配置即可，同时确保backend目录下已经安装了对应的ESLint依赖包
  2. 打开VS Code的settings.json，新增ESLint工作目录配置：

{
  "eslint.workingDirectories": [
    "./frontend",
    "./backend"
  ]
}

• 方案二：根目录统一配置全局ESLint规则
  如果你想要在项目根目录维护一套配置同时覆盖前后端，在根目录的.eslintrc.js中使用overrides字段分别定义不同目录的校验规则即可，示例如下：

module.exports = {
  root: true,
  overrides: [
    // 前端React文件校验规则
    {
      files: ["frontend/**/*.{js,jsx,ts,tsx}"],
      extends: ["react-app"],
      rules: {
        // 自定义前端规则
      }
    },
    // 后端Node文件校验规则
    {
      files: ["backend/**/*.js"],
      env: {
        node: true,
        es2021: true
      },
      extends: ["eslint:recommended"],
      rules: {
        // 自定义后端规则
      }
    }
  ]
}

• 最后重启ESLint服务生效：按Ctrl+Shift+P（Mac系统按Cmd+Shift+P）调出命令面板，输入ESLint: Restart ESLint Server执行即可，重新打开backend下的文件就能看到语法校验提示。

内容的提问来源于stack exchange，提问作者Cheetara