web-dev-qa-db-fra.com

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;

Je reçois cette erreur eslint:

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

Voici ma config 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?

javascriptreactjseslint
103
DongYao

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

Ajouter la propriété "parserOptions" à votre fichier .eslintrc ne suffit plus dans certaines situations, telles que l'utilisation de

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

dans les classes ES6, car ESLint est actuellement incapable de l’analyser seul. Cette situation particulière va générer une erreur de:

error Parsing error: Unexpected token =

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

il suffit d'ajouter:

"parser": "babel-eslint"

dans votre fichier .eslintrc et exécutez npm install babel-eslint --save-dev ou yarn add -D babel-eslint.

Veuillez noter que la nouvelle API de contexte à partir de React ^16.3 comporte des modifications importantes, veuillez vous reporter au guide officiel =.

150
JaysQubeXon

ESLint 2.x supporte expérimentalement la syntaxe ObjectRestSpread, vous pouvez l'activer en ajoutant les éléments suivants à votre .eslintrc: docs

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

ESLint 1.x ne prend pas nativement en charge l'opérateur de diffusion. Une solution consiste à utiliser le analyseur babel-eslint . Les dernières instructions d'installation et d'utilisation figurent dans le fichier Lisez-moi du projet.

49
Kevan Ahlquist

"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

31
user8202629

J'ai résolu ce problème en commençant par installer babel-eslint à l'aide de npm.

npm install babel-eslint --save-dev

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

{
   "parser":"babel-eslint"
}
4
Joee