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解析中出现意外的令牌错误是由于您的开发环境与ESLint当前的解析功能之间的不兼容以及JavaScripts ES6~7的持续更改.

将"parserOptions"属性添加到.eslintrc对于特定情况(例如使用)已不再适用

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

在ES6类中,因为ESLint目前无法自行解析它.这种特殊情况会引发错误:

error Parsing error: Unexpected token =

解决方案是让兼容的解析器解析ESLint.babel-eslint是一个在阅读本页后最近救了我的软件包,我决定将其作为替代方案的替代方案.

只需添加:

"parser": "babel-eslint"

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

请注意,由于新的Context API起始React ^16.3有一些重要的变化,请参阅官方指南.

Answer 2

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

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

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

Answer 3

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

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

到：

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

Answer 4

"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 5

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

就我而言，.eslintrc.json不存在，因此我必须通过在文件末尾.eslintrc.js包含属性来更新文件。parserOptions: { "ecmaVersion": 2020, },我更新的.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 6

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

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

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

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

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

Answer 7

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

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

Answer 8

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

npm install babel-eslint --save-dev

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

{
   "parser":"babel-eslint"
}

Answer 9

只是为了记录，如果你使用eslint-plugin-vue，正确的添加位置'parser': 'babel-eslint'是在parserOptionsparam里面。

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

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

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

就我而言，"parser": "@typescript-eslint/parser",在 .eslintrc 文件中添加行有帮助：

  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": ["tsconfig.json"],
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true,
      "experimentalObjectRestSpread": true
    }
  },

package.json 同时有以下两行：

    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",

Answer 12

对于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"],
  },
};