Eslint 用于同一项目中的 express 和 react 项目

Question

我有一个包含 API (expess.js) 和客户端 (Reactjs) 的项目。

Project/
├─ client/           // All my reactjs files
├─ src/              // All my express.js files
├─ .eslintrc.json

我正在尝试配置 eslint，对于 express.js 部分我没有任何问题。但是对于反应部分我有以下错误：

/home/dev/project/client/index.js
  5:17  error  Parsing error: Unexpected token <

这是我的 eslint 配置

{

    "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" ],
        "parser": "@babel/eslint-parser",
        "parserOptions": {
          "requireConfigFile": false,
          "ecmaFeatures": {
            "jsx": true
          }
        },
        "extends": [
          "eslint:recommended",
          "plugin:react/recommended"
        ],
        "plugins": [
          "react"
        ]
      }
    ],

但是还是报错

/home/dev/project/client/index.js
  5:16  error  Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (5:16)

如何在同一个项目中将 eslint 与 express.js 后端和 reactjs 前端一起使用？

Answer 1

我终于找到了解决方案，在我使用的覆盖行中，我通过 jsx 更改了反应插件。

为此我需要安装一个新包

npm install eslint-plugin-jsx@latest --save-dev

这是覆盖部分：

"overrides": [
  {
    "files": [ "client/**/*.js" ],
    "parser": "@babel/eslint-parser",
    "parserOptions": {
      "requireConfigFile": false,
      "ecmaFeatures": {
        "jsx": true
      },
      "babelOptions": {
        "presets": ["@babel/preset-react"]
     }
    },
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended"
    ],
    "plugins": [
      "jsx"
    ]
  }
],

这是完整的。eslintrc.json

{

    "env": {
      "node": true,
      "es6": true
    },
    "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module"
    },
    "overrides": [
      {
        "files": [ "client/**/*.js" ],
        "parser": "@babel/eslint-parser",
        "parserOptions": {
          "requireConfigFile": false,
          "ecmaFeatures": {
            "jsx": true
          },
          "babelOptions": {
            "presets": ["@babel/preset-react"]
         }
        },
        "extends": [
          "eslint:recommended",
          "plugin:react/recommended"
        ],
        "plugins": [
          "jsx"
        ]
      }
    ],
  
    "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"]
    }
  
  }

我在这个 article

上找到了解决方案

Eslint 用于同一项目中的 express 和 react 项目

Eslint for a express and react project in the same project

reactjs

express

eslint

eslintrc