Поиск по сайту:

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


Введение

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

В этой статье вы настроите Prettier для автоматического форматирования кода в Visual Studio Code, также известном как VS Code.

В целях демонстрации вот пример кода, который вы будете форматировать:

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

Если вы знакомы с форматированием кода, вы можете заметить некоторые ошибки:

  • Сочетание одинарных и двойных кавычек.
  • Первое свойство объекта person должно быть в отдельной строке.
  • Консольный оператор внутри функции должен иметь отступ.
  • Вам может понравиться или не понравиться необязательная скобка вокруг параметра функции стрелки.

Предпосылки

Чтобы следовать этому руководству, вам необходимо загрузить и установить Visual Studio Code.

Для работы с Prettier в Visual Studio Code вам необходимо установить расширение. Для этого найдите Prettier — Code Formatter на панели расширений VS Code. Если вы устанавливаете его в первый раз, вы увидите кнопку установки вместо кнопки удаления, показанной здесь:

Шаг 1 — Использование команды форматирования документа

Установив расширение Prettier, вы теперь можете использовать его для форматирования своего кода. Для начала давайте изучим использование команды «Формат документа». Эта команда сделает ваш код более согласованным с форматированием интервалов, переносом строк и кавычками.

Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.

В палитре команд найдите format, а затем выберите «Форматировать документ».

Затем вам может быть предложено выбрать, какой формат использовать. Для этого нажмите кнопку Настроить:

Затем выберите Prettier — Code Formatter.

Примечание. Если вы не видите запрос на выбор формата по умолчанию, вы можете вручную изменить его в настройках. Установите для редактора: средство форматирования по умолчанию значение esbenp.prettier-vscode.

Ваш код теперь отформатирован с использованием интервалов, переноса строк и последовательных кавычек:

const name = 'James';

const person = { first: name };

console.log(person);

const sayHelloLinting = (fname) => {
  console.log(`Hello linting, ${fName}`);
}

sayHelloLinting('James');

Это также работает с файлами CSS. Вы можете превратить что-то с непоследовательными отступами, фигурными скобками, новыми строками и точками с запятой в хорошо отформатированный код. Например:

body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

Будет переформатирован как:

body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

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

Шаг 2 — Форматирование кода при сохранении

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

Чтобы изменить этот параметр, нажмите COMMAND + , в macOS или CTRL + , в Windows, чтобы открыть меню настроек. Когда меню открыто, найдите Editor: Format On Save и убедитесь, что эта опция отмечена флажком:

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

Шаг 3 — Изменение параметров конфигурации Prettier

Prettier многое делает за вас по умолчанию, но вы также можете изменить настройки.

Откройте меню настроек. Затем найдите Prettier. Это вызовет все настройки, которые вы можете изменить:

Вот несколько наиболее распространенных настроек:

  • Одинарные кавычки. Выберите между одинарными и двойными кавычками.
  • Semi – укажите, следует ли включать точку с запятой в конце строк.
  • Ширина табуляции. Укажите, сколько пробелов вы хотите вставить на табуляции.

Недостатком использования встроенного меню настроек в VS Code является то, что оно не обеспечивает согласованности между разработчиками в вашей команде.

Шаг 4 — Создание более красивого файла конфигурации

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

Создайте новый файл с именем .prettierrc.extension с одним из следующих расширений:

  • yml
  • yaml
  • json
  • JS
  • томл

Вот пример простого файла конфигурации с использованием JSON:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Для получения дополнительной информации о файлах конфигурации ознакомьтесь с Prettier Docs. После создания одного из них и проверки его в своем проекте вы можете убедиться, что каждый член команды следует одним и тем же правилам форматирования.

Заключение

Наличие последовательного кода является хорошей практикой. Это особенно полезно при работе над проектом с несколькими соавторами. Согласование набора конфигураций помогает с разборчивостью и пониманием кода. Больше времени можно посвятить решению сложных технических проблем, вместо того, чтобы бороться с решенными проблемами, такими как отступы в коде.

Prettier обеспечивает единообразие форматирования кода и автоматизирует процесс.