Недавно я клонировал проект Sitecore JSS с GitHub, надеясь создать свое собственное приложение JSS. Спустя всего несколько изменений кода появились ошибки. Я боялся худшего. 😱
Но на самом деле я не ввел ошибку, а написал некрасивый код. Мои строки были слишком длинными и с неправильными отступами. Мне не хватало запятых. Мой код был некрасивым. В проекте была установлена библиотека JavaScript Prettier, которая помечала код, не соответствующий руководству по стилю, как ошибку.
Написанный мной код функционировал правильно, но не соответствовал требованиям руководства по стилю, установленным сопровождающими проекта.
Давайте подробнее рассмотрим, что и почему Prettier, чтобы понять, почему так много проектов используют его!
Что такое Prettier?
💡 Prettier – это формирователь кода, основанный на мнениях.
Prettier – это библиотека JavaScript, созданная для того, чтобы помочь стилизовать ваш код последовательно во всем проекте. Она может помочь вам и вашей команде писать красивый код на JavaScript, TypeScript, CSS, HTML, JSON, GraphQL, в общем, на любой популярной технологии frontend. Однако Prettier предназначен не только для разработчиков фронтенда, в сообществе есть плагины, поддерживающие C#, Java, PHP и многое другое.
Чтобы получить максимальную отдачу от Prettier, вы также должны установить интеграцию редактора для вашего любимого редактора. С поддержкой Visual Studio Code, WebStorm, Atom, Visual Studio и других, я уверен, что он поддерживает ваш редактор.
Проект Sitecore JSS, который я клонировал, был с открытым исходным кодом и большим количеством участников, поэтому сопровождающим нужен был редактор кода, чтобы все входящие запросы на исправление соответствовали стилю остального кода.
💭 Вы можете подумать:
Заменяет ли Prettier мой Linter?
Нет. Prettier устанавливается для того, чтобы сделать ваш код красивым. Prettier не проверяет неиспользуемые переменные, не проверяет типы, не разрешает любые типы переменных. Для такого уровня проверки я рекомендую использовать ESLint вместе с Prettier для проектов на JavaScript и TypeScript.
Зачем использовать Prettier?
💡 Позвольте Prettier внедрить ваше руководство по стилю, а не ваши обзоры кода.
Prettier может устранить накладные расходы на руководство по стилю, автоматизировав его. Устраняет необходимость в обучении или даже обсуждении руководства по стилю. Размышления о руководстве по стилю уйдут в прошлое.
Вот еще несколько причин, по которым вы захотите использовать Prettier:
- Сокращение накладных расходов, связанных с необходимостью помнить о вашем руководстве по стилю.
- Конфигурация Prettier может быть размещена в системе контроля исходных кодов, поэтому ее легко распространить среди команды.
- Установить Prettier в существующую кодовую базу, чтобы помочь нормализовать код.
- Вы даже можете настроить Prettier на автоматическое форматирование при сохранении.
Позвольте Prettier автоматизировать ваше руководство по стилю.
⚡ Prettier в действии
Внутри VSCode я использовал сочетание клавиш быстрого исправления (Ctrl + .), чтобы увидеть, что я могу исправить ошибку ширины строки с помощью Prettier.
Хотите начать работу с Prettier?
📌 Лучшее место для начала работы – Prettier.io.
На сайте собрано огромное количество знаний. На игровой площадке вы можете попробовать Prettier онлайн в браузере или перейти к их документации, чтобы узнать, как добавить Prettier в свой проект.
Вы также можете перейти сюда, чтобы сразу перейти к шагам по установке и настройке Prettier в вашем проекте на JavaScript или TypeScript.