VS Code
Для автоматического выполнения линтинга и форматирования при сохранении кода в VSCode, выполните следующие шаги:
-
Установите необходимые расширения для VSCode:
- ESLint: Это расширение добавляет поддержку ESLint в редактор VSCode.
- Prettier - Code formatter: Это расширение позволяет автоматически форматировать код при сохранении.
Чтобы установить эти расширения, откройте VSCode и перейдите в раздел "Extensions" (расширения), затем найдите и установите "ESLint" и "Prettier - Code formatter".
-
Настройте VSCode для автоматического выполнения линтинга и форматирования:
Откройте настройки VSCode и добавьте следующие конфигурации:
-
Откройте командную палитру (Ctrl+Shift+P или Cmd+Shift+P на macOS) и выберите "Preferences: Open Settings (JSON)".
-
Добавьте следующие настройки:
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll": true }, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "prettier.requireConfig": true }
Эти настройки делают следующее:
"editor.formatOnSave": true
включает автоматическое форматирование при сохранении файла."editor.codeActionsOnSave": { "source.fixAll": true }
включает автоматическое исправление всех ошибок линтинга при сохранении файла."eslint.validate"
определяет, какие языки будут проверяться с помощью ESLint."prettier.requireConfig": true
указывает Prettier использовать только те файлы, для которых имеется конфигурационный файл.
-
-
Настройте проект для использования локально установленных пакетов ESLint и Prettier:
В корне вашего проекта создайте или обновите файл
.vscode/settings.json
с следующими настройками:{ "eslint.packageManager": "npm", "eslint.nodePath": "node_modules", "prettier.prettierPath": "./node_modules/prettier", "eslint.options": { "extensions": [".js", ".ts"] } }
Эти настройки указывают VSCode использовать локальные установки ESLint и Prettier, что обеспечивает единообразие в разных окружениях разработчиков.
Теперь при сохранении файлов в VSCode будет автоматически запускаться линтинг и форматирование кода в соответствии с вашими настройками ESLint и Prettier.
JetBrains IDEs
Для настройки автоматического выполнения линтинга и форматирования кода при сохранении в редакторах JetBrains (например, WebStorm, IntelliJ IDEA) выполните следующие шаги:
Для JetBrains существует поддержка плагинов ESLint и Prettier:
- ESLint: Плагин для интеграции ESLint.
- Prettier: Плагин для интеграции Prettier.
Обычно эти плагины предустановлены в WebStorm и других редакторах JetBrains, но если их нет, установите их через меню File > Settings > Plugins
.
-
Включите поддержку ESLint:
- Откройте
File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
. - Включите опцию
Enable
. - Убедитесь, что выбран параметр
Automatic ESLint configuration
или укажите путь к конфигурационному файлу.eslintrc.json
.
- Откройте
-
Укажите путь к ESLint:
- Если вы используете локально установленный ESLint, укажите путь к вашему локальному ESLint (например,
node_modules/eslint
).
- Если вы используете локально установленный ESLint, укажите путь к вашему локальному ESLint (например,
-
Включите поддержку Prettier:
- Откройте
File > Settings > Languages & Frameworks > JavaScript > Prettier
. - Включите опцию
On code reformat
иOn save
. - Убедитесь, что выбран параметр
Automatic Prettier configuration
или укажите путь к конфигурационному файлу.prettierrc.json
.
- Откройте
-
Укажите путь к Prettier:
- Если вы используете локально установленный Prettier, укажите путь к вашему локальному Prettier (например,
node_modules/prettier
).
- Если вы используете локально установленный Prettier, укажите путь к вашему локальному Prettier (например,
Для автоматического форматирования и линтинга при сохранении:
-
Автоматическое форматирование с помощью Prettier:
- Откройте
File > Settings > Tools > Actions on Save
. - Включите опцию
Reformat code
и убедитесь, что Prettier выбран как форматтер.
- Откройте
-
Автоматическое исправление проблем с помощью ESLint:
- В том же разделе
Actions on Save
, включите опциюRun eslint --fix
для запуска ESLint с автоматическим исправлением ошибок при сохранении.
- В том же разделе