如何为同时包含Express后端和React前端的同项目配置Eslint？

1 安装缺失依赖 #

先安装JSX语法解析所需的依赖包：

npm install @babel/eslint-parser @babel/preset-react eslint-plugin-react --save-dev

2 调整ESLint配置 #

你之前添加的overrides配置缺少JSX解析的显式声明，调整后的完整配置如下：

{
  "env": {
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
    "block-scoped-var":             ["error"],
    "callback-return":              ["error", ["done", "proceed", "next", "onwards", "callback", "cb"]],
    "comma-style":                  ["warn", "last"],
    "curly":                        ["warn"],
    "eqeqeq":                       ["error", "always"],
    "eol-last":                     ["warn"],
    "handle-callback-err":          ["error"],
    "indent":                       ["warn", 2, {
      "SwitchCase": 1,
      "MemberExpression": "off",
      "FunctionDeclaration": {"body":1, "parameters":"off"},
      "FunctionExpression": {"body":1, "parameters":"off"},
      "CallExpression": {"arguments":"off"},
      "ArrayExpression": 1,
      "ObjectExpression": 1,
      "ignoredNodes": ["ConditionalExpression"]
    }],
    "linebreak-style":              ["error", "unix"],
    "no-dupe-keys":                 ["error"],
    "no-duplicate-case":            ["error"],
    "no-extra-semi":                ["warn"],
    "no-labels":                    ["error"],
    "no-mixed-spaces-and-tabs":     [2, "smart-tabs"],
    "no-redeclare":                 ["warn"],
    "no-return-assign":             ["error", "always"],
    "no-sequences":                 ["error"],
    "no-trailing-spaces":           ["warn"],
    "no-undef":                     ["off"],
    "no-unexpected-multiline":      ["warn"],
    "no-unreachable":               ["warn"],
    "no-unused-vars":               ["warn", {"caughtErrors":"all", "caughtErrorsIgnorePattern": "^unused($|[A-Z].*$)", "argsIgnorePattern": "^unused($|[A-Z].*$)", "varsIgnorePattern": "^unused($|[A-Z].*$)" }],
    "no-use-before-define":         ["error", {"functions":false}],
    "one-var":                      ["warn", "never"],
    "prefer-arrow-callback":        ["warn", {"allowNamedFunctions":true}],
    "quotes":                       ["warn", "single", {"avoidEscape":false, "allowTemplateLiterals":true}],
    "semi":                         ["warn", "always"],
    "semi-spacing":                 ["warn", {"before":false, "after":true}],
    "semi-style":                   ["warn", "last"]
  },
  "overrides": [
    {
      "files": [ "client/**/*.js", "client/**/*.jsx" ],
      "parser": "@babel/eslint-parser",
      "parserOptions": {
        "requireConfigFile": false,
        "ecmaFeatures": {
          "jsx": true
        },
        "babelOptions": {
          "presets": ["@babel/preset-react"]
        }
      },
      "env": {
        "browser": true,
        "es2021": true
      },
      "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
      ],
      "plugins": [
        "react"
      ],
      "settings": {
        "react": {
          "version": "detect"
        }
      }
    }
  ]
}

3 验证配置 #

分别校验前后端代码确认配置生效：

# 校验Express后端代码
npx eslint src/**/*.js
# 校验React前端代码
npx eslint client/**/*.js client/**/*.jsx

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