Как форматировать код с помощью 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 должно находиться на своей строке.
• Оператор Console внутри функции должен иметь отступ.
• Вам могут понравиться или не понравиться необязательные скобки вокруг параметра стрелочной функции.

Предпосылки

• Загрузите и установите Visual Studio Code.
• Чтобы использовать Prettier в Visual Studio Code, необходимо установить плагин. Для этого найдите Prettier – Code Formatter на панели плагинов VS Code. Если вы устанавливаете его впервые, вместо кнопки «Удалить», показанной здесь, вы увидите кнопку «Установить».

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

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

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

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

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

Затем выберите 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 автоматическое форматирование файлов при сохранении. Это также гарантирует, что неотформатированный код не будет добавлен в систему контроля версий.

Чтобы изменить эту настройку, КОМАНДА + на macOS или CTRL + Нажмите кнопку в Windows, чтобы открыть меню «Параметры». После того, как меню откроется, Редактор: Форматировать при сохранении Найдите и убедитесь, что эта опция отмечена:

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

Шаг 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
}

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

Введение

Единообразие кода — хорошая практика. Это особенно полезно при работе над проектом с несколькими участниками. Согласование набора настроек улучшает читаемость и понимание кода. Больше времени можно потратить на решение сложных технических проблем, чем на борьбу с уже разрешёнными проблемами, такими как отступы в коде.