使用此代码:
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-dev
或yarn 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'
是parserOptions
param内。
'parserOptions': {
'parser': 'babel-eslint',
'ecmaVersion': 2018,
'sourceType': 'module'
}
文章标签:eslint , javascript , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!