Устранение неполадок 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).