Решение ошибки 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"
}
Полезные материалы
- Настройка ESLint – официальное руководство — подробное руководство по настройке ESLint.
- Babel – транспилятор JavaScript — всё о роли Babel в работе с современными особенностями JavaScript.
- Проблемы ESLint на GitHub — обсуждения проблем с ESLint в сообществе open-source.
- Интеграция ESLint — информация о совместимости ESLint с различными редакторами кода.
- ECMAScript 6: обзор возможностей — детальное описание функционала ECMAScript 6.
- Тег 'eslint' на Stack Overflow — полезные советы и решения разработчиков по работе с ESLint со всего мира.