web-dev-qa-db-ja.com

ESLint解析エラー：予期しないトークン

このコードでは：

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

.... .... どうしたの？

javascriptreactjseslint
87
DongYao

ESLintの構文解析で予期しないトークンエラーが発生するのは、開発環境と、ESLintの現在の構文解析機能と、JavaScript ES6〜7で進行中の変更との間に互換性がないためです。

.eslintrcに "parserOptions"プロパティを追加するだけでは、次のような特定の状況では不十分です。

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

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にはいくつかの重要な変更があるので、 公式ガイド を参照してください。

136
JaysQubeXon

ESLint 2.xはObjectRestSpread構文を実験的にサポートしています、あなたの.eslintrcに以下を追加することでそれを有効にすることができます。 docs

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

ESLint 1.xは本来、スプレッド演算子をサポートしていません。これを回避する1つの方法は、 babel-eslint parser を使用することです。最新のインストールと使用方法はプロジェクトのreadmeにあります。

45
Kevan Ahlquist

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

参考

26
user8202629

私は最初にこの問題を解決しました、npmを使ってbabel-eslintをインストールします

npm install babel-eslint --save-dev

次に、この設定を.eslintrcファイルに追加します。

{
   "parser":"babel-eslint"
}
1
Joee