ESLint и Prettier могут значительно облегчить кодирование в VSCode. Я не могу сказать вам, сколько ошибок они находят в моем коде, которые легко исправить в данный момент, но впоследствии их было бы трудно отследить как ошибки.
Но что если ваша проблема заключается в том, чтобы заставить ESLint / Prettier работать с VSCode? Ниже приведены некоторые советы по устранению неполадок. Я отсортировал советы по трем общим симптомам:
- Симптом 1: VSCode не выделяет ошибки
- Симптом 2: VSCode не форматируется при сохранении
- Симптом 3: ESLint генерирует сотни ошибок «Delete
␍
prettier/prettier error».
- Симптом 1: VSCode не выделяет ошибки
- 1. Установка ESLint и Prettier
- 2. Плагин ESLint для VSCode
- 3. Файл конфигурации ESLint
- 4. eslint-plugin-prettier
- 5. Настройка форматера по умолчанию в VSCode
- 6. Каталог «Рабочей области» VSCode
- 7. Ошибки конфигурации ESLint
- 8. Конфигурация ESLint overrideConfigFile
- 9. Рабочие каталоги ESLint в VSCode
- Симптом 2: VSCode не форматирует файл при сохранении
- 1. Настройки VSCode «Форматирование при сохранении»
- 2. Настройка VSCode «Действия кода при сохранении»
- 3. Не все ошибки ESLint являются «автоисправимыми»
- Симптом 3: ESLint генерирует сотни ошибок «Delete ␍ prettier/prettier error».
- 1. Запустите prettier из командной строки
- 2. Обновите правило prettier/prettier «endOfLine»
- 3. Установите окончания строк в настройках VSCode
- 4. Обновите глобальные настройки git
- 5. Рассмотрите возможность использования подсистемы Windows для Linux
Симптом 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).