ESLint解析错误:意外的令牌

2020/10/21 21:02 · javascript ·  · 0评论

使用此代码:

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

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

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

我收到此错误提示:

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

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

ESLint解析中出现意外的令牌错误是由于开发环境与ESLint当前的解析功能之间的不兼容以及JavaScript 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-devyarn add -D babel-eslint

请注意,由于新的Context API从开始React ^16.3就进行了一些重要更改,请参考官方指南

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

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

ESLint 1.x本机不支持散布运算符,一种解决方法是使用babel-eslint解析器最新的安装和使用说明位于项目自述文件中。

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

参考

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

npm install babel-eslint --save-dev

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

{
   "parser":"babel-eslint"
}

以我为例(即使用Firebase Cloud Functions),我打开.eslintrc.json并更改了:

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

至:

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

最初,解决方案是提供以下配置作为对象分解,这曾经是实验性功能,默认情况下不受支持:

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

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

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

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

仅作记录,如果您使用eslint-plugin-vue,则正确的添加位置'parser': 'babel-eslint'parserOptionsparam内。

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

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

如果您在沙哑运行中遇到了预提交任务eslint,请继续阅读。我尝试了有关parserOptions和的大多数答案parser值,而我的实际问题是关于所使用的节点版本的。

我当前的节点版本是12.0.0,但是赫斯基以某种方式使用了我的nvm默认版本(即使nvm我的系统中没有)。沙哑本身似乎是一个问题所以:

  1. 删除了$HOME/.nvm删除时未删除的文件夹nvm较早
  2. 经过验证的节点是最新的,并且具有正确的解析器选项。
  3. 它开始工作了!
本文地址:http://javascript.askforanswer.com/eslintjiexicuowuyiwaidelingpai.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!