Error de análisis de ESLint: token inesperado

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?

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 .

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.

"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

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

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

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

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!

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