Erreur d'analyse ESLint: jeton inattendu

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?

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 .

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.

"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

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

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

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

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!

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