ESLint 解析错误:意外的令牌

IT技术 javascript reactjs eslint
2021-02-10 12:22:25

使用此代码:

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
    }],
  }
}

.... .... 有什么问题?

6个回答

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

将“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-devyarn add -D @babel/eslint-parser

请注意,作为新的上下文API从开始React ^16.3有一些重要的变化,请参考官方指南

babel-eslint 已过时,请使用 @babel/eslint-parser
2021-03-15 12:22:25
yarn add -D babel-eslint 对于那些使用 Yarn 的人。
2021-03-18 12:22:25
注意 * 如果您已经“弹出”了您的 create-react-app 并且您正在将 eslint-ing 添加到您的 IDE,则 babel-eslint 已经被应用。只需添加解析器即可。
2021-04-05 12:22:25
对于那些不知道在哪里添加"parser": "babel-eslint"config 语句的人,它在.eslintrc.json. 就我而言,它是一个 JSON 文件,但基本上是您的 .eslintrc 文件
2021-04-09 12:22:25
我发现这篇文章也很有帮助:grantnorwood.com/...
2021-04-11 12:22:25

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

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

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

ecmaVersion: 2018 使用 ESLint 5 在没有警告的情况下工作
2021-03-19 12:22:25
这不是真的。ESLint 的默认解析器 Espree 确实支持传播,甚至对象静止传播(这是 espree 支持的唯一实验性功能)。有关更多信息,请参阅:eslint.org/docs/user-guide/...
2021-03-26 12:22:25
我没有发现这个解决方案有问题 - 它对我来说很好用。这比还必须安装新软件包要好!
2021-03-30 12:22:25
你是对的,我原来的答案只适用于 ESLint 1.x,我用 2.x 的信息更新了它
2021-03-31 12:22:25
ecmaFeatures已被弃用。利用ecmaVersion
2021-04-04 12:22:25

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

参考

实际上确实如此 - 您会得到一个示例配置(包括 parserOptions)
2021-03-18 12:22:25
这个答案不会为@JaysQubeXon 的答案添加任何内容。
2021-03-20 12:22:25
很高兴拥有完整的示例++。它帮助我修复了 TamperMonkey JS 提示错误。
2021-03-24 12:22:25
@brasofilo 你在哪里更改篡改猴子中的 eslint?
2021-04-04 12:22:25
@Metin,去 Dashboard > Settings > Editor > Custom Linter Config
2021-04-04 12:22:25

就我而言(我使用 Firebase Cloud Functions),我打开.eslintrc.json并更改了:

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

到:

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2020
},
而不是更改ecmaVersion: 2017ecmaVersion: 2020我只是在文件package.json 中更改"scripts": { "lint": "eslint ." }"scripts": { "lint": "eslint" }
2021-03-14 12:22:25
更改ecmaVersion: 2017ecmaVersion: 2020返回错误:error Parsing error: Invalid ecmaVersion除了改成2020,我还能做什么?
2021-03-22 12:22:25
当收到在 React 应用程序中使用的错误时,更改emcaVersion2020对我var?.prop有用。感谢您的发表。
2021-03-26 12:22:25

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

npm install babel-eslint --save-dev

其次,在.eslintrc文件中添加这个配置

{
   "parser":"babel-eslint"
}
👍 但是babel-eslint不再支持。使用它的后继者@babel/eslint-parsernpm i -D @babel/core @babel/eslint-parser然后{"parser: "@babel/eslint-parser"}
2021-03-18 12:22:25