Error de análisis de ESLint: token inesperado

169

Con este código:

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

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

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

Me sale este error de eslint:

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

Aquí está mi configuración de 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
    }],
  }
}

.... .... ¿Cuál es el problema?

DongYao
fuente
¿Puedes publicar tu configuración de eslint?
azium
gracias ya he subido ~
DongYao
3
Debe usar un analizador que admita la propuesta de propiedad de propagación de objetos.
Felix Kling
¿La "importación" de la ficha inesperada? Ese fue mi problema .
Lonnie Best

Respuestas:

253

Se producen errores de token inesperados en el análisis de ESLint debido a la incompatibilidad entre su entorno de desarrollo y las capacidades de análisis actuales de ESLint con los cambios continuos con JavaScripts ES6 ~ 7.

Agregar la propiedad "parserOptions" a su .eslintrc ya no es suficiente para situaciones particulares, como usar

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

en las clases de ES6, ya que ESLint no puede analizarlo por sí solo. Esta situación particular arrojará un error de:

error Parsing error: Unexpected token =

La solución es hacer que ESLint sea analizado por un analizador compatible. babel-eslint es un paquete que me salvó recientemente después de leer esta página y decidí agregar esto como una solución alternativa para cualquier persona que venga más tarde.

solo agrega:

"parser": "babel-eslint"

a su .eslintrcarchivo y ejecutar npm install babel-eslint --save-devo yarn add -D babel-eslint.

Tenga en cuenta que como la nueva API de contexto a partir de React ^16.3algunos cambios importantes, consulte la guía oficial .

JaysQubeXon
fuente
44
yarn add -D babel-eslintpara aquellos que usan hilo.
Neurotransmisor
8
Para aquellos que no saben dónde agregar la "parser": "babel-eslint"declaración de configuración, está en el .eslintrc.json. En mi caso, es un archivo JSON, pero básicamente, su archivo .eslintrc
Avid Programmer
2
Nota * Si ha "expulsado" su aplicación create-react-y está agregando eslint-ing a su IDE, babel-eslint ya está aplicado. Simplemente agregue el analizador y listo.
Wes Duff
1
También encontré útil este artículo: grantnorwood.com/…
gurun8
"parser": "babel-eslint"Agregué el a mi archivo eslintrc pero obtuve múltiples errores en su lugar. Estoy trabajando con react y me dice que Mis componentes importados se llamaron pero nunca se usaron. Lo cual es extraño.
David Essien
61

ESLint 2.x experimentalmente admite la sintaxis ObjectRestSpread, puede activarlo añadiendo lo siguiente a su .eslintrc: docs

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

ESLint 1.x no es compatible de forma nativa con el operador de propagación, una forma de evitar esto es usar el analizador babel-eslint . Las últimas instrucciones de instalación y uso se encuentran en el archivo Léame del proyecto.

Kevan Ahlquist
fuente
2
Eso no es cierto. El analizador predeterminado de ESLint, Espree, admite la propagación, e incluso la dispersión de reposo de objetos (esa es la única característica experimental que admite espree). Para obtener más información, consulte esto: eslint.org/docs/user-guide/…
Ilya Volodin
1
ecmaFeaturesha quedado en desuso UsoecmaVersion
Richard Ayotte el
77
ecmaVersion: 2018funciona sin previo aviso con ESLint 5
Tomasz Racia
1
La mejor solución si puedo decirlo.
Ansjovis86
1
No veo ningún problema con esta solución, funcionó bien para mí. ¡Es mejor que tener que instalar un nuevo paquete también!
Steam gamer
49

"parser": "babel-eslint" me ayudó a solucionar el problema

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

Referencia

Rajendran Nadar
fuente
3
Esta respuesta no agrega nada a la respuesta de @ JaysQubeXon.
cs01
77
En realidad, sí, obtienes una configuración de ejemplo (con opciones de analizador incluidas)
kriskodzi
Genial tener el ejemplo completo ++. Me ayudó a corregir un error de pistas de TamperMonkey JS.
brasofilo
@brasofilo, ¿dónde cambias eslint en tamper monkey?
Metin Dagcilar
22

Resolví este problema primero, instalando babel-eslint usando npm

npm install babel-eslint --save-dev

En segundo lugar, agregue esta configuración en el archivo .eslintrc

{
   "parser":"babel-eslint"
}
Joee
fuente
Gracias, esto solucionó mis problemas de
revestimiento
21

En mi caso (estoy usando Firebase Cloud Functions) abrí .eslintrc.jsony cambié:

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

a:

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2018
},
Alvin Konda
fuente
8

Originalmente, la solución era proporcionar la siguiente configuración, ya que la desestructuración de objetos solía ser una característica experimental y no era compatible de manera predeterminada:

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

Desde la versión 5, esta opción ha quedado en desuso .

Ahora es suficiente declarar una versión de ES, que es lo suficientemente nueva:

{
  "parserOptions": {
    "ecmaVersion": 2018
  }
}
Vojtech Ruzicka
fuente
1

Si tiene una tarea previa al compromiso con Husky corriendo eslint, continúe leyendo. Intenté la mayoría de las respuestas parserOptionsy parservalores donde mi problema real era sobre la versión de nodo que estaba usando.

Mi versión actual de nodo era 12.0.0, pero husky estaba usando mi versión predeterminada de nvm de alguna manera (aunque no la tenía nvmen mi sistema). Esto parece ser un problema con el propio husky . Entonces:

  1. Me borrado $HOME/.nvmde carpetas que no se borra cuando quité nvmantes.
  2. El nodo verificado es el último y realizó las opciones de analizador adecuadas.
  3. ¡Comenzó a funcionar!
Asim KT
fuente
1

Solo para el registro, si está utilizando eslint-plugin-vue , el lugar correcto para agregar 'parser': 'babel-eslint'es dentro de parserOptionsparam.

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

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

Cristiano
fuente