Настройка 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 только к тем файлам, которые в данный момент редактируются.

Полезные материалы

1. Options · Prettier — официальная документация Prettier, где можно найти подробную информацию о настройке ширины строки.

2. Option to retain multi-line props in JSX/HTML · Issue #3101 · prettier/prettier · GitHub — яркая дискуссия о многострочных атрибутах, похоже на митинг единомышленников.

3. Prettier – Code formatter – Visual Studio Marketplace — настройки расширения Prettier для VS Code.

4. Prettier Playground — тренировочная площадка, где можно побаловаться с настройками Prettier.

5. Reddit – Dive into anything — обсуждение на Reddit, где можно узнать о личных предпочтениях разработчиков и обходных путях в области форматирования кода.