Как форматировать код с 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');

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

• A mix of single and double quotes.
• Первое свойство объекта person должно быть на своей строке.
• Оператор console внутри функции должен быть отформатирован.
• Вы можете как хотеть, так и не хотеть опциональные скобки, окружающие параметр стрелочной функции.

Содержание

• Использование команды форматирования документа
• Форматирование кода при сохранении
• Изменение настроек конфигурации Prettier
• Создание файла конфигурации Prettier

Необходимые условия

Для следования этому уроку вам потребуется:

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

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

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

Для открытия палитры команд можно использовать COMMAND + SHIFT + P на macOS или CTRL + SHIFT + P на Windows.

В палитре команд ищите format и затем выбирайте Format Document.

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

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

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

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. Это откроет все настройки, которые вы можете изменить:

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

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

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

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

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

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

• yml
• yaml
• json
• js
• toml

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

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

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

Заключение

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

Prettier обеспечивает последовательность в форматировании вашего кода и делает процесс автоматическим.