Введение
Последовательное форматирование кода — это боль, особенно при работе в команде. Прелесть современной веб-разработки в том, что инструменты стали намного лучше! В этой статье мы рассмотрим настройку Prettier для автоматического форматирования вашего кода в Visual Studio Code.
Образец кода
Для демонстрационных целей вот пример кода, который мы будем форматировать. Если вы разборчивы в форматировании кода, вы сразу обнаружите некоторые очевидные ошибки.
- сочетание одинарных и двойных кавычек
- первое свойство объекта person должно быть на отдельной строке
- оператор консоли внутри функции должен иметь отступ
- вам может понравиться или не понравиться необязательная скобка, окружающая параметр функции стрелки
Установка расширения Prettier
Для работы с Prettier в Visual Studio Code вам необходимо установить расширение. Найдите Prettier — Code Formatter. Вы можете увидеть расширение ниже. Если вы устанавливаете его в первый раз, вы увидите кнопку установить вместо кнопки удалить, как у меня.
Команда форматирования документа
Установив расширение Prettier, мы теперь можем использовать его для форматирования нашего кода. Мы еще поработаем над этим позже, но для начала мы можем использовать команду Форматировать документ.
Чтобы открыть палитру команд, вы можете использовать Command **+ Shift + P** на Mac или Control **+ Shift + P** в Windows. В командной палитре найдите формат, затем выберите** Форматировать документ**.
Затем вам может быть предложено выбрать форматтер для использования. Для этого нажмите кнопку Настроить.
Затем выберите Prettier**- Code Formatter**.
И ВУАЛЯ! Ваш код хорош и отформатирован. Обратите внимание на все модные улучшения!
- интервал
- перенос строки
- последовательные котировки
Prettier также работает с файлами CSS!
Удивительно то, что это также работает с файлами CSS!
Из этого…
К этому!
Автоматически форматировать при сохранении
До сих пор нам приходилось вручную запускать команду для форматирования нашего кода. Вместо этого вы можете выбрать настройку в VS Code для автоматического форматирования файлов при сохранении. Это имеет некоторые большие преимущества.
Вам больше никогда не придется вручную форматировать код!
- убедитесь, что код отформатирован, не задумываясь об этом
- код не проверяется, если он не отформатирован
Чтобы изменить этот параметр, используйте** Command + , на Mac или Control + , ** в Windows, чтобы открыть меню настроек. Затем найдите Редактор: форматировать при сохранении и убедитесь, что он установлен.
С этой настройкой вы можете заняться своими делами, написав небрежно отформатированный код, как и все мы, зная, что обо всем этом позаботятся автоматически!
Более красивая конфигурация в настройках VS Code
Prettier многое делает за вас по умолчанию, но вы также можете изменить настройки. Вот несколько наиболее распространенных настроек.
- Одинарная кавычка — выбор между одинарными и двойными кавычками
- Полу — выберите, включать ли точку с запятой в конце строк.
- Ширина вкладки — сколько пробелов вы хотите, чтобы вкладка состояла
Откройте меню настроек, как указано выше. Затем найдите Prettier. Это вызовет все настройки, которые вы можете изменить прямо в вашем редакторе.
Например, что, если я изменю ширину вкладки на 10.
Тогда сохраните мой файл.
Довольно легко, правда?! Вероятно, это не та ширина вкладки, которую вы хотите сохранить, но все зависит от вас!
Создание более красивого файла конфигурации
Недостатком использования встроенного меню настроек в VS Code является то, что оно не обеспечивает согласованности между разработчиками в вашей команде. Если вы измените настройки в своем VS Code, у кого-то другого может быть совершенно другой набор настроек.
Создайте единообразное форматирование в своей команде, создав файл конфигурации!
Чтобы решить эту проблему, вы можете создать файл конфигурации Prettier. Он должен называться .prettierrc.(ext) с одним из следующих расширений.
- yml, yaml или json
- js
- томл
- включить в файл package.json (альтернативный вариант)
Обычно я предпочитаю файлы конфигурации JSON, в которых вы можете определить пары ключ **-› значение** для своих настроек. VS Code даже предоставит вам некоторый IntelliSense по мере ввода.
Вот пример простого файла конфигурации.
Для получения более подробной информации о файлах конфигурации ознакомьтесь с Prettier Docs. Создав один из них и зафиксировав его в своем проекте, вы можете убедиться, что все члены команды соблюдают одни и те же правила форматирования.
Вывод
Не тратьте время на ручное форматирование кода. Это требует времени, которое лучше потратить на написание большего количества кода. Воспользуйтесь потрясающими современными инструментами и настройте Prettier!
