Вы когда-нибудь смотрели на свой код и думали: «Вау, это действительно беспорядок», точки с запятой здесь, квадратные и фигурные скобки там. Иногда мы кропотливо пытаемся очистить ситуацию, но кто хочет очистить 300 строк JavaScript (чаще всего он, вероятно, даже не был создан вами)?
Введите Prettier: Prettier - это просто средство форматирования JavaScript. Разработанный Джеймсом Лонгом, он поддерживает такие языки, как JavaScript (включая ES8), TypeScript, JSX, Flow, JSON, GraphQL и даже CSS.
«Зачем мне Prettier?»
Только по-человечески большинство людей даже не знают, что им нужно. Не считая случайных споров за обедом о том, сколько пробелов вы должны оставить перед точкой с запятой, где и где не делать отступы, и должны ли функции следовать в одной строке или нет.
Вот некоторые из причин, по которым вам понадобится Prettier:
- Очистка существующей базы кода. Итак, вас наняли в Startup X, вы познакомитесь с командой, и все будет хорошо, пока вам не дадут объем работы, о которой нужно позаботиться, и вы не потратите первую. час выясняет, что куда идет (безумно верно).
- Забота о новичках: каждый день многие люди принимают это решение, чтобы научиться программировать, они начинают свой путь к достойному проекту, пишут, скажем, 50 строк кода (беспорядочно и все такое) , а затем наткнулся на это потрясающее репо на GitHub с 6789 звездами. Из любопытства они решают взглянуть и натолкнуться на синтаксис, похожий на Lamborghini, припаркованный на подъездной дорожке. Для многих из этих новичков это пугает… «Буду ли я когда-нибудь таким?» - спрашивают они. Приятель, Prettier может купить тебе свой Lamborghini. 🏎
- Создание общепризнанного руководства по стилю. При всех спорах о том, какой стиль лучше, подходит только нам, если есть что-то, что задает стандарты? Стандарт, который мы все можем принять, то, чему мы можем доверять, и, самое главное, что-то, что остановит споры; потому что они зря тратят время.
- Написание кода. Мы хотим перестать тратить половину времени на добавление точек с запятой (да, Prettier делает это), выяснение, сколько строк пространства оставить и все такое. В первую очередь мы хотим делать то, на что подписались, а именно писать код!
Начало работы с Prettier
Чтобы установить Prettier, все, что нам нужно сделать, это перейти в интерфейс командной строки (CLI) и сказать:
yarn global add prettier
Для тех из нас, кто этого еще не знает, Yarn - это менеджер пакетов или зависимостей для JavaScript. Вы можете посмотреть это здесь. После установки мы должны увидеть что-то подобное в нашем интерфейсе командной строки:
После установки мы можем просто проверить, какая у нас версия Prettier, набрав prettier -v
в нашем интерфейсе командной строки. На данный момент последней версией является 1.5.2
Использование Prettier в наших файлах
Допустим, у нас действительно есть испорченный файл weather-app.js
. Это почти корзина, без точек с запятой, плохих отступов… что угодно. Мы собираемся исправить все это с помощью Prettier.
Перейдем в папку проекта, содержащую weather-app.js
:
Что мы сейчас сделаем, так это передадим Prettier некоторые параметры того, как мы хотим, чтобы наш код был отформатирован, набрав в нашем CLI:
prettier --single-quote --print -width=120 weather-app.js
Мы получим предполагаемый синтаксис, вот как должен выглядеть наш код.
Довольно блестящий, правда? Чтобы реализовать это в нашем коде, мы добавим команду --write
к параметрам, которые мы ранее указали Prettier.
Синтаксис теперь будет таким:
prettier --single-quote --print -width=120 --write weather-app.js
И вуаля! 💫 Наш беспорядочный код отформатирован:
Но эй, нам не нужно открывать терминал и отбрасывать фрагменты команд каждый раз, когда мы хотим отформатировать наш код, это сделало бы Prettier больше неудобством, чем инструментом. По этой причине мы собираемся интегрировать Prettier с нашим редактором; он будет запускаться автоматически при сохранении, что сделает его очень простым.
Вы увидите интеграцию с Sublime Text. Чтобы узнать, как интегрировать Prettier в другие редакторы, перейдите здесь.
Интеграция Prettier в ваш редактор кода
Одно из ограничений Prettier, о котором следует помнить, заключается в том, что у него нет хорошего способа запуска конфигураций на уровне проекта… пока. С учетом сказанного, приступим к интеграции Prettier в наш редактор кода:
- В редакторе кода (Sublime Text) откройте командную строку (
ctrl+shift+p
). Перейдите к Управление пакетами: Установить пакет и найдите «JsPrettier». - После установки пакета откройте командную строку еще раз, перейдите к «Настройки JsPrettier - Пользователь». Откроются ваши личные настройки, и вы должны увидеть что-то вроде этого:
3. В первом значении prettier_cli_path
мы укажем, где находится Prettier. Все, что нам нужно сделать, это перейти в наш интерфейс командной строки и ввести: which prettier
.. Затем мы скопируем полученный путь и присвоим его нашему значению.
4. На node_path
мы сделаем то же, что и на предыдущем шаге, только на этот раз мы введем: which node
5. Измените "auto_format_on_save"
на true
.
Можно изменить любое значение в prettier_options
по своему вкусу, за исключением значения parser
. Рекомендуется использовать flow
вместо babylon
, так как аннотации типов будут полезны, если вы используете первое, тогда как второе имеет небольшие несоответствия.
Чтобы узнать больше о том, какие параметры выбрать, перейдите к «Настройки JsPrettier - По умолчанию» вместо «Настройки JsPrettier - Пользователь».
Но что, если кто-то хочет работать над вашим уже отформатированным проектом, а этот человек не хочет устанавливать Prettier. Эта последовательность команд, передаваемых нашему интерфейсу командной строки, решит проблему:
Перейдите в каталог, в котором находятся папки проекта, и введите:
Это отформатирует любые файлы с расширениями .js
внутри папки js-files
. Чтобы проверить, действительно ли файлы были отформатированы, нам нужно немного подправить команду, удалив открывающую и закрывающую обратную косую черту.
Обратите внимание на список файлов, выделенный серым цветом? Это означает, что они отформатированы. Все файлы, которые не были отформатированы, будут белыми.
Эта последовательность действительно полезна в том смысле, что это своего рода выход для пользователей, которые хотят работать с Prettier, но не хотят устанавливать ее в своем редакторе кода.
Итак, у вас есть чистый код! Как я уже сказал, Prettier - это новый инструмент, разработанный Джеймсом Лоном g. Я наткнулся на него на Github и влюбился в него, мне просто нужно было поделиться.
Если у вас есть какие-либо мнения по этому поводу, я был бы рад их услышать. Ваше здоровье!