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

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

ESLintの解析で予期しないトークンエラーが発生するのは、開発環境とESLintの現在の解析機能がJavaScript ES6〜7で継続的に変更されているため、互換性がないためです。

.eslintrcに "parserOptions"プロパティを追加するだけでは、特定の状況では十分ではありません。

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

ESLintは現在、それ自体では解析できないため、ES6クラスでは。この特定の状況では、次のエラーがスローされます。

error Parsing error: Unexpected token =

解決策は、互換性のあるパーサーによってESLintを解析させることです。babel-eslintは、このページを読んだ後、私を最近救ってくれたパッケージです。後で来る人のための代替ソリューションとしてこれを追加することにしました。

追加するだけです：

"parser": "babel-eslint"

.eslintrcファイルに移動して、npm install babel-eslint --save-devまたはを実行しますyarn add -D babel-eslint。

ので、予めご了承ください新しいコンテキストAPIから始まるがReact ^16.3、いくつかの重要な変更があり、参照してください公式ガイド。

ESLint 2.xは実験的にObjectRestSpread構文をサポートします.eslintrc。次のものをに追加することで有効にできます：docs

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

ESLint 1.xは、spreadオペレーターをネイティブでサポートしていません。これを回避する1つの方法は、babel-eslintパーサーを使用することです。最新のインストールと使用方法の説明は、プロジェクトのreadmeにあります。

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

Huskyを実行した状態でプリコミットタスクを取得している場合は、eslint読み続けてください。私の実際の問題が私が使用していたノードのバージョンに関するものであるという答えparserOptionsとparser値のほとんどを試しました。

私の現在のノードのバージョンは12.0.0でしたが、ハスキーはどういうわけかnvmのデフォルトバージョンを使用していました（nvmシステムにない場合でも）。これはハスキー自体の問題のようです。そう：

1. 私は削除された$HOME/.nvmフォルダ、私は削除するとき削除されませんでしたnvmそれ以前に。
2. 検証済みノードは最新であり、適切なパーサーオプションを実行しました。
3. 動き始めました！

参考までに、eslint-plugin-vueを使用している場合、追加する正しい場所'parser': 'babel-eslint'はparserOptionsparam 内です。

  'parserOptions': {
    'parser': 'babel-eslint',
    'ecmaVersion': 2018,
    'sourceType': 'module'
  }

https://eslint.vuejs.org/user-guide/#faq