ESLint 解析错误：意外的令牌

Question

使用此代码：

import React from 'react';
import { Link } from 'react-router';
import { View, NavBar } from 'amazeui-touch';

import * as Pages from '../components';

const {  Home, ...Components } = Pages;

我得到这个 eslint 错误：

7:16  error  Parsing error: Unexpected token .. Why?

这是我的 eslint 配置：

{
  "extends": "airbnb",
  "rules": {
    /* JSX */
    "react/prop-types": [1, {
      "ignore": ["className", "children", "location", "params", "location*"]
    }],
    "no-param-reassign": [0, {
      "props": false
    }],
    "prefer-rest-params": 1,
    "arrow-body-style": 0,
    "prefer-template": 0,
    "react/prefer-stateless-function": 1,
    "react/jsx-no-bind": [0, {
      "ignoreRefs": false,
      "allowArrowFunctions": false,
      "allowBind": true
    }],
  }
}

.... .... 有什么问题？

Answer 1

由于您的开发环境与 ESLint 当前的解析能力与 JavaScript ES6~7 的持续变化不兼容，导致 ESLint 解析中出现意外的令牌错误。

将“parserOptions”属性添加到您的 .eslintrc 已不再适用于特定情况，例如使用

static contextTypes = { ... } /* react */

在 ES6 类中，因为 ESLint 目前无法自行解析它。 这种特殊情况会引发以下错误：

error Parsing error: Unexpected token =

解决方案是让 ESLint 由兼容的解析器解析，即 @babel/eslint-parser 或 babel-eslint 用于 v7 以下的 babel 版本。

只需添加：

"parser": "@babel/eslint-parser"

到您的.eslintrc文件并运行npm install @babel/eslint-parser --save-dev或yarn add -D @babel/eslint-parser 。

请注意，由于从React ^16.3开始的新 Context API有一些重要的变化，请参考官方指南。

Answer 2

ESLint 2.x 实验性地支持 ObjectRestSpread 语法，您可以通过将以下内容添加到您的.eslintrc来启用它： docs

"parserOptions": {
  "ecmaVersion": 6,
  "ecmaFeatures": {
    "experimentalObjectRestSpread": true
  }
},

ESLint 1.x 本身不支持扩展运算符，解决此问题的一种方法是使用babel-eslint 解析器。 最新的安装和使用说明在项目自述文件中。

Answer 3

"parser": "babel-eslint"帮我解决了这个问题

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "modules": true,
            "experimentalObjectRestSpread": true
        }
    },
    "plugins": [
        "react"
    ],
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "rules": {
        "comma-dangle": 0,
        "react/jsx-uses-vars": 1,
        "react/display-name": 1,
        "no-unused-vars": "warn",
        "no-console": 1,
        "no-unexpected-multiline": "warn"
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "15.6.1"
        }
    }
}

参考

Answer 4

在我的情况下（我使用 Firebase Cloud Functions）我打开.eslintrc.json并更改：

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2017
},

至：

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2020
},

Answer 5

我通过首先使用 npm 安装 babel-eslint 解决了这个问题

npm install babel-eslint --save-dev

其次，将此配置添加到 .eslintrc 文件中

{
   "parser":"babel-eslint"
}

Answer 6

最初，解决方案是提供以下配置，因为对象解构曾经是一项实验性功能，默认情况下不支持：

{
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  }
}

从版本 5 开始，此选项已被弃用。

现在只需声明一个足够新的 ES 版本就足够了：

{
  "parserOptions": {
    "ecmaVersion": 2018
  }
}

Answer 7

我将eslint用于云功能（开发环境：flutter 2.2.3）。

在我的情况下.eslintrc.json不存在，所以我必须通过在文件末尾包含parserOptions: { "ecmaVersion": 2020, },属性来更新.eslintrc.js文件。 我更新.eslintrc.js文件如下所示：

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "google",
  ],
  rules: {
    quotes: ["error", "double"],
  },
  
  // Newly added property
  parserOptions: {
    "ecmaVersion": 2020,
  },
};

Answer 8

仅作记录，如果您使用的是eslint-plugin-vue ，则添加'parser': 'babel-eslint'的正确位置在parserOptions参数内。

  'parserOptions': {
    'parser': 'babel-eslint',
    'ecmaVersion': 2018,
    'sourceType': 'module'
  }

https://eslint.vuejs.org/user-guide/#faq

Answer 9

我通过在.eslintrc.json文件中设置这个解决了这个问题：

"extends": [
    ...,
    "plugin:prettier/recommended"
]

Answer 10

在 2021 年 2 月，您可以使用这些值

ecmaVersion - 设置为 3、5（默认）、6、7、8、9、10、11 或 12 以指定您要使用的 ECMAScript 语法的版本。 也可以设置为2015（同6）、2016（同7）、2017（同8）、2018（同9）、2019（同10）、2020（同11）或2021（同 12) 使用基于年份的命名。

https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options

Answer 11

对于React + Firebase 函数

转到：函数-> .eslintrc.js

添加它 - parserOptions: { ecmaVersion: 8, },

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 8,
  },
  extends: ["eslint:recommended", "google"],
  rules: {
    quotes: ["error", "double"],
  },
};

Answer 12

如果你有 husky 运行eslint的 pre-commit 任务，请继续阅读。 我尝试了大多数关于parserOptions和parser值的答案，而我的实际问题是关于我正在使用的节点版本。

我当前的节点版本是 12.0.0，但是 husky 以某种方式使用了我的 nvm 默认版本（即使我的系统中没有nvm ）。 这似乎是哈士奇本身的问题。 所以：

1. 我删除了之前删除nvm时没有删除的$HOME/.nvm文件夹。
2. 已验证节点是最新的并且做了正确的解析器选项。
3. 它开始工作了！

Answer 13

尽管实施了上述所有解决方案，我仍然面临着这个问题。 当我降级 eslint 版本时，它开始工作

Answer 14

我正在使用打字稿，我解决了这个错误更改parser

....
"prettier/prettier": [
            "error",
            {
                .....
                "parser": "typescript",
                .....
            }
        ],
....

Answer 15

.
.
{
    "parserOptions": {
    "ecmaVersion": 2020
},
.
.

会成功的。

Answer 16

我必须将ecmaVersion更新为"latest"

"parserOptions": {
    "parser": "@babel/eslint-parser",
    "sourceType": "module",
    "ecmaVersion": "latest",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    },
    "requireConfigFile": false
  },