Erro de análise do ESLint: token inesperado

169

Com 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;

Eu recebo este erro eslint:

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

Aqui está a minha configuração 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
    }],
  }
}

.... .... Qual é o problema?

DongYao
fonte
você pode postar sua configuração eslint?
azium 15/03
Obrigado, eu já carreguei ~
DongYao 15/03/16
3
Você precisa usar um analisador que suporte a proposta de propriedade de propagação de objeto.
Felix Kling
A importação inesperada de token foi desperdiçada? Esse foi o meu problema .
Lonnie Best

Respostas:

253

Erros inesperados de token na análise do ESLint ocorrem devido à incompatibilidade entre o ambiente de desenvolvimento e os recursos atuais de análise do ESLint com as alterações em andamento no JavaScripts ES6 ~ 7.

Adicionar a propriedade "parserOptions" ao seu .eslintrc não é mais suficiente para situações específicas, como o uso de

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

nas classes ES6, pois o ESLint atualmente não pode analisá-lo por conta própria. Essa situação específica gera um erro de:

error Parsing error: Unexpected token =

A solução é ter o ESLint analisado por um analisador compatível. O babel-eslint é um pacote que me salvou recentemente depois de ler esta página e decidi adicioná-lo como uma solução alternativa para quem vier mais tarde.

basta adicionar:

"parser": "babel-eslint"

ao seu .eslintrcarquivo e execute npm install babel-eslint --save-devou yarn add -D babel-eslint.

Observe que, como a nova API de contexto a partir de React ^16.3apresenta algumas alterações importantes, consulte o guia oficial .

JaysQubeXon
fonte
4
yarn add -D babel-eslintpara quem usa fios.
Neurotransmitter
8
Para quem não sabe onde adicionar a "parser": "babel-eslint"instrução config, está no .eslintrc.json. No meu caso, é um arquivo JSON, mas basicamente o seu arquivo .eslintrc
Avid Programmer
2
Nota * Se você "ejetou" seu aplicativo create-react-app e está adicionando remoção de resíduos ao IDE, o babel-eslint já está aplicado. Basta adicionar o analisador e pronto.
Wes Duff
1
Eu encontrei este artigo útil também: grantnorwood.com/...
gurun8
Eu adicionei o "parser": "babel-eslint"para o meu arquivo eslintrc mas tem vários erros em seu lugar. Estou trabalhando com o react e ele me diz que meus componentes importados foram chamados, mas nunca usados. O que é estranho.
David Essien
61

O ESLint 2.x suporta experimentalmente a sintaxe ObjectRestSpread, você pode habilitá-lo adicionando o seguinte ao seu .eslintrc: docs

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

O ESLint 1.x não suporta nativamente o operador de propagação, uma maneira de contornar isso é usar o analisador babel-eslint . As instruções mais recentes de instalação e uso estão no leia-me do projeto.

Kevan Ahlquist
fonte
2
Isso não é verdade. O analisador padrão do ESLint, o Espree, oferece suporte à propagação e até ao descanso de objetos (esse é o único recurso experimental que o espree suporta). Para obter mais informações, consulte: eslint.org/docs/user-guide/…
Ilya Volodin
1
ecmaFeaturesfoi descontinuado. UseecmaVersion
Richard Ayotte
7
ecmaVersion: 2018trabalha sem aviso com ESLint 5
Tomasz Racia 23/09
1
Melhor solução, se assim posso dizer.
Ansjovis86
1
Não vejo problema com esta solução - funcionou bem para mim. É melhor do que ter que instalar um novo pacote também!
Steam gamer
49

"parser": "babel-eslint" me ajudou a corrigir o 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"
        }
    }
}

Referência

Rajendran Nadar
fonte
3
Esta resposta não adiciona nada à resposta do @ JaysQubeXon.
cs01 14/09/17
7
Na verdade, não - você tem um exemplo de configuração (com parserOptions incluídas)
kriskodzi
É ótimo ter o exemplo completo ++. Isso me ajudou a corrigir um erro de dicas do TamperMonkey JS.
brasofilo
@brasofilo Onde você muda o eslint no violador?
Metin Dagcilar 6/07
22

Resolvi esse problema primeiro, instalando o babel-eslint usando o npm

npm install babel-eslint --save-dev

Em segundo lugar, adicione essa configuração no arquivo .eslintrc

{
   "parser":"babel-eslint"
}
Joee
fonte
Obrigado, isso corrigiu meus problemas de
fiapos
21

No meu caso (estou usando o Firebase Cloud Functions), abri .eslintrc.jsone mudei:

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

para:

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

Originalmente, a solução era fornecer a seguinte configuração, pois a destruição de objetos costumava ser um recurso experimental e não é suportado por padrão:

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

Desde a versão 5, essa opção foi preterida .

Agora basta declarar uma versão do ES, que é nova o suficiente:

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

Se você tiver uma tarefa de pré-confirmação com a execução husky eslint, continue lendo. Eu tentei a maioria das respostas parserOptionseparser valores em que meu problema real era sobre a versão do nó que eu estava usando.

Minha versão atual do nó era 12.0.0, mas o husky estava usando minha versão padrão da nvm de alguma forma (mesmo que eu não tivesse nvmno meu sistema). Este parece ser um problema com o próprio husky . Assim:

  1. I excluídos $HOME/.nvmpasta que não foi excluída quando eu removido nvmanteriormente.
  2. O nó verificado é o mais recente e executou as opções adequadas do analisador.
  3. Começou a trabalhar!
Asim KT
fonte
1

Apenas para o registro, se você estiver usando eslint-plugin-vue , o local correto a ser adicionado 'parser': 'babel-eslint'é dentro de parserOptionsparam.

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

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

Cristiano
fonte