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

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

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

🧠 Machine Learning — наш авторский канал, где собрана вся база по ИИ и машинному обучению.

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

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

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

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

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

Установка

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

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

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

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

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

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

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

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

Затем вам будет предложено выбрать средство форматирования по умолчанию.
Выберите более красивое средство форматирования из списка параметров
Вы сделали

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

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

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

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

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

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

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

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

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

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

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

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

{ 
 "singleQuote": false, 
 "trailingComma": "none" 
}

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

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