Błąd analizy ESLint: nieoczekiwany token

Za pomocą tego kodu:

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

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

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

Otrzymuję ten błąd eslint:

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

Oto moja konfiguracja 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
    }],
  }
}

.... .... Jaki jest problem?

Nieoczekiwane błędy tokenów podczas analizowania ESLint są spowodowane niekompatybilnością pomiędzy twoim środowiskiem programistycznym a obecnymi możliwościami parsowania ESLint z bieżącymi zmianami w JavaScripts ES6 ~ 7.

Dodanie właściwości „parserOptions” do pliku .eslintrc nie wystarcza już w określonych sytuacjach, takich jak używanie

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

w klasach ES6, ponieważ ESLint nie jest obecnie w stanie samodzielnie go przeanalizować. Ta szczególna sytuacja spowoduje wyświetlenie błędu:

error Parsing error: Unexpected token =

Rozwiązaniem jest przeanalizowanie ESLint przez zgodny parser. babel-eslint to pakiet, który uratował mnie niedawno po przeczytaniu tej strony i zdecydowałem się dodać go jako alternatywne rozwiązanie dla każdego, kto przyjdzie później.

poprostu dodaj:

"parser": "babel-eslint"

do swojego .eslintrcpliku i uruchom npm install babel-eslint --save-devlub yarn add -D babel-eslint.

Należy pamiętać, że ponieważ nowy interfejs API kontekstu zaczynający się od React ^16.3ma kilka ważnych zmian, zapoznaj się z oficjalnym przewodnikiem .

ESLint 2.x eksperymentalnie obsługuje składnię ObjectRestSpread, możesz ją włączyć, dodając do .eslintrc: docs

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

ESLint 1.x nie obsługuje natywnie operatora rozprzestrzeniania, jednym ze sposobów obejścia tego jest użycie parsera babel-eslint . Najnowsze instrukcje instalacji i użytkowania znajdują się w pliku Readme projektu.

"parser": "babel-eslint" pomógł mi rozwiązać problem

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

Odniesienie

Rozwiązałem ten problem przez First, instalując babel-eslint przy użyciu npm

npm install babel-eslint --save-dev

Po drugie, dodaj tę konfigurację w pliku .eslintrc

{
   "parser":"babel-eslint"
}

W moim przypadku (używam Firebase Cloud Functions) otworzyłem .eslintrc.jsoni zmieniłem:

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

do:

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

Pierwotnie rozwiązanie polegało na zapewnieniu następującej konfiguracji, ponieważ destrukcja obiektów była kiedyś funkcją eksperymentalną i nie była domyślnie obsługiwana:

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

Od wersji 5 ta opcja jest przestarzała .

Teraz wystarczy tylko zadeklarować wersję ES, która jest wystarczająco nowa:

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

Jeśli masz zadanie przed zatwierdzeniem z bieganiem husky eslint, kontynuuj czytanie. Wypróbowałem większość odpowiedzi parserOptionsi parserwartości, w których mój rzeczywisty problem dotyczył wersji węzła, którego używałem.

Moja aktualna wersja węzła to 12.0.0, ale husky w jakiś sposób używał mojej domyślnej wersji nvm (mimo że nie miałem nvmw moim systemie). Wydaje się, że jest to problem z samym husky . Więc:

1. I usunięty $HOME/.nvmfolder, który nie został usunięty, kiedy usunięte nvmwcześniej.
2. Zweryfikowany węzeł jest najnowszy i ma odpowiednie opcje parsera.
3. Zaczęło działać!

Tak dla przypomnienia , jeśli używasz eslint-plugin-vue , prawidłowe miejsce do dodania 'parser': 'babel-eslint'to wewnątrz parserOptionsparam.

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

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