ESLint-Analysefehler: Unerwartetes Token

168

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?

DongYao
quelle
kannst du deine eslint config posten?
Azium
Dank habe ich laden schon ~
Dongyao
3
Sie müssen einen Parser verwenden, der den Objektverteilungs-Eigenschaftsvorschlag unterstützt.
Felix Kling
Verschwenden Sie das unerwartete Token "importieren"? Das war mein Problem .
Lonnie Best

Antworten:

252

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 .

JaysQubeXon
quelle
4
yarn add -D babel-eslintfür diejenigen, die Garn verwenden.
Neurotransmitter
7
Für diejenigen, die nicht wissen, wo sie die "parser": "babel-eslint"config-Anweisung hinzufügen sollen , finden Sie sie in der .eslintrc.json. In meinem Fall ist es eine JSON-Datei, aber im Grunde genommen Ihre .eslintrc-Datei
Avid Programmer
2
Hinweis * Wenn Sie Ihre Create-React-App "ausgeworfen" haben und Ihrer IDE Eslinting hinzufügen, wird Babel-Eslint bereits angewendet. Fügen Sie einfach den Parser hinzu und los geht's.
Wes Duff
1
Ich fand diesen Artikel auch hilfreich: grantnorwood.com/…
gurun8
Ich habe das "parser": "babel-eslint"zu meiner eslintrc-Datei hinzugefügt , aber stattdessen mehrere Fehler erhalten. Ich arbeite mit reagieren und es sagt mir, dass meine importierten Komponenten aufgerufen, aber nie verwendet wurden. Welches ist seltsam.
David Essien
61

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.

Kevan Ahlquist
quelle
2
Das ist nicht wahr. Der Standard-Parser Espree von ESLint unterstützt die Verbreitung und sogar die Verbreitung von Objektresten (dies ist die einzige experimentelle Funktion, die espree unterstützt). Weitere Informationen finden Sie hier: eslint.org/docs/user-guide/…
Ilya Volodin
1
ecmaFeatureswurde veraltet. Verwenden SieecmaVersion
Richard Ayotte
7
ecmaVersion: 2018funktioniert ohne Vorwarnung mit ESLint 5
Tomasz Racia
1
Beste Lösung, wenn ich so sagen darf.
Ansjovis86
1
Ich sehe kein Problem mit dieser Lösung - es hat gut für mich funktioniert. Es ist besser, als auch ein neues Paket installieren zu müssen!
Steamgamer
48

"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

Rajendran Nadar
quelle
3
Diese Antwort fügt der Antwort von @ JaysQubeXon ​​nichts hinzu.
CS01
7
Eigentlich tut es das - Sie erhalten eine Beispielkonfiguration (mit parserOptions eingeschlossen)
kriskodzi
Schön, das vollständige Beispiel ++ zu haben. Es hat mir geholfen, einen TamperMonkey JS-Hinweisfehler zu beheben.
brasofilo
@brasofilo wo änderst du eslint in manipulationsaffen?
Metin Dagcilar
22

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"
}
Joee
quelle
Danke, das hat meine
Flusenprobleme
21

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
},
Alvin Konda
quelle
8

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
  }
}
Vojtech Ruzicka
quelle
1

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!
Asim KT
quelle
1

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

Cristiano
quelle