ESLint-Analysefehler: Unerwartetes Token

Mit diesem Code:

import React from 'react';
import { Link } from 'react-router';
import { View, NavBar } from 'amazeui-touch';

import * as Pages from '../components';

const {  Home, ...Components } = Pages;

Ich bekomme diesen Eslint-Fehler:

7:16  error  Parsing error: Unexpected token .. Why?

Hier ist meine eslint Konfiguration:

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

.... .... Was ist das Problem?

Unerwartete Tokenfehler beim ESLint-Parsing treten aufgrund der Inkompatibilität zwischen Ihrer Entwicklungsumgebung und den aktuellen Parsing-Funktionen von ESLint mit den laufenden Änderungen mit JavaScripts ES6 ~ 7 auf.

Das Hinzufügen der Eigenschaft "parserOptions" zu Ihrer .eslintrc reicht für bestimmte Situationen, z. B. die Verwendung, nicht mehr aus

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

In ES6-Klassen kann ESLint es derzeit nicht selbst analysieren. Diese besondere Situation führt zu einem Fehler von:

error Parsing error: Unexpected token =

Die Lösung besteht darin, ESLint von einem kompatiblen Parser analysieren zu lassen. babel-eslint ist ein Paket, das mich kürzlich nach dem Lesen dieser Seite gerettet hat, und ich habe beschlossen, dies als alternative Lösung für alle hinzuzufügen, die später kommen.

einfach hinzufügen:

"parser": "babel-eslint"

zu Ihrer .eslintrcDatei und führen Sie npm install babel-eslint --save-devoder yarn add -D babel-eslint.

Bitte beachten Sie, dass die neue Kontext-API ab React ^16.3einige wichtige Änderungen enthält. Weitere Informationen finden Sie im offiziellen Handbuch .

ESLint 2.x unterstützt experimentell die ObjectRestSpread-Syntax. Sie können sie aktivieren, indem Sie Folgendes zu Ihren Dokumenten hinzufügen .eslintrc: docs

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

ESLint 1.x unterstützt den Spread-Operator nicht nativ. Eine Möglichkeit, dies zu umgehen, ist die Verwendung des Babel-Eslint-Parsers . Die neuesten Installations- und Verwendungsanweisungen finden Sie in der Projekt-Readme-Datei.

"parser": "babel-eslint" hat mir geholfen, das Problem zu beheben

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

Referenz

Ich habe dieses Problem gelöst, indem ich zuerst babel-eslint mit npm installiert habe

npm install babel-eslint --save-dev

Zweitens fügen Sie diese Konfiguration in die .eslintrc-Datei ein

{
   "parser":"babel-eslint"
}

In meinem Fall (ich verwende Firebase Cloud-Funktionen) habe ich geöffnet .eslintrc.jsonund geändert:

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2017
},

zu:

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2018
},

Ursprünglich bestand die Lösung darin, die folgende Konfiguration bereitzustellen, da die Objektzerstörung eine experimentelle Funktion war und standardmäßig nicht unterstützt wurde:

{
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  }
}

Seit Version 5 ist diese Option veraltet .

Jetzt reicht es aus, nur eine Version von ES zu deklarieren, die neu genug ist:

{
  "parserOptions": {
    "ecmaVersion": 2018
  }
}

Wenn Sie eine Pre-Commit-Aufgabe mit Husky haben eslint, lesen Sie bitte weiter. Ich habe die meisten Antworten parserOptionsund parserWerte ausprobiert , bei denen mein eigentliches Problem die von mir verwendete Knotenversion war.

Meine aktuelle Knotenversion war 12.0.0, aber Husky verwendete irgendwie meine NVM-Standardversion (obwohl ich sie nicht nvmin meinem System hatte). Dies scheint ein Problem mit Husky selbst zu sein. So:

1. Ich gelöschte $HOME/.nvmOrdner , die nicht gelöscht wurde , als ich entfernt nvmfrüher.
2. Der verifizierte Knoten ist der neueste und hat die richtigen Parser-Optionen ausgeführt.
3. Es fing an zu arbeiten!

Nur zur Veranschaulichung : Wenn Sie eslint-plugin-vue verwenden , befindet sich der richtige Ort zum Hinzufügen 'parser': 'babel-eslint'innerhalb von parserOptionsparam.

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

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