Решение ошибки ESLint: Unexpected token при импорте

Быстрый ответ

Если вы столкнулись с ошибкой «Неожиданный токен» в ESLint, исправьте это, установив в конфигурационном файле .eslintrc парсер @babel/eslint-parser:

{
  "parser": "@babel/eslint-parser"
}

А также убедитесь, что версия ECMAScript соответствует применяемому синтаксису JavaScript:

{
  "parserOptions": {
    "ecmaVersion": 2020
  }
}

С помощью этих настроек ESLint сможет правильно анализировать ваш код и интерпретировать токены без ошибок.

Основы обработки кода ESLint

Ошибки типа «Неожиданный токен», с которыми сталкивается ESLint, обычно вызваны различием между синтаксисом кода и возможностями парсера ESLint. Попробуйте обновить парсер и задать актуальную версию ECMAScript: в большинстве случаев это поможет решить проблему.

ESLint, ECMAScript и прогулка во времени

Если вы не хотите упустить преимущества современного JavaScript, конфигурацию в .eslintrc нужно настроить таким образом, чтобы версия ECMAScript соответствовала используемому синтаксису. Это можно сравнить с настройкой времени на временной машине.

Подробнее об этом расскажет наш спикер на видео

Использование современного синтаксиса

В случае, если ваш код использует новые конструкции, такие как rest/spread для объектов, ESLint следует настроить соответствующим образом:

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

Визуализация

Представьте себе ошибку парсера как внезапную яму на дороге JavaScript:

Ровный участок: [🚗, function, (), {, return, "Привет"; ]

Яма на дороге: 🕳️

После ямы: [???, 🤷‍♂️]

В случае правильной настройки ESLint с подходящим парсером и параметрами:

// ESLint обновлён и оснащён набором инструментов для обхода препятствий:
{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  }
}

Дорога снова становится ровной:

Ровный участок: [🚗, function, (), {, return, "Привет"; }]

Устранена яма: [🛣️✨]

Теперь, когда ESLint оснащён орлиным зрением, вы можете продолжить путешествие без помех! 🚀

Решение типичных проблем анализа кода в ESLint

Совместимые комбинации

Если вы используете React версии 16.3 и выше, вам следует быть в курсе изменений, которые могут повлиять на функционирование Context API, и настроить ESLint соответственно.

Поддержка расширенного синтаксиса

@babel/eslint-parser идеально подходит для работы с кодом на React или с синтаксисом ES6 и выше.

{
  "parser": "@babel/eslint-parser"
}

Установка парсера

npm install @babel/eslint-parser --save-dev
# ИЛИ
yarn add -D @babel/eslint-parser

Работа с устаревшими проектами

Если ваш проект использует старые версии ESLint (начиная с 1.x), рекомендуется перейти на babel-eslint.

{
  "parser": "babel-eslint"
}

Полезные материалы

1. Настройка ESLint – официальное руководство — подробное руководство по настройке ESLint.
2. Babel – транспилятор JavaScript — всё о роли Babel в работе с современными особенностями JavaScript.
3. Проблемы ESLint на GitHub — обсуждения проблем с ESLint в сообществе open-source.
4. Интеграция ESLint — информация о совместимости ESLint с различными редакторами кода.
5. ECMAScript 6: обзор возможностей — детальное описание функционала ECMAScript 6.
6. Тег 'eslint' на Stack Overflow — полезные советы и решения разработчиков по работе с ESLint со всего мира.