Расширение Prettier VS Code — идеальное форматирование кода
Вам надоело тратить бесчисленное количество минут на настройку форматирования кода? Хотелось бы иметь волшебный инструмент, который мог бы позаботиться обо всех утомительных интервалах, переносах строк и выборе кавычек? В этой статье мы окунемся в удивительный мир расширения Prettier Code Formatter VS Code и узнаем, как оно может изменить ваш опыт работы с кодом.
Что такое Prettier?
Prettier — это специализированный форматировщик кода, который помогает поддерживать единообразный стиль кода в проектах. Автоматически применяя набор предопределенных правил форматирования, Prettier избавляет вас от необходимости вносить изменения вручную, освобождая ваше время для того, чтобы сосредоточиться на действительно важных вещах — создании великолепных сайтов.
Установка
Найдите «esbenp.prettier-vscode» в панели расширений VS Code Extensions и нажмите кнопку «install». Или установите Visual Studio Code с помощью Marketplace.
Примечание: если Prettier не установлен в вашем проекте, вы можете установить его, следуя официальной инструкции по установке.
Установка Prettier в качестве форматировщика по умолчанию
Для того чтобы Prettier использовался вместо других имеющихся расширений форматирования кода, установите его в качестве форматировщика по умолчанию в настройках VS Code. Просто добавьте следующий фрагмент кода в файл настроек VS Code:
Суперспособность расширения VS Code
Если вы, как и я, являетесь поклонником Visual Studio Code, то вы попали по адресу! Расширение Prettier Code Formatter легко интегрируется с VS Code, позволяя раскрыть всю мощь Prettier прямо в вашем любимом редакторе кода.
Включив расширение Prettier, можно легко форматировать код с помощью сочетания клавиш или даже настроить его на автоматическое форматирование при сохранении. Да, вы не ослышались! Опция formatOnSave в сочетании с Prettier будет творить волшебство каждый раз, когда вы нажимаете кнопку сохранения.
Использование функции Format-On-Save
Format-On-Save — это мощная функция, позволяющая автоматически форматировать код при каждом сохранении файла. Эта функция учитывает настройку editor.formatOnSave , которая может быть включена для каждого языка, совместимого с Prettier:
Потребность в скорости
Для разработчика время имеет огромное значение. Чем быстрее вы можете создавать чистый и читаемый код, тем эффективнее и продуктивнее вы работаете. Именно поэтому Prettier — наш друг!
Попрощайтесь с ручной настройкой пробелов, табуляций, переносов строк, одинарных и двойных кавычек и прочими мелочами, которые могут замедлить работу. Prettier позаботится обо всем этом, обеспечив согласованность и визуальную привлекательность кодовой базы.
Принятие образа жизни Prettier
Теперь, когда вы узнали о чудесах расширения Prettier Code Formatter VS Code, пришло время принять этот новый способ кодирования. Позвольте себе отказаться от контроля над внешним видом кода и доверьте эту работу Prettier.
Если вы новичок в Prettier, не волнуйтесь! Установка и настройка Prettier не составит труда. Достаточно обратиться к официальной документации Prettier и следовать приведенным пошаговым инструкциям. Вы не успеете оглянуться, как уже будете без труда выполнять форматирование кода.
Заключение
Поздравляем вас с открытием волшебного расширения Prettier Code Formatter VS Code! Автоматизируя форматирование кода, Prettier экономит ваше время, повышает производительность и позволяет сосредоточиться на том, что у вас получается лучше всего — на написании потрясающего кода. Счастливого кодирования!
Форматирование кода с 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
Размер табуляции (в пробелах).
Как использовать Prettier в VS Code
Prettier – это великолепный инструмент, который делает ваш код более последовательным и читабельным. Он делает это, автоматически добавляя руководство по стилю в ваш проект. Он также интегрируется с вашим редактором, чтобы очищать вашу работу при ее сохранении. Наличие инструмента форматирования по умолчанию в вашем редакторе кода очень удобно, поскольку это гарантирует, что вы не тратите время на форматирование своей работы. Это дает вам больше времени, чтобы сосредоточиться на основных аспектах проекта и не увязнуть в бесконечных строках кода. Prettier также поможет предотвратить ошибки в вашем коде, упростив определение начала и конца блоков.
Если вы думали об использовании Prettier в Visual Studio Code (VS Code), вы попали в нужное место. Здесь мы расскажем вам все, что вам нужно знать об инструменте форматирования по умолчанию.
Установка Prettier в VS Code
Чтобы использовать Prettier в VS Code, вам необходимо установить расширение, используя метод, описанный ниже. Инструмент форматирования доступен на торговой площадке VS Code, и после интеграции он автоматически оптимизирует ваши проекты. Он будет форматировать код, написанный на JavaScript, React, Typescript, Vue и других языках. Приступим:
- Откройте VS Code и нажмите значок «Расширения».
- Введите “Красивее” в строке поиска и нажмите на значок увеличительного стекла.
- Выберите официальное расширение Prettier из списка.
- Нажмите кнопку “Установить”
- После установки Prettier нажмите кнопку «Обновить» для завершения процесс.
Расширение Prettier теперь установлено в VS Code.
Форматировать документ
Теперь, когда Prettier установлен на платформе, вы можете использовать его для форматирования своего кода. Вы можете сделать это вручную для каждого документа или настроить так, чтобы код форматировался при сохранении. Давайте рассмотрим эти два метода.
Форматирование документа в коде VS вручную с помощью Prettier
- Откройте центр управления, нажав Command + Shift + P” если вы используете Mac. Для пользователей Windows нажмите “Control + Shift + P”
- Поиск “Формат” в строке поиска, затем выберите “Формат документа”
- Выберите предпочтительный формат из доступных вариантов и нажмите “Настроить”
- Нажмите “Красивее – Средство форматирования кода” для форматирования кода.
В вашем документе будут соответствующие переносы строк, одинарные кавычки и интервалы. Этот процесс также будет работать с вашими файлами CSS.
Автоматическое форматирование документа в коде VS с помощью Prettier
- Откройте настройки кода VS. меню, нажав “Command + ,(запятая)” если вы используете Mac. Нажмите “Control + ,(запятая)”, если вы являетесь пользователем Windows.
- Перейдите к строке поиска и введите “Редактор: форматировать при сохранении&rdquo. ;
- Убедитесь, что он отмечен галочкой.
Prettier теперь настраивается автоматически и отформатирует ваш код, когда вы нажмете “Сохранить” Это обеспечит использование только одинарных кавычек. Длина строки также будет изменена на заданное количество символов. Эти изменения будут применены ко всем вашим проектам, что может быть не идеально, если вы работаете в команде. В этом случае вы можете установить переключатель форматирования Prettier, который позволит вам включать и выключать инструмент по мере необходимости.
Как настроить Prettier в VS Code
Есть несколько вариантов форматирования, которые Prettier использует по умолчанию. Однако вы также можете настроить параметры по своему вкусу. Например, вы можете выбирать между одинарными и двойными кавычками. Вы также можете выбрать, включать ли точку с запятой или нет. Вот как настроить параметры Prettier в VS Code.
- Перейдите к настройкам, нажав “Command + ,(запятая)” если вы используете Mac или “Control + ,(запятая)” для Windows.
- Найдите “Prettier” чтобы увидеть список отображаемых настроек.
- Вы можете изменить их в редакторе, а затем нажать “Сохранить” когда вы закончите.
Ваши настройки Prettier теперь настроены по вашему вкусу.
Форматирование документа в VS Code с помощью командной строки Prettier
Интерфейс командной строки Prettier (CLI) позволяет форматировать весь проект за один раз. Используя приведенную ниже командную строку, вы можете установить его с торговой площадки VS Code.
npm install prettier —global
Далее обновите текущий код с помощью показанной здесь команды.
prettier “*/.ts” —write
Все. Теперь ваш проект отформатирован с помощью интерфейса командной строки Prettier. Важно иметь в виду, что как бы ни было удобно использовать CLI, он может затруднить использование некоторых файлов. Например, доступ к файлам git fault, которые Prettier, возможно, уже были изменены, может быть затруднен.
Prettier одним нажатием кнопки
С Prettier вы можете легко создать простой и эффективный способ отформатировать код вручную. Вы также можете выбрать автоматическую оптимизацию своей работы при ее сохранении. Этот инструмент для экономии времени легко настроить в VS Code и позволяет вам больше сосредоточиться на главном.
Использовали ли вы Prettier в VS Code? Каков ваш опыт? Дайте нам знать в комментариях ниже.
Форматирование кода с помощью Prettier в Visual Studio Code
Форматирование кода – задача не из простых, но современные инструменты разработки позволяют автоматически поддерживать целостность кодовой базы вашего проекта.
Данный мануал научит вас использовать инструмент Prettier, который автоматически форматирует код в Visual Studio Code (или VS Code)
Для демонстрации мы возьмем такой фрагмент кода:
const name = «James»;
const person = >
console.log(person);
const sayHelloLinting = (fName) => console.log(`Hello linting, $`)
>
sayHelloLinting(‘James’);
Если вы знакомы с правилами форматирования кода, вы заметите несколько ошибок:
- Здесь одновременно используются двойные и одинарные кавычки.
- Первое свойство объекта person должно быть с ним в одной строке.
- Оператор console внутри функции должен иметь отступ.
- В стрелочной функции используются необязательные круглые скобки.
Требования
- Установка Visual Studio Code (загрузить пакет можно здесь)
- Расширение для работы с Prettier в Visual Studio Code. Для этого найдите Prettier – Code Formatter в панели расширений VS Code и нажмите кнопку install.
1: Команда Format Document
Установив расширение Prettier, вы можете использовать его для форматирования вашего кода. Для начала давайте рассмотрим команду Format Document. Эта команда сделает ваш код более последовательным по интервалам, переносам строк и кавычкам.
Чтобы открыть панель команд, нажмите Command+Shift+P в macOS или Ctrl+Shift+P в Windows.
В палитре команд найдите format, а затем выберите Format Document.
Затем панель может предложить вам выбрать формат, который нужно использовать. Для этого нажмите кнопку Configure.
Затем выберите Prettier – Code Formatter.
Примечание. Если панель не предложила вам выбрать формат по умолчанию, вы можете выбрать его вручную в Settings. Установите в Editor: Default Formatter значение ebsenp.prettier-vscode.
Теперь код будет отформатирован с учетом всех пробелов, переносов строк и правильных кавычек:
const name = ‘James’;
const person = < first: name >;
console.log(person);
const sayHelloLinting = (fname) => console.log(`Hello linting, $`);
>
sayHelloLinting(‘James’);
Это также работает для файлов CSS. Вы можете превратить код с неправильно расставленными скобками, точками с запятой и разбивкой на строки в хорошо отформатированный файл. Например, такой код:
Будет переформатирован так:
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. На вашем экране появятся все параметры Prettier, которые вы можете изменить.
Вот несколько параметров, которые меняют чаще всего:
- Single Quote: позволяет выбрать одинарные или двойные кавычки.
- Semi: указывает, следует ли включать точку с запятой в конце строк.
- Tab Width: указывает количество пробелов, которое нужно вставлять.
Главный недостаток встроенного меню конфигураций в VS Code – это то, что оно не обеспечивает согласованности настроек в вашей команде.
4: Создание конфигурационного файла Prettier
Даже если вы измените настройки Prettier в своем экземпляре VS Code, остальные разработчики в вашей команде могут использовать совершенно другую конфигурацию. Чтобы исправить эту ситуацию, можно установить для своего проекта последовательное форматирование с помощью конфигурационного файла.
Создайте новый файл .prettierrc.extension, указав вместо extension одно из следующих расширений:
Вот пример конфигурационного файла в формате JSON:
«trailingComma»: «es5»,
«tabWidth»: 4,
«semi»: false,
«singleQuote»: true
>
Более подробную информацию о конфигурационных файлах можно найти в документации Prettier. Создав один из таких файлов и протестировав его в своем проекте, вы можете убедиться, что все члены вашей команды применяют одинаковые правила форматирования.
Заключение
Поддерживать согласованность вашей базы кода очень важно. Это особенно полезно при совместной, командной работе над проектом. Согласовав список конфигураций, вы можете достичь с удобочитаемости и простоты кода. Тогда вы сможете посвятить больше времени решению сложных технических проблем.
Prettier обеспечивает согласованность кода и может форматировать его автоматически.