Erreur d'analyse ESLint: jeton inattendu

169

Avec ce 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;

J'obtiens cette erreur eslint:

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

Voici ma configuration 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
    }],
  }
}

.... .... Quel est le problème?

DongYao
la source
pouvez-vous poster votre configuration eslint?
azium
merci j'ai déjà téléchargé ~
DongYao
3
Vous devez utiliser un analyseur qui prend en charge la proposition de propriété de propagation d'objet.
Felix Kling
Avez-vous perdu l '"importation" de jeton inattendue? C'était mon problème .
Lonnie Best

Réponses:

253

Des erreurs de jeton inattendues dans l'analyse ESLint se produisent en raison d'une incompatibilité entre votre environnement de développement et les capacités d'analyse actuelles d'ESLint avec les modifications en cours avec JavaScripts ES6 ~ 7.

L'ajout de la propriété "parserOptions" à votre .eslintrc n'est plus suffisant pour des situations particulières, comme l'utilisation

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

dans les classes ES6 car ESLint n'est actuellement pas en mesure de l'analyser seul. Cette situation particulière générera une erreur de:

error Parsing error: Unexpected token =

La solution consiste à faire analyser ESLint par un analyseur compatible. babel-eslint est un package qui m'a sauvé récemment après avoir lu cette page et j'ai décidé de l'ajouter comme solution alternative pour quiconque viendrait plus tard.

il suffit d'ajouter:

"parser": "babel-eslint"

dans votre .eslintrcfichier et exécutez npm install babel-eslint --save-devou yarn add -D babel-eslint.

Veuillez noter que comme la nouvelle API de contexte à partir de React ^16.3a quelques changements importants, veuillez vous référer au guide officiel .

JaysQubeXon
la source
4
yarn add -D babel-eslintpour ceux qui utilisent Yarn.
Neurotransmetteur
8
Pour ceux qui ne savent pas où ajouter l' "parser": "babel-eslint"instruction config, elle se trouve dans le fichier .eslintrc.json. Dans mon cas, c'est un fichier JSON, mais en gros, votre fichier .eslintrc
Avid Programmer
2
Remarque * Si vous avez "éjecté" votre application create-react-app et que vous ajoutez eslint-ing à votre IDE, babel-eslint est déjà appliqué. Ajoutez simplement l'analyseur et vous êtes prêt à partir.
Wes Duff
1
J'ai trouvé cet article aussi utile: grantnorwood.com
...
J'ai ajouté le "parser": "babel-eslint"à mon fichier eslintrc mais j'ai eu plusieurs erreurs à la place. Je travaille avec react et cela me dit que mes composants importés ont été appelés mais jamais utilisés. Ce qui est étrange.
David Essien
61

ESLint 2.x prend en charge expérimentalement la syntaxe ObjectRestSpread, vous pouvez l'activer en ajoutant ce qui suit à votre .eslintrc: docs

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

ESLint 1.x ne supporte pas nativement l'opérateur de diffusion, une façon de contourner ce problème est d'utiliser l' analyseur babel-eslint . Les dernières instructions d'installation et d'utilisation se trouvent dans le fichier Lisez-moi du projet.

Kevan Ahlquist
la source
2
Ce n'est pas vrai. L'analyseur par défaut d'ESLint, Espree, prend en charge la propagation, et même la propagation du reste d'objet (c'est la seule fonctionnalité expérimentale prise en charge par espree). Pour plus d'informations, voir: eslint.org/docs/user-guide/…
Ilya Volodin
1
ecmaFeaturesest obsolète. UtilisationecmaVersion
Richard Ayotte
7
ecmaVersion: 2018fonctionne sans avertissement avec ESLint 5
Tomasz Racia
1
Meilleure solution si je puis dire.
Ansjovis86
1
Je ne vois pas de problème avec cette solution - cela a bien fonctionné pour moi. C'est mieux que d'avoir à installer un nouveau package aussi!
Joueur Steam
49

"parser": "babel-eslint" m'a aidé à résoudre le problème

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

Référence

Rajendran Nadar
la source
3
Cette réponse n'ajoute rien à la réponse de @ JaysQubeXon.
cs01 le
7
En fait, c'est le cas - vous obtenez un exemple de configuration (avec parserOptions inclus)
kriskodzi
Super d'avoir l'exemple complet ++. Cela m'a aidé à corriger une erreur d'indications TamperMonkey JS.
brasofilo
@brasofilo où changez-vous eslint dans tamper monkey?
Metin Dagcilar le
22

J'ai résolu ce problème en installant d'abord babel-eslint en utilisant npm

npm install babel-eslint --save-dev

Deuxièmement, ajoutez cette configuration dans le fichier .eslintrc

{
   "parser":"babel-eslint"
}
Joee
la source
Merci, cela a résolu mes problèmes de peluchage
Deejers
21

Dans mon cas (j'utilise Firebase Cloud Functions), j'ai ouvert .eslintrc.jsonet modifié:

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

à:

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2018
},
Alvin Konda
la source
9

À l'origine, la solution consistait à fournir la configuration suivante, car la déstructuration d'objets était une fonctionnalité expérimentale et non prise en charge par défaut:

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

Depuis la version 5, cette option est obsolète .

Il suffit maintenant de déclarer une version d'ES, ce qui est assez récent:

{
  "parserOptions": {
    "ecmaVersion": 2018
  }
}
Vojtech Ruzicka
la source
1

Si vous avez une tâche de pré-commit avec husky en cours d'exécution eslint, veuillez continuer à lire. J'ai essayé la plupart des réponses sur parserOptionsetparser valeurs où mon problème réel concernait la version du nœud que j'utilisais.

Ma version de nœud actuelle était 12.0.0, mais husky utilisait d'une manière ou d'une autre ma version par défaut de nvm (même si je n'en avais pas nvmdans mon système). Cela semble être un problème avec Husky lui-même. Alors:

  1. J'ai supprimé un $HOME/.nvmdossier qui n'a pas été supprimé lorsque je l'ai supprimé nvmplus tôt.
  2. Le nœud vérifié est le dernier et a fait les options d'analyseur appropriées.
  3. Cela a commencé à fonctionner!
Asim KT
la source
1

Pour mémoire, si vous utilisez eslint-plugin-vue , le bon endroit pour ajouter 'parser': 'babel-eslint'est à l'intérieur de parserOptionsparam.

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

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

Cristiano
la source