Помилка ESLint Parsing: Несподіваний маркер

З цим кодом:

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

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

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

Я отримую цю помилку eslint:

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

Ось моя конфігурація 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
    }],
  }
}

.... .... В чому проблема?

Несподівані помилки маркера при синтаксичному розборі ESLint виникають через несумісність між вашим середовищем розробки та поточними можливостями розбору ESLint з поточними змінами з JavaScripts ES6 ~ 7.

Додавання властивості "parserOptions" до вашого .eslintrc більше не достатньо для конкретних ситуацій, таких як використання

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

в класах ES6, оскільки ESLint наразі не може самостійно їх розібрати. Ця конкретна ситуація призведе до помилки:

error Parsing error: Unexpected token =

Рішення полягає в тому, щоб ESLint розбирав сумісний аналізатор. babel-eslint - це пакет, який нещодавно врятував мене після прочитання цієї сторінки, і я вирішив додати це як альтернативне рішення для тих, хто прийде пізніше.

просто додайте:

"parser": "babel-eslint"

у свій .eslintrcфайл і запустіть npm install babel-eslint --save-devабо yarn add -D babel-eslint.

Зауважте, що новий API контексту, який починається з React ^16.3деяких важливих змін, перегляньте офіційне керівництво .

ESLint 2.x експериментально підтримує синтаксис ObjectRestSpread, ви можете ввімкнути його, додавши до своїх елементів .eslintrc: docs

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

ESLint 1.x не підтримує оператора розповсюдження, один із способів обійти це - за допомогою аналізатора babel-eslint . Останні інструкції з встановлення та використання містяться в проектній програмі.

"parser": "babel-eslint" допомогло мені виправити проблему

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

Довідково

Я вирішив цю проблему спочатку, встановивши babel-eslint за допомогою npm

npm install babel-eslint --save-dev

По-друге, додайте цю конфігурацію у файл .eslintrc

{
   "parser":"babel-eslint"
}

У моєму випадку (я використовую хмарні функції Firebase) я відкрив .eslintrc.jsonта змінив:

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

до:

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

Спочатку рішення полягало в наданні наступного конфігурації як деструктуризації об'єкта, що використовувався в якості експериментальної функції і не підтримується за замовчуванням:

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

Починаючи з версії 5, ця опція застаріла .

Тепер достатньо лише оголосити версію ES, яка є достатньо новою:

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

Якщо у вас є попереднє завдання із запуском хаскі eslint, будь ласка, продовжуйте читати. Я спробував більшість відповідей про parserOptionsтаparser значення, де моя справжня проблема стосувалася версії вузла, яку я використовував.

Моя поточна версія вузла становила 12.0.0, але хаскі якось використовував мою версію за замовчуванням nvm (хоча я не мав nvmу своїй системі). Здається, це проблема з самим хаскі . Так:

1. Я видалив $HOME/.nvmпапку, яку не було видалено, коли я її видалив nvmраніше.
2. Перевірений вузол - це останній і правильний параметр параметри.
3. Це почало працювати!

Тільки для запису, якщо ви використовуєте eslint-plugin-vue , правильне місце для додавання 'parser': 'babel-eslint'- це parserOptionsпарам.

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

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