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

……

……

有什么问题？

原文由 DongYao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

对于特定情况，例如使用

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

在 ES6 类中，因为 ESLint 目前无法自行解析它。这种特殊情况将引发以下错误：

 error Parsing error: Unexpected token =

解决方案是让 ESLint 由兼容的解析器解析，即 @babel/eslint-parser 或 babel-eslint for v7 以下的 babel 版本。

只需添加：

 "parser": "@babel/eslint-parser"

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

请注意，由于从 React ^16.3 开始的 新 Context API 有一些重要的变化，请参考 官方指南。

原文由 hanorine 发布，翻译遵循 CC BY-SA 4.0 许可协议