Prettier поможет вам внедрить хорошие стандарты форматирования кода, так почему бы не объединить его с VS Code для лучшего программирования во всех отношениях?
Написание чистого и читаемого кода необходимо независимо от того, работаете ли вы в одиночку или в команде разработчиков. Хотя на удобочитаемость кода влияет множество факторов, одним из наиболее важных является последовательное форматирование кода.
Но вот проблема: ручное форматирование кода может быть абсолютно болезненным и очень подвержено ошибкам. Такие инструменты, как Prettier, значительно упрощают форматирование HTML, CSS, JavaScript и других языков. Узнайте, как установить и использовать расширение Prettier для форматирования кода, а также некоторые дополнительные параметры конфигурации.
Установка красивее
Прежде чем продолжить, убедитесь, что на вашем компьютере установлен Node.js. Вы можете установить последнюю версию с официальная страница загрузки Node.js. Он поставляется с менеджер пакетов узла (npm) встроенный, который вы будете использовать для управления пакетами Node.js.
Убедившись, что Node.js установлен локально, начните с создания пустого каталога для вашего проекта. Вы можете назвать каталог красивее-демо.
Затем перейдите в этот каталог с помощью командной строки, затем выполните следующую команду, чтобы инициализировать проект Node.js:
инициализация npm -y
Эта команда создает файл package.json, содержащий настройки по умолчанию.
Чтобы установить расширение Prettier, выполните следующую команду терминала:
npm i --save-dev красивее
--save-dev флаг устанавливает красивее как зависимость от разработчиков, то есть он используется только во время разработки.
Теперь, когда он у вас установлен, вы можете приступить к изучению того, как работает Prettier, используя его в командной строке.
Использование Prettier через командную строку
Начните с создания script.js файл и заполнить его следующим кодом:
функциясумма(а, б) { возвращаться а + б }
константа пользователь = { имя: "Кайл", возраст: 27,
Программист: истинный,
длинный ключ: "Ценить",
большеДанные: 3
}
Чтобы отформатировать код в этом файле script.js через командную строку, выполните следующую команду:
npx красивее --написать script.js
Команда переформатирует код JavaScript в script.js в соответствии со стандартом Prettier по умолчанию. Это будет результат:
функциясумма(а, б) {
возвращаться а + б;
}
константа пользователь = {
имя: "Кайл",
возраст: 27,
Программист: истинный,
длинный ключ: "Ценить",
большеДанные: 3,
};
Вы также можете отформатировать HTML-разметку из командной строки. Создать index.html файл в том же каталоге, что и script.js. Затем вставьте в файл следующий плохо отформатированный HTML-код:
"" альт=""сорт="значок погоды большой">
сорт="ТекущаяВремяЗаголовка"><охватывать>21охватывать></div>
</div>
</header>
Чтобы отформатировать HTML, выполните эту команду:
npx красивее --написать index.html
Эта команда переформатирует HTML в соответствии со стандартом Prettier по умолчанию, что приводит к следующему коду:
<заголовок>
<див>
<изображениеисточник=""альтернативный=""сорт="значок погоды большой" />
<дивсорт="ТекущаяВремяЗаголовка"><охватывать>21охватывать>див>
див>
заголовок>
Вы также можете использовать --проверять флаг, чтобы проверить, соответствует ли код стандартам Prettier. Следующий пример проверяет script.js:
npx красивее --check script.js
Это полезно, если вам нужен хук перед фиксацией, чтобы убедиться, что люди используют Prettier и форматируют файлы перед отправкой их в Git. Это хорошо работает, когда вклад в открытый исходный код.
Интеграция Prettier в код Visual Studio
Использование Prettier через командную строку может быть проблемой. Вместо того, чтобы вручную запускать команду каждый раз, когда вы хотите отформатировать код, вы можете настроить его на автоматическое форматирование при изменении файла. К счастью, в Visual Studio Code (VS Code) есть встроенный способ сделать это за вас.
Перейти к Расширения вкладку в VS Code и найдите красивее. Нажмите на Prettier — средство форматирования кода, установите его, затем включите.
Перейдите в настройки VS Code, перейдя к Файл > Настройки > Настройки. В поле поиска найдите красивее. Вы найдете множество опций, которые помогут вам настроить расширение Prettier.
Обычно можно обойтись настройками по умолчанию. Единственное, что вы можете изменить, это точки с запятой (вы можете удалить их, если хотите). В противном случае все установлено по умолчанию, но вы можете изменить его по своему усмотрению.
Обязательно включите форматонсохранить параметр, чтобы код в каждом файле автоматически форматировался при сохранении этого файла. Чтобы включить его, просто найдите форматонсохранить и поставьте галочку.
Если вы не используете VSCode или расширение по какой-то причине не работает, вы можете скачать библиотеку onchange. Это запускает команду для форматирования кода каждый раз, когда вы изменяете файл.
Как игнорировать файлы при форматировании с помощью Prettier
Если бы вы должны были управлять красивее --писать во всей вашей папке, она будет проходить через каждый из ваших узловых модулей. Но вы не должны тратить время на форматирование чужого кода!
Чтобы обойти эту проблему, создайте .prettierignore файл и включить термин node_modules в файле. Если бы вы запускали --писать команду для всей папки, она переформатирует все файлы, кроме тех, что находятся в node_modules папка.
Вы также можете игнорировать файлы с определенным расширением. Например, если вы хотите игнорировать все файлы HTML, просто добавьте *.html к .prettierignore.
Как настроить красивее
Вы можете настроить, как вы хотите, чтобы Prettier работал с различными параметрами. Один из способов — добавить красивее ключ к твоему пакет.json файл. Значением будет объект, содержащий все параметры конфигурации:
{
...
"скрипты": {
"тест": "echo \"Ошибка: тест не указан\" && exit 1"
},
красивее: {
// здесь идут опции
}
}
Второй вариант (который мы рекомендуем) — создать .prettierrc файл. Этот файл позволит вам делать всевозможные настройки.
Допустим, вам не нравятся точки с запятой. Вы можете удалить их, поместив в файл следующий объект:
{
"полу": истинный,
"отменяет": [
{
"файлы": ".тс",
"параметры": {
"полу": ЛОЖЬ
}
}
]
}
отменяет Свойство позволяет вам определять пользовательские переопределения для определенных файлов или расширений файлов. В этом случае мы говорим, что все файлы, заканчивающиеся на .тс (то есть файлы машинописного текста) не должны иметь точки с запятой.
Использование Prettier с ESLint
ESLint — это инструмент для обнаружения ошибок в коде JavaScript, а также для его форматирования. Если вы используете Prettier, вы, вероятно, не захотите использовать ESLint для форматирования. Чтобы использовать их вместе, вам необходимо установить и настроить eslint-config-красивее. Этот инструмент отключает все конфигурации ESLint для вещей, с которыми Prettier уже справляется.
Во-первых, вам нужно установить его:
npm i --save-dev eslint-config-красивее
Затем добавьте его в список расширений в .eslintrc файл (убедитесь, что он последний в списке):
{
"расширяет": [
"какая-то другая конфигурация, которую вы используете",
"красивее"
],
"правила": {
"отступ": "ошибка"
}
}
Теперь ESLint отключит все правила, о которых Prettier уже заботится, чтобы предотвратить конфликты.
Очистите свою кодовую базу с помощью Prettier и ESLint
Prettier — идеальный инструмент для очистки вашего кода и обеспечения последовательного форматирования в проекте. Настройка его для работы с VS Code означает, что он всегда под рукой.
ESLint — обязательный инструмент JavaScript, который идет рука об руку с Prettier. Он предоставляет массу функций и параметров настройки, которые выходят за рамки базового форматирования. Узнайте, как использовать ESLint с JavaScript, если вы хотите стать более продуктивным разработчиком.
