Ошибка синтаксического анализа ESLint: неожиданный токен

169

С этим кодом:

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
    }],
  }
}

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

DongYao
источник
можешь выложить свой конфиг eslint?
Азий
спасибо, я уже загрузил ~
DongYao
3
Вам нужно использовать синтаксический анализатор, который поддерживает предложение свойства распространения объекта.
Феликс Клинг
Был ли неожиданный токен "импортирован"? Это была моя проблема .
Лонни Бест

Ответы:

253

Непредвиденные ошибки токенов при разборе 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имеют некоторые важные изменения, пожалуйста , обратитесь к официальному руководству .

JaysQubeXon
источник
4
yarn add -D babel-eslintдля тех, кто использует пряжу.
Нейротрансмиттер
8
Для тех, кто не знает, где добавить "parser": "babel-eslint"оператор конфигурации, он находится в .eslintrc.json. В моем случае это файл JSON, но в основном ваш файл .eslintrc
Avid Programmer
2
Примечание * Если вы «выбросили» ваше приложение create-Reaction-app и добавляете eslint-ing в вашу IDE, babel-eslint уже применяется. Просто добавьте парсер и все будет хорошо.
Уэс Дафф
1
Я тоже нашел эту статью полезной: grantnorwood.com/…
gurun8
Я добавил в "parser": "babel-eslint"свой файл eslintrc, но вместо этого получил несколько ошибок. Я работаю с реакции, и он говорит мне, что мои импортированные компоненты были вызваны, но никогда не использовались. Что странно.
Дэвид Эссьен
61

ESLint 2.x экспериментально поддерживает синтаксис ObjectRestSpread, вы можете включить его, добавив следующее в .eslintrc: docs

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

ESLint 1.x изначально не поддерживает оператор распространения, одним из способов обойти это является использование анализатора babel-eslint . Последние инструкции по установке и использованию находятся в файле readme проекта.

Кеван Алквист
источник
2
Это не правда. Парсер ESLint по умолчанию Espree поддерживает распространение и даже распространение покоя объектов (это единственная экспериментальная функция, которую поддерживает espree). Для получения дополнительной информации смотрите: eslint.org/docs/user-guide/…
Илья Володин
1
ecmaFeaturesбыл объявлен устаревшим ИспользованиеecmaVersion
Ричард Айотт
7
ecmaVersion: 2018работает без предупреждения с ESLint 5
Томаш Рация
1
Лучшее решение, если можно так сказать.
Ansjovis86
1
Я не вижу проблемы с этим решением - оно работало нормально для меня. Это лучше, чем устанавливать новый пакет!
Steam gamer
49

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

Ссылка

Раджендран Надар
источник
3
Этот ответ ничего не добавляет к ответу @ JaysQubeXon.
cs01
7
На самом деле это так - вы получаете пример конфигурации (с включенным parserOptions)
kriskodzi
Здорово иметь полный пример ++. Это помогло мне исправить ошибку подсказок TamperMonkey JS.
brasofilo
@brasofilo, где ты меняешь eslint в обезьяну?
Метин Дагцилар
22

Сначала я решил эту проблему, установив babel-eslint с помощью npm.

npm install babel-eslint --save-dev

Во-вторых, добавьте эту конфигурацию в файл .eslintrc.

{
   "parser":"babel-eslint"
}
Joee
источник
Спасибо, это исправило мои проблемы с
линтингом
21

В моем случае (я использую Firebase Cloud Functions) я открыл .eslintrc.jsonи изменил:

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

чтобы:

"parserOptions": {
  // Required for certain syntax usages
  "ecmaVersion": 2018
},
Элвин Конда
источник
9

Первоначально решением было предоставить следующую конфигурацию, поскольку деструктуризация объекта раньше была экспериментальной функцией и не поддерживалась по умолчанию:

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

Начиная с версии 5, эта опция устарела .

Теперь достаточно объявить версию ES, которая является достаточно новой:

{
  "parserOptions": {
    "ecmaVersion": 2018
  }
}
Войтех Ружичка
источник
1

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

Моя текущая версия узла была 12.0.0, но лайка каким-то образом использовала мою версию по умолчанию для nvm (хотя nvmв моей системе ее не было). Кажется, это проблема самой лайки . Так:

  1. Я удалил $HOME/.nvmпапку, которая не была удалена, когда я удалил nvmранее.
  2. Проверенный узел является последним и сделал правильные параметры парсера.
  3. Это начало работать!
Асим КТ
источник
1

Для справки: если вы используете eslint-plugin-vue , правильное место для добавления 'parser': 'babel-eslint'- внутри parserOptionsparam.

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

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

Cristiano
источник