Расширение 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 в 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 обеспечивает согласованность кода и может форматировать его автоматически.
Prettier и как работают сниппеты: улучшение качества кода и продуктивности в разработке
В мире веб-разработки каждая строка кода имеет значение. Эффективная и продуктивная разработка требует не только глубокого знания языков разметки и стилей, таких как HTML и CSS, но и инструментов, которые помогут улучшить качество кода и увеличить скорость работы. В этой статье мы рассмотрим инструмент Prettier и его интеграцию с сниппетами, которые сделают вашу жизнь разработчика намного проще.
Если вы еще не начали карьеру в IT, приходите на наш бесплатный вебинар, чтобы узнать, как начать зарабатывать с помощью зерокодинга и нейросетей!
Что такое Prettier
Prettier – это инструмент для форматирования кода, который призван облегчить жизнь разработчиков. Его главная цель — поддерживать чистоту и структурированность вашего кода, делая его более читаемым и поддерживаемым. Prettier работает с различными языками программирования, но мы сосредоточимся на его использовании в контексте HTML и CSS.
Как работает
Он анализирует ваш код и автоматически применяет правила форматирования, которые вы определили. Он может выравнивать отступы, удалять или добавлять пробелы, определять стиль расстановки фигурных скобок и многое другое. Это освобождает разработчика от необходимости вручную форматировать каждую строку кода и сосредотачиваться на более важных задачах.
Как настроить
Чтобы начать использовать Prettier, вам нужно установить его как расширение в вашем редакторе кода. Один из популярных редакторов, Visual Studio Code (VSCode), поддерживает Prettier напрямую через расширение. После установки расширения, вы можете настроить правила форматирования в файле настроек для вашего проекта.
В приведенном выше примере мы определили три основных правила: ширину табуляции (2 пробела), использование одинарных кавычек и добавление точек с запятой в конце строк.
Использование в VSCode
Вы можете форматировать свой код, используя сочетание клавиш или контекстное меню. Просто выберите фрагмент кода и нажмите `Shift + Alt + F` (или выберите «Format Document» в контекстном меню). Prettier автоматически применит настройки форматирования к выделенному фрагменту или всему документу.
Что такое сниппеты
Сниппеты — это фрагменты кода, которые можно быстро вставить в ваш документ с помощью коротких ключевых слов или аббревиатур. Они значительно ускоряют процесс написания кода, уменьшая необходимость вручную вводить одни и те же фрагменты снова и снова.
Как работают
Подход к использованию сниппетов может различаться в зависимости от вашего редактора кода. В VSCode, например, вы можете создать собственные сниппеты или использовать готовые из библиотеки сниппетов. При вводе аббревиатуры сниппета и нажатии клавиши `Tab`, код будет автоматически заменен на соответствующий фрагмент.
Пример сниппета для HTML в VSCode
Давайте рассмотрим простой пример сниппета для создания элемента HTML. Создайте новый сниппет или добавьте его в файл существующих сниппетов в настройках VSCode:
«description»: «Create HTML Element»
В этом сниппете мы создали аббревиатуру `html`. Когда вы вводите `html` и нажимаете `Tab`, он будет заменен на `<>`, где `$1` и `$2` — это местоположения для вставки вашего элемента и его содержимого.
Применение в разработке
Сниппеты могут быть крайне полезными в разработке веб-страниц и при работе с фреймворками, такими как React. Они позволяют быстро создавать компоненты, элементы интерфейса и другие
структурные элементы кода. Это сокращает время разработки и снижает вероятность ошибок.
Интеграция Prettier и сниппетов
Использование Prettier и сниппетов вместе может значительно повысить вашу производительность и качество кода. Вы можете легко создавать сниппеты для типовых структурных элементов кода, а затем форматировать их с помощью Prettier для обеспечения соответствия вашим стандартам кодирования.
Пример
Допустим, у вас есть сниппет для создания компонента React. Вы можете определить структуру компонента в сниппете и использовать Prettier для форматирования этого компонента, чтобы он выглядел красиво и соответствовал вашим стандартам.
Заключение
Prettier и сниппеты – это мощные инструменты, которые могут улучшить ваш опыт веб-разработки. Prettier помогает поддерживать код в хорошей форме, а сниппеты ускоряют процесс написания кода. Их интеграция может значительно улучшить вашу продуктивность и качество кода. Не забывайте настраивать Prettier под свои нужды и создавать сниппеты, которые сэкономят ваше время.
Форматирование кода с Prettier — установка, настройка, конфиг
Prettier это утилита для автоматического форматирования кода. И вот несколько вещей которые вы получите, внедрив его на свой проект или как личный инструмент.
В рамках проекта prettier позволяет без лишних телодвижений получить общий стиль кода во всем проекте. Код ревью будут проходить быстрее т.к. большая часть вопросов о форматировании автоматически отпадет.
Также prettier дает возможность с помощью одной команды автоматически отформатировать определенную часть или весь код проекта за раз. Это может быть очень удобно на старых проектах, на которых по каким-то причинам не было четких правил по оформлению кода. Исправить в ручную 100+ файлов будет очень затратно по времени, а 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
Размер табуляции (в пробелах).
Использовать табы вместо пробелов.
По умолчанию: false
Автоматически добавлять точки с запятой в конце каждого оператора.
По умолчанию: true
singleQuote
Использовать одинарные кавычки, где это возможно. Игнорируется в JSX.
По умолчанию: false
jsxSingleQuote
Использовать одинарные кавычки вместо двойных в JSX.
По умолчанию: false
trailingComma
Ставить запятые в конце многострочных структур, разделяемых запятыми.
- es5 только для объектов, массивов и прочих структур данных
- none не использовать завершающие запятые
- all ставить запятые везде, где это возможно (например в параметрах функций)
По умолчанию: «es5»
arrowParens
Оборачивать в скобки единственный параметр стрелочной функции.
- always всегда добавлять скобки
- avoid добавлять скобки только когда это обязательно
По умолчанию: «always»
На этом основные настройки можно закончить, т.к. дальше идут очень узконаправленные параметры. Примерно так будут выглядеть большинство конфигов для prettier которые вы встретите.
.prettierrc
"printWidth": 80, "tabWidth": 2, "useTabs": true, "singleQuote": false, "jsxSingleQuote": false, "endOfLine": "lf" >�� К сведенью!
Prettier будет пытаться подгрузить параметры для printWidth, tabWidth, useTabs и endOfLine из файла настроек редактора .editorconfig если он есть в вашем проекте.
В случае конфликта предпочтение будет отдано настройкам из конфига .prettierrc.