如何在 ESLint 中支持 ES7

Question

我有一个使用 WebPack 的项目设置以使用 ESLint，我想将 ES7 用于内联绑定运算符 ::。目前我收到如下所示的解析错误

/Users/ryanvice/Documents/Code/pluralsight-redux-starter/src/components/project/ProjectsPage.js (1/0)
  ✖  7:27  Parsing error: Unexpected token :

/Users/ryanvice/Documents/Code/pluralsight-redux-starter/src/routes.js (2/2)
  ✖  6:26  Parse errors in imported module './components/project/ProjectsPage': Unexpected token : (7:27)  import/namespace
  ✖  6:26  Parse errors in imported module './components/project/ProjectsPage': Unexpected token : (7:27)  import/default
  !  6:26  Parse errors in imported module './components/project/ProjectsPage': Unexpected token : (7:27)  import/no-named-as-default
  !  6:26  Parse errors in imported module './components/project/ProjectsPage': Unexpected token : (7:27)  import/no-named-as-default-member

✖ 3 errors ! 2 warnings (4:45:40 PM)

使用以下 .eslintrc 配置，其中包括 "ecmaVersion": 7

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": true,
    "mocha": true
  },
  "rules": {
    "quotes": 0,
    "no-console": 1,
    "no-debugger": 1,
    "no-var": 1,
    "semi": [1, "always"],
    "no-trailing-spaces": 0,
    "eol-last": 0,
    "no-unused-vars": 0,
    "no-underscore-dangle": 0,
    "no-alert": 0,
    "no-lone-blocks": 0,
    "jsx-quotes": 1,
    "react/display-name": [ 1, {"ignoreTranspilerName": false }],
    "react/forbid-prop-types": [1, {"forbid": ["any"]}],
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 0,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": 0,
    "react/jsx-key": 1,
    "react/jsx-max-props-per-line": 0,
    "react/jsx-no-bind": 1,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 0,
    "react/jsx-no-undef": 1,
    "react/jsx-pascal-case": 1,
    "react/jsx-sort-prop-types": 0,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 0,
    "react/no-unknown-property": 1,
    "react/prefer-es6-class": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1
  }
}

Answer 1

假设您正在使用 Babel，您可能希望使用 babel-eslint 作为 ESLint 解析器 ("parser": "babel-eslint",)。

Answer 2

将此添加到您的 .eslintrc.json：

"parserOptions": {
    "ecmaVersion": 2016
},

来源：https://eslint.org/docs/user-guide/configuring#specifying-parser-options

ecmaVersion - set to 3, 5 (default), 6, 7, 8, 9, or 10 to specify the version of ECMAScript syntax you want to use. You can also set to 2015 (same as 6), 2016 (same as 7), 2017 (same as 8), 2018 (same as 9), or 2019 (same as 10) to use the year-based naming.

如何在 ESLint 中支持 ES7

How to support ES7 in ESLint

eslint

webpack

ecmascript-2016