Prettier – это великолепный инструмент, который делает ваш код более последовательным и читабельным. Он делает это, автоматически добавляя руководство по стилю в ваш проект. Он также интегрируется с вашим редактором, чтобы очищать вашу работу при ее сохранении. Наличие инструмента форматирования по умолчанию в вашем редакторе кода очень удобно, поскольку это гарантирует, что вы не тратите время на форматирование своей работы. Это дает вам больше времени, чтобы сосредоточиться на основных аспектах проекта и не увязнуть в бесконечных строках кода. Prettier также поможет предотвратить ошибки в вашем коде, упростив определение начала и конца блоков.
Если вы думали об использовании Prettier в Visual Studio Code (VS Code), вы попали в нужное место. Здесь мы расскажем вам все, что вам нужно знать об инструменте форматирования по умолчанию.
Установка Prettier в VS Code
Чтобы использовать Prettier в VS Code, вам необходимо установить расширение, используя метод, описанный ниже. Инструмент форматирования доступен на торговой площадке VS Code, и после интеграции он автоматически оптимизирует ваши проекты. Он будет форматировать код, написанный на JavaScript, React, Typescript, Vue и других языках. Приступим:
- Откройте VS Code и нажмите значок «Расширения».
- Введите “Красивее” в строке поиска и нажмите на значок увеличительного стекла.
- Выберите официальное расширение Prettier из списка.
- Нажмите кнопку “Установить”
- После установки Prettier нажмите кнопку «Обновить» для завершения процесс.
Расширение Prettier теперь установлено в VS Code.< /p>
Форматировать документ
Теперь, когда Prettier установлен на платформе, вы можете использовать его для форматирования своего кода. Вы можете сделать это вручную для каждого документа или настроить так, чтобы код форматировался при сохранении. Давайте рассмотрим эти два метода.
Форматирование документа в коде VS вручную с помощью Prettier
- Откройте центр управления, нажав Command + Shift + P” если вы используете Mac. Для пользователей Windows нажмите “Control + Shift + P”
- Поиск “Формат” в строке поиска, затем выберите “Формат документа”
- Выберите предпочтительный формат из доступных вариантов и нажмите “Настроить”
- Нажмите “Красивее – Средство форматирования кода” для форматирования кода.
В вашем документе будут соответствующие переносы строк, одинарные кавычки и интервалы. Этот процесс также будет работать с вашими файлами CSS.
Автоматическое форматирование документа в коде VS с помощью Prettier
- Откройте настройки кода VS. меню, нажав “Command + ,(запятая)” если вы используете Mac. Нажмите “Control + ,(запятая)”, если вы являетесь пользователем Windows.
- Перейдите к строке поиска и введите “Редактор: форматировать при сохранении&rdquo. ;
- Убедитесь, что он отмечен галочкой.
Prettier теперь настраивается автоматически и отформатирует ваш код, когда вы нажмете “Сохранить” Это обеспечит использование только одинарных кавычек. Длина строки также будет изменена на заданное количество символов. Эти изменения будут применены ко всем вашим проектам, что может быть не идеально, если вы работаете в команде. В этом случае вы можете установить переключатель форматирования Prettier, который позволит вам включать и выключать инструмент по мере необходимости.
Как настроить Prettier в VS Code
Есть несколько вариантов форматирования, которые Prettier использует по умолчанию. Однако вы также можете настроить параметры по своему вкусу. Например, вы можете выбирать между одинарными и двойными кавычками. Вы также можете выбрать, включать ли точку с запятой или нет. Вот как настроить параметры Prettier в VS Code.
- Перейдите к настройкам, нажав “Command + ,(запятая)” если вы используете Mac или “Control + ,(запятая)” для Windows.
- Найдите “Prettier” чтобы увидеть список отображаемых настроек.
- Вы можете изменить их в редакторе, а затем нажать “Сохранить” когда вы закончите.
Ваши настройки Prettier теперь настроены по вашему вкусу.
Форматирование документа в VS Code с помощью командной строки Prettier
Интерфейс командной строки Prettier (CLI) позволяет форматировать весь проект за один раз. Используя приведенную ниже командную строку, вы можете установить его с торговой площадки VS Code.
npm install prettier —global
Далее обновите текущий код с помощью показанной здесь команды.
prettier “*/.ts” —write
Все. Теперь ваш проект отформатирован с помощью интерфейса командной строки Prettier. Важно иметь в виду, что как бы ни было удобно использовать CLI, он может затруднить использование некоторых файлов. Например, доступ к файлам git fault, которые Prettier, возможно, уже были изменены, может быть затруднен.
Prettier одним нажатием кнопки
С Prettier вы можете легко создать простой и эффективный способ отформатировать код вручную. Вы также можете выбрать автоматическую оптимизацию своей работы при ее сохранении. Этот инструмент для экономии времени легко настроить в VS Code и позволяет вам больше сосредоточиться на главном.
Использовали ли вы Prettier в VS Code? Каков ваш опыт? Дайте нам знать в комментариях ниже.
