用这个代码:
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
}],
}
}
.... .... 问题出在哪里?
ESLint解析中出现的意外标记错误是由于你的开发环境和ESLint当前的解析能力与JavaScripts ES6~7的持续变化不兼容。
在你的.eslintrc中添加"parserOptions"属性已不足以应对特殊情况,例如使用
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
。
请注意,由于从React ^16.3
开始的新Context API有一些重要的变化,请参考官方指南。
ESLint 2.x实验性地支持ObjectRestSpread语法,你可以通过在你的.eslintrc
中添加以下内容来启用它:docs
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
},
ESLint 1.x不支持spread操作,一种方法是使用babel-eslint分析器来解决这个问题。最新的安装和使用说明在项目的readme上。
"解析器": "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"
}
}
}