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

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

Здесь на помощь приходит Prettier Code Formatter. Это настраиваемый форматировщик кода, который поддерживает множество языков и интегрируется с большинством редакторов. В этой статье мы посмотрим, как работать с Prettier в Visual Studio Code. Другие интеграции и способы установки смотрите в документации Prettier.

Настройка рабочей среды

Будем исходить из того, что Visual Studio Code у вас уже установлен. А ещё есть файл с кодом, который срочно нуждается в форматировании. Например, вот такой фрагмент:

const name = "Timeweb";
const service ={first: name
}
console.log(service);
const printName = (fName) => {
console.log(`This is ${fName}`)
}
printName ('Timeweb');

Здесь стандартные проблемы: не смогли определиться с тем, какие кавычки использовать, потеряли отступы и переносы. Если запустить код, то он выполнится — для машины все эти отступы в JavaScript особого значения не имеют. А вот человеку читать такое будет сложно.

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

1. Выберите вкладку Extensions в меню VS Code (можно использовать сочетание Ctrl + Shift + X на Windows).
2. Найдите Prettier. У этого расширения для VS Code больше 20 млн установок.
3. Нажмите Install для установки.

Есть альтернативный способ. Нажмите сочетание Ctrl + P для вызова панели быстрого запуска и выполните команду:

ext install esbenp.prettier-vscode

Теперь можно использовать утилиту для быстрого исправления внешнего вида кода.

Автоформатирование

Новое сообщение в Слаке от проджект-менеджера — нужно срочно отправлять в продакшн обновлённую страницу с преимуществами Timeweb Cloud. Всё готово и работает, но вот форматирование кода подкачало — команда за такое по голове не погладит. Но у нас же теперь есть расширение, которое поможет разобраться с этими неприятными недостатками быстро и безболезненно. 

1. Нажмите сочетание Ctrl + Shift + P, чтобы открыть палитру команд.

2. Найдите и выполните команду Format Document With.

3. Выберите в выпадающем списке Prettier.

Код отформатируется со всеми необходимыми пробелами, отступами, переносами и единообразными кавычками.

const name = "Timeweb";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("Timeweb");

Очень удобная штука — быстрая установка инструментов для разных языков. Например, если вы запустите автоформатирование в файле кодом на Python, появится предложение добавить autopep8. Эта утилита автоматически форматирует код Python в соответствии с руководством по стилю PEP 8. Она использует pycodestyle, чтобы определить, какие части кода необходимо отформатировать. Autopep8 способен исправить большинство проблем, о которых сообщает pycodestyle.

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

1. Откройте Settings (на Windows это Ctrl + ,).
2. С помощью поисковой строки найдите параметр Editor: Format On Save.
3. Отметьте чекбокс, чтобы включить форматирование при сохранении файла.

Готово, теперь ручной запуск не понадобится.

Настройка собственных правил форматирования

Разработчики могут настраивать свои правила форматирования. Есть два способа:

1. Изменить конфигурацию прямо в настройках расширения. 
2. Создать отдельный файл конфигурации.

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

Файл .prettierrc.extension с конфигурацией может иметь расширение yml, yaml, json, js или toml. Вот простейший пример в формате JSON:

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

Другие базовые варианты смотрите в документации Prettier.

Заключение

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

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