Настройка Prettier в VS Code: как не разбивать атрибуты
Быстрый ответ
Чтобы при использовании Prettier в VS Code атрибуты HTML не разделялись на несколько строк, установите в настройках Prettier более высокое значение для printWidth
:
{ "printWidth": 120 }
Увеличение значения printWidth
позволит размещать в коде длинные строки до того момента, как Prettier начнёт переносить их, что поможет сохранить атрибуты вместе на одной строке.
Ручное форматирование: Ваш код – ваши правила
Если вы хотите более тонко управлять результатами, которые достигает Prettier:
Отключите Форматирование при сохранении: это поможет избежать автоматического форматирования при сохранении файла. Весьма полезно, если вы предпочитаете самостоятельно контролировать форматирование.
Используйте горячие клавиши: в VS Code нажмите
Alt+Shift+F
(для Windows/Linux) илиOption+Shift+F
(для macOS), чтобы применить ручное форматирование кода. Хотя это и не волшебство, но очень близко к нему!Настроить Предпочтения форматирования: воспользовавшись файлом
.prettierrc.json
, вы сможете детально отрегулировать различные параметры форматирования. Prettier предоставляет столько возможностей для настройки, сколько вы только пожелаете!Регулирование форматирования определённых участков кода: просто поместите комментарий
<!-- prettier-ignore -->
перед HTML-блоком, который необходимо игнорировать Prettier'у. Это как заклинание, отменяющее воздействие Prettier!
Поэтапная настройка: Под вашим пристальным контролем
Подстройте параметры постепенно, чтобы добиться наилучшей конфигурации:
Начните с значения
printWidth
80-100 для обеспечения читабельности и постепенно увеличивайте его для достижения идеальных показателей.Попробуйте Prettier playground, чтобы в увлекательной визуальной среде поэкспериментировать с настройками. Это помогает учиться и вдохновляться!
Делайте пошаговые коррекции: исследуйте различные опции и наблюдайте за тем, как меняется код, чтобы подобрать наиболее подходящие настройки.
Файл
.prettierrc.json
отвечает за обеспечение согласования правил форматирования на разных устройствах или в рамках командных проектов.
Расширяйте свой кругозор: Prettier – не всё
Если Prettier не соответствует всем вашим нуждам, вам стоит рассмотреть следующие предложения:
Согласование с командой: выберите и согласуйте использование общего файла
.prettierrc.json
для обеспечения единого стиля кода всей команды.Отслеживание обновлений: следите за последними версиями Prettier и его плагинов, которые могут расширить его возможности.
Исследование альтернатив: поищите другие инструменты и расширения для форматирования кода, которые могут быть лучше подходящими для вашего уникального случая.
Визуализация
Предположим, у нас есть список:
До применения Prettier: [📃(альфа, браво, чарли, дельта)]
После применения Prettier:
[📃(альфа,
браво,
чарли,
дельта)]
Prettier подобен педантичному учителю, требуя от вашего кода стройности и дисциплины:
Можно вернуть контроль через настройки:
🔧 Settings.json:
{
"prettier.printWidth": Ширина_Страницы
}
Ширина_Страницы поможет нам точно настроить количество текста в одной строке, прежде чем Prettier начнёт переносить его на новую:
📃(альфа, браво, чарли, дельта) // Порядок и гармония восстановлены.
Как и в школе, где у каждого учителя свои требования, различные проекты потребуют своих уникальных настроек Prettier. Заключительно, подстроите параметры, исходя из специфики вашего проекта.
Обновление софта: Когда всё идет вверх тормашками
После обновлений Prettier иногда могут происходить радикальные изменения. Вам придется быть готовым, чтобы адекватно реагировать на эти неожиданности:
Версионирование
.prettierrc.json
: закрепите настройки для определённой версии Prettier, чтобы избежать сюрпризов.Применение непрерывной интеграции: используйте CI-системы для проверки соблюдения кодом установленных стилевых правил согласно вашему
.prettierrc.json
. Это как охрана, которая следит за порядком в кодовой базе.Осторожная интеграция: при работе над проектами с большим объемом устаревшего кода применяйте Prettier только к тем файлам, которые в данный момент редактируются.
Полезные материалы
Options · Prettier — официальная документация Prettier, где можно найти подробную информацию о настройке ширины строки.
Option to retain multi-line props in JSX/HTML · Issue #3101 · prettier/prettier · GitHub — яркая дискуссия о многострочных атрибутах, похоже на митинг единомышленников.
Prettier – Code formatter – Visual Studio Marketplace — настройки расширения Prettier для VS Code.
Prettier Playground — тренировочная площадка, где можно побаловаться с настройками Prettier.
Reddit – Dive into anything — обсуждение на Reddit, где можно узнать о личных предпочтениях разработчиков и обходных путях в области форматирования кода.