Устранение неполадок ESLint, Prettier и VSCode

ESLint и Prettier могут значительно облегчить кодирование в VSCode. Я не могу сказать вам, сколько ошибок они находят в моем коде, которые легко исправить в данный момент, но впоследствии их было бы трудно отследить как ошибки.

Но что если ваша проблема заключается в том, чтобы заставить ESLint / Prettier работать с VSCode? Ниже приведены некоторые советы по устранению неполадок. Я отсортировал советы по трем общим симптомам:

  • Симптом 1: VSCode не выделяет ошибки
  • Симптом 2: VSCode не форматируется при сохранении
  • Симптом 3: ESLint генерирует сотни ошибок “Delete prettier/prettier error”.

Симптом 1: VSCode не выделяет ошибки

Допустим, вы настроили ESLint и Prettier, но VSCode не выделяет ошибки:

Вот некоторые моменты, на которые следует обратить внимание:

1. Установка ESLint и Prettier

Убедитесь, что ESLint и Prettier установлены для вашего проекта.

2. Плагин ESLint для VSCode

Убедитесь, что плагин ESLint для VSCode установлен и включен.

3. Файл конфигурации ESLint

Убедитесь, что у вас есть файл конфигурации ESLint на верхнем уровне вашего проекта.

4. eslint-plugin-prettier

Я предпочитаю использовать eslint-plugin-prettier и настраивать Prettier в конфигурационном файле ESLint (вместо того, чтобы поддерживать два конфигурационных файла).

5. Настройка форматера по умолчанию в VSCode

Убедитесь, что форматтер по умолчанию в Настройках VSCode установлен на ESLint. Проверьте настройки User и Workspace (Workspace имеет приоритет над User).

6. Каталог “Рабочей области” VSCode

Убедитесь, что каталог, который вы открыли в VSCode (он же рабочая область), является верхним уровнем вашего проекта. Например:

  • ваш проект находится по адресу /usr/src/my-project
  • ваш файл конфигурации ESLint находится по адресу /usr/src/my-project/.eslintrc.json.

Если вы откроете любой каталог, отличный от /usr/src/my-project в качестве рабочего пространства в VSCode (например, /usr/src или /usr/src/my-project/client), то VSCode не распознает файл конфигурации ESLint.

7. Ошибки конфигурации ESLint

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

8. Конфигурация ESLint overrideConfigFile

Проверьте, есть ли у вас опция ESLint overrideConfigFile в настройках VSCode. Если такая опция существует, убедитесь, что файл конфигурации находится в этом месте.

9. Рабочие каталоги ESLint в VSCode

Проверьте, не исключен ли ваш файл из рабочих каталогов ESLint в настройках пользователя или рабочего пространства VSCode.


Симптом 2: VSCode не форматирует файл при сохранении

1. Настройки VSCode “Форматирование при сохранении”

Убедитесь, что в настройках VSCode:

  • включено ли “Форматирование при сохранении”
  • для параметра “Режим форматирования при сохранении” установлено значение “файл”.

2. Настройка VSCode “Действия кода при сохранении”

Убедитесь, что настройки VSCode включают ESLint в “действия кода при сохранении”:

В файле settings.json должна быть запись следующего содержания:

"editor.codeActionsOnSave": 
  {
    "source.fixAll.eslint": true
  },
Войти в полноэкранный режим Выйти из полноэкранного режима

3. Не все ошибки ESLint являются “автоисправимыми”

Обратите внимание, что некоторые ошибки ESLint не будут автоматически исправлены при сохранении, потому что они не являются автоисправимыми. В качестве примера можно привести ошибку eslint-plugin-testing-library:

auto-fixes to this on save:

Но эта ошибка линтинга:

не является автоисправляемой, поэтому не обновляется при сохранении.


Симптом 3: ESLint генерирует сотни ошибок “Delete prettier/prettier error”.

Это может произойти, если вы работаете на компьютере под управлением Windows, но код был сгенерирован на компьютере Mac или Linux. Ошибка также может выглядеть следующим образом:

Попробуйте выполнить следующие действия:

1. Запустите prettier из командной строки

Запустите prettier для всех файлов в проекте (ссылка: create-react-app docs):

./node_modules/.bin/prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
Войдите в полноэкранный режим Выйдите из полноэкранного режима

2. Обновите правило prettier/prettier “endOfLine”

Обновите правило prettier/prettier в файле конфигурации ESLint (ссылка: StackOverflow):

"prettier/prettier": [
  "error",
  {
    "endOfLine": "auto"
  }
],
Войти в полноэкранный режим Выйти из полноэкранного режима

3. Установите окончания строк в настройках VSCode

Установите окончания строк в файле .vscode/settings.json (ссылка: StackOverflow):

{
    "files.eol": "n",
}
Войти в полноэкранный режим Выйти из полноэкранного режима

4. Обновите глобальные настройки git

ВНИМАНИЕ: это обновит ваши глобальные настройки git и повлияет на ВСЕ ваши git-проекты.

Выполните git config --global core.autocrlf true и снова возьмите код с GitHub (или, возможно, повторно клонируйте репозиторий). (Ссылка: документация GitHub)

5. Рассмотрите возможность использования подсистемы Windows для Linux

Анекдотически, я не получал эту ошибку на своем ноутбуке с Windows при использовании Ubuntu 20.04 на Windows Subsystem for Linux (хотя другие пользователи Windows – которые, вероятно, использовали PowerShell – сообщали об ошибке для того же репозитория GitHub).

Оцените статью
Procodings.ru
Добавить комментарий