Errore di analisi ESLint: token imprevisto

Con questo codice:

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

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

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

Ottengo questo errore eslint:

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

Ecco la mia configurazione 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 è il problema?

Si verificano errori token imprevisti nell'analisi ESLint a causa dell'incompatibilità tra l'ambiente di sviluppo e le capacità di analisi correnti di ESLint con le modifiche in corso con JavaScripts ES6 ~ 7.

L'aggiunta della proprietà "parserOptions" a .eslintrc non è più sufficiente per situazioni particolari, come l'utilizzo

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

nelle classi ES6 in quanto ESLint non è attualmente in grado di analizzarlo da solo. Questa particolare situazione genererà un errore di:

error Parsing error: Unexpected token =

La soluzione è far analizzare ESLint da un parser compatibile. babel-eslint è un pacchetto che mi ha salvato di recente dopo aver letto questa pagina e ho deciso di aggiungerlo come soluzione alternativa per chiunque venga dopo.

basta aggiungere:

"parser": "babel-eslint"

al tuo .eslintrcfile ed esegui npm install babel-eslint --save-devoyarn add -D babel-eslint .

Si noti che poiché la nuova API di contesto a partire da React ^16.3ha alcune importanti modifiche, fare riferimento alla guida ufficiale .

ESLint 2.x supporta sperimentalmente la sintassi ObjectRestSpread, è possibile abilitarlo aggiungendo quanto segue a .eslintrc: docs

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

ESLint 1.x non supporta nativamente l'operatore di diffusione, un modo per aggirare il problema è usare il parser babel-eslint . Le istruzioni di installazione e utilizzo più recenti sono sul file Leggimi del progetto.

"parser": "babel-eslint" mi ha aiutato a risolvere il 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"
        }
    }
}

Riferimento

Ho risolto questo problema con First, installando babel-eslint usando npm

npm install babel-eslint --save-dev

In secondo luogo, aggiungere questa configurazione nel file .eslintrc

{
   "parser":"babel-eslint"
}

Nel mio caso (sto usando Firebase Cloud Functions) ho aperto .eslintrc.jsone modificato:

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

per:

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

Inizialmente, la soluzione consisteva nel fornire la seguente configurazione in quanto la distruzione degli oggetti era una funzionalità sperimentale e non supportata per impostazione predefinita:

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

Dalla versione 5, questa opzione è stata deprecata .

Ora è sufficiente dichiarare una versione di ES, che è abbastanza nuova:

{
  "parserOptions": {
    "ecmaVersion": 2018
  }
}

Se hai un'attività pre-commit con husky in esecuzione eslint, continua a leggere. Ho provato la maggior parte delle risposte su parserOptionseparser valori in cui il mio vero problema riguardava la versione del nodo che stavo usando.

La mia versione attuale del nodo era 12.0.0, ma husky stava usando la mia versione predefinita nvm in qualche modo (anche se non avevo nvmnel mio sistema). Questo sembra essere un problema con lo stesso husky . Così:

1. Ho cancellato la $HOME/.nvmcartella che non è stata cancellata quando l'ho rimossanvm precedenza.
2. Il nodo verificato è l'ultimo e ha eseguito le opzioni di analisi corrette.
3. Ha iniziato a funzionare!

Per la cronaca, se stai usando eslint-plugin-vue , il posto giusto da aggiungere 'parser': 'babel-eslint'è all'interno di parserOptionsparam.

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

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