javascript - example - react state eslint unexpected token

Error de análisis de ESLint: token inesperado

Question

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?

Answer 1

ESLint 2.x admite experimentalmente la sintaxis ObjectRestSpread, puede habilitarla agregando 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.

Answer 2

Primero resolví este problema, 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"
}

Answer 3

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 cualquiera que venga más tarde.

solo agrega:

"parser": "babel-eslint"

a su archivo .eslintrc y ejecute npm install babel-eslint --save-dev o yarn add -D babel-eslint .

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

Answer 4

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

Reference