Как автоматически форматировать код в коде Visual Studio с помощью Prettier

Каждый раз, когда мы работаем над каким-либо проектом, важно, чтобы для вашего редактора кода был настроен модуль форматирования по умолчанию.

Это повысит вашу продуктивность, не тратя время на форматирование кода. Если строка становится длиннее и не умещается на экране.

Кроме того, использование средства форматирования позволяет избежать ошибок в коде, поэтому вы четко видите, где начинается и где заканчивается ваш конкретный блок, а также помогает определить совпадающие скобки в коде.

Итак, в этой статье мы увидим, как настроить средство форматирования Prettier в Visual Studio Code (VS Code).

Итак, приступим.

Автоматически форматировать код при сохранении файла

Установите Prettier расширение для VS Code, которое форматирует код, написанный на Javascript, Angular, Vue, React, Typescript и многих других языках.

Установка

  • Щелкните значок расширений в VS Code.
  • Ищи prettier
  • Вы увидите расширение от Prettier
  • Нажмите на кнопку установки
  • Нажмите кнопку «Обновить» или перезапустите VS Code после установки расширения.
prettier_extension.png

Использование

  • Чтобы автоматически отформатировать файл при сохранении, в Visual Studio Code нажмите Control + Shift + Pили, Command + Shift + P (Mac)чтобы открыть палитру команд, введите, settingа затем выберите Preferences: Open User Settings параметр.
  • Найдите format on save настройку и установите флажок.
format_on_save.png

Вот и все! Поздравляю! Вы настроили красивее для форматирования в соответствии с настройками по умолчанию.

Теперь откройте любой код JavaScript / React.  Допустим, ваш код выглядит так:

todo_format1.png

Если вы сохраните файл с помощью Ctrl + S или Command + S (Mac), программа prettier отформатирует ваш код, как показано ниже:

todo_format2.png

Если вы не видите, что код автоматически форматируется при сохранении файла, это может быть связано с тем, что в VS Code установлено несколько форматеров. Выполните следующие шаги, чтобы заставить его работать.

  • Откройте любой файл в VS Code
  • Нажмите Control + Shift + P или, Command + Shift + P (Mac)чтобы открыть палитру команд, введите, format documentа затем выберите Format Document параметр.
format_document.png
  • Затем вам будет предложено выбрать средство форматирования по умолчанию.
  • Выберите более красивое средство форматирования из списка параметров
  • Вы сделали

Теперь, если вы сохраните какой-либо файл, вы увидите, что файл отформатирован правильно.

Если у вас есть такой код:

format_router1.png

Затем при сохранении он будет отформатирован следующим образом:

format_router3.png

Так что теперь вам не нужно беспокоиться о добавлении или удалении пробелов или перемещении кода во вторую строку, если он не помещается в одной строке. Prettier сделает эту работу за вас.

Теперь напишите код так, как хотите, и просто сохраните файл, чтобы отформатировать его.

Это повысит вашу продуктивность, так как вы не будете тратить время на форматирование кода.

Но иногда может случиться так, что вы не хотите, чтобы форматирование выполнялось более красивым, и вы хотите сохранить собственное форматирование для определенного файла, тогда вы можете выполнить следующий шаг:

  • В Visual Studio Code нажмите Control + Shift + P или, Command + Shift + P (Mac)чтобы открыть палитру команд, введите, saveа затем выберите Save without Formatting параметр
save_without_formatting.gif

Расширенные конфигурации

Если вам нужен больший контроль над форматированием, prettier также позволяет это.

Создайте файл с именем .prettierrc (точка prettierrc) в корне вашего проекта и добавьте необходимую конфигурацию.

Например, добавьте в .prettierrc файл следующий JSON

{ 
 "singleQuote": false, 
 "trailingComma": "none" 
}
  • SingleQuote: false будет использовать двойные кавычки вместо одинарных кавычек для строк в вашем коде
  • trailingComma: "none" удалит все конечные запятые из объявления объекта в вашем файле

Вы можете найти больше вариантов конфигурации ЗДЕСЬ .

Спасибо за прочтение!

Ответить