javascript - ESLint 解析错误 : Unexpected token

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

........有什么问题？

Answer 1

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

将“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-dev 或 yarn add -D @babel/eslint-解析器。

请注意，由于 React ^16.3 开始的新 Context API 有一些重要的变化，请参阅 official guide .