Форматирование кода с помощью 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 должно находиться в отдельной строке.
- Выражение консоли внутри функции должно быть выделено отступами.
- Вам могут понравиться или не понравиться необязательные скобки, в которые заключен параметр функции arrow.
Предварительные требования
Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.
Чтобы работать с Prettier в Visual Studio Code, вам потребуется установить расширение. Для этого выполните поиск инструмента Prettier — Code Formatter в панели расширений VS Code. Если вы устанавливаете его в первый раз, вы увидите кнопку install вместо кнопки uninstall, как показано здесь:
Шаг 1 — Использование команды форматирования документа
После установки расширения Prettier вы можете использовать его для форматирования вашего кода. Для начала выполним обзор, используя команду Format Document. Эта команда сделает ваш код более согласованным с отформатированными пробелами, переносами строк и кавычками.
Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.
Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.
Возможно, вам будет предложено выбрать формат для использования. Для этого нажмите кнопку Configure:
Затем выберите Prettier — Code Formatter.
Примечание. Если вы не видите диалога выбора формата по умолчанию, вы можете вручную изменить его в разделе «Настройки». Установите для Editor: Default 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, чтобы открыть меню Settings (Настройки). Выполните в меню поиск Editor: Format On Save и убедитесь, что эта опция включена:
Теперь вы можете писать код как обычно, и он будет автоматически форматироваться при сохранении файла.
Шаг 3 — Изменение параметров конфигурации Prettier
Prettier выполняет много действий по умолчанию, но вы также можете внести индивидуальные изменения в его настройки.
Откройте меню Settings (Настройки). Выполните поиск Prettier. Вы увидите список всех параметров, которые вы можете изменить:
Вот несколько наиболее распространенных параметров:
- Single Quote — выберите, нужно ли использовать одинарные или двойные кавычки.
- Semi — выберите, нужно ли добавлять точку с запятой в конце строк.
- Tab Width — укажите, сколько пробелов должно вставляться при табуляции.
Недостаток использования меню встроенных параметров VS Code заключается в том, что при этом не обеспечивается согласованность между разработчиками в вашей команде.
Шаг 4 — Создание файла конфигурации Prettier
Если вы измените настройки VS Code, у другого разработчика может оказаться совершенно иная конфигурация. Вы можете обеспечить единство форматирования в своей команде, создав файл конфигурации для вашего проекта.
Создайте новый файл .prettierrc. extension с одним из следующих расширений:
Вот пример простого файла конфигурации в формате JSON:
"trailingComma": "es5", "tabWidth": 4, "semi": false, "singleQuote": true > Более конкретную информацию о файлах конфигурации можно найти в документации по Prettier. После создания такого файла и его добавления в проект вы можете быть уверены, что все члены команды используют одинаковые правила форматирования.
Заключение
Иметь согласованный код — очень хорошая практика. Это особенно полезно при работе над проектом с несколькими участниками. Согласование конфигурации делает код более удобочитаемым и понятным. Это позволяет уделить больше времени решению технических проблем, а не тратить время на исправление отступов.
Prettier обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Форматирование кода с Prettier — установка, настройка, конфиг
Prettier это утилита для автоматического форматирования кода. И вот несколько вещей которые вы получите, внедрив его на свой проект или как личный инструмент.
В рамках проекта prettier позволяет без лишних телодвижений получить общий стиль кода во всем проекте. Код ревью будут проходить быстрее т.к. большая часть вопросов о форматировании автоматически отпадет.
Также prettier дает возможность с помощью одной команды автоматически отформатировать определенную часть или весь код проекта за раз. Это может быть очень удобно на старых проектах, на которых по каким-то причинам не было четких правил по оформлению кода. Исправить в ручную 100+ файлов будет очень затратно по времени, а prettier сделает это за секунды.
Вам как разработчику prettier позволит больше времени концентрироваться на важных задачах, не отвлекаясь на форматирование. Большинство даже не замечает как много времени они тратят на оформление кода (отступы, кавычки, переносы и т.д.)
#Установка Prettier
В зависимости от того что вы используете на проекте npm или yarn запустите одну из следующих команд npm i -D prettier или yarn add —dev prettier . После этого вы уже можете ввести в консоли npx prettier —write . чтобы отформатировать весь код проекта.
Чтобы каждый раз не вводить эту длинную команду, можно в package.json добавить скрипт «prettier»: «prettier —write .» который по сути будет делать то же самое. Теперь в консоли достаточно будет ввести npm run prettier .
Если вы хотите форматировать код только в определенных файлах и/или каталогах, то можно изменить команду примерно следующим образом «prettier:js»: «prettier —write src/**/*.js» , эта команда произведет форматирование только .js файлов в директории src и ее поддиректориях.
�� Run on save
Скорее всего вы захотите автоматически запускать prettier для файла в момент его сохранения. Проще всего это сделать установив соответствующее расширение для вашего редактора и следовать инструкциям. У меня есть заметка как настроить prettier в vs code.
#Настройка Prettier (конфиг)
Есть множество способов настроить prettier, обо всех можете прочитать в официальной документации. Но почти везде используется файл конфигурации .prettierrc расположенный в корне приложения с содержимым в виде JSON.
❤ Примеры кода «до-после» будут?
Нет, не будут�� Мне не хотелось захламлять заметку целой кучей примеров с кодом. Поэтому все примеры я вынес в свой онлайн конструктор конфига для prettier. Там можно посмотреть как каждая конкретная настройка влияет на конечное форматирование. Это намного наглядней чем куски кода «до-после».
#Основные настройки
printWidth
Рекомендуемая длина строки. Это не жесткий лимит, в ситуациях когда иначе не сделать prettier будет превышать лимит (например переменные с длинным текстом).
По умолчанию: 80
Размер табуляции (в пробелах).