Вы когда-нибудь смотрели на свой код и думали: «Вау, это действительно беспорядок», точки с запятой здесь, квадратные и фигурные скобки там. Иногда мы кропотливо пытаемся очистить ситуацию, но кто хочет очистить 300 строк JavaScript (чаще всего он, вероятно, даже не был создан вами)?

Введите Prettier: Prettier - это просто средство форматирования JavaScript. Разработанный Джеймсом Лонгом, он поддерживает такие языки, как JavaScript (включая ES8), TypeScript, JSX, Flow, JSON, GraphQL и даже CSS.

«Зачем мне Prettier?»

Только по-человечески большинство людей даже не знают, что им нужно. Не считая случайных споров за обедом о том, сколько пробелов вы должны оставить перед точкой с запятой, где и где не делать отступы, и должны ли функции следовать в одной строке или нет.

Вот некоторые из причин, по которым вам понадобится Prettier:

  1. Очистка существующей базы кода. Итак, вас наняли в Startup X, вы познакомитесь с командой, и все будет хорошо, пока вам не дадут объем работы, о которой нужно позаботиться, и вы не потратите первую. час выясняет, что куда идет (безумно верно).
  2. Забота о новичках: каждый день многие люди принимают это решение, чтобы научиться программировать, они начинают свой путь к достойному проекту, пишут, скажем, 50 строк кода (беспорядочно и все такое) , а затем наткнулся на это потрясающее репо на GitHub с 6789 звездами. Из любопытства они решают взглянуть и натолкнуться на синтаксис, похожий на Lamborghini, припаркованный на подъездной дорожке. Для многих из этих новичков это пугает… «Буду ли я когда-нибудь таким?» - спрашивают они. Приятель, Prettier может купить тебе свой Lamborghini. 🏎
  3. Создание общепризнанного руководства по стилю. При всех спорах о том, какой стиль лучше, подходит только нам, если есть что-то, что задает стандарты? Стандарт, который мы все можем принять, то, чему мы можем доверять, и, самое главное, что-то, что остановит споры; потому что они зря тратят время.
  4. Написание кода. Мы хотим перестать тратить половину времени на добавление точек с запятой (да, 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 в наш редактор кода:

  1. В редакторе кода (Sublime Text) откройте командную строку (ctrl+shift+p). Перейдите к Управление пакетами: Установить пакет и найдите «JsPrettier».
  2. После установки пакета откройте командную строку еще раз, перейдите к «Настройки 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 и влюбился в него, мне просто нужно было поделиться.

Если у вас есть какие-либо мнения по этому поводу, я был бы рад их услышать. Ваше здоровье!