Сохранение чистоты кода с помощью красивее

Дядя Влад

Форматирование кода кажется тривиальным вопросом, но это то, что может повлиять на качество и правильность вашего кода, на то, как он контролируется версиями и как вы взаимодействуете с другими. Однако, если вы не хотите увязнуть в деталях, где находится каждая последняя скобка, попробуйте передать проблему на аутсорсинг инструменту с открытым исходным кодом Prettier.

Вопросы форматирования

Команды разработчиков программного обеспечения потратили бесчисленное количество часов на всю историю, споря о максимальной длине строки или о том, на какой строке должна стоять скобка. Что бы ни говорили личные предпочтения, большинство людей согласны по крайней мере в одном: форматирование кода должно быть единообразным для всего проекта.

Prettier – инструмент, предназначенный для этого. Дайте ему некоторый код, и он вернет тот же код, отформатированный согласованным образом. Prettier имеет интеграцию с текстовым редактором, инструмент командной строки и онлайн-демонстрацию.

Говорить на правильном языке

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

  • JavaScript
  • HTML
  • CSS
  • Sass
  • Markdown
  • YAML

Также есть открытая поддержка дополнительных языков через плагины.

Попробуйте красивее на игровой площадке в Интернете

Прежде чем даже пытаться установить Prettier, вы можете проверить игровую площадку . Используя веб-интерфейс, вы можете вставить пример кода и посмотреть, как Prettier преобразует его. Это отличный способ получить представление о том, что на самом деле делает инструмент, но он также может выступать в качестве основного метода использования Prettier, если ваши требования не столь велики.

По умолчанию игровая площадка должна выглядеть как две основные панели текстового редактора: одна слева для ввода, а другая справа – для вывода Преттье. Сначала вы увидите образец кода, но вы можете просто удалить все это и вставить свой собственный.

Например, попробуйте ввести следующий код JavaScript:

 (function ()
 {
 window.alert('ok')
 }())

Prettier должен превратить его в:

 (function () {
 window.alert("ok");
 })();

Обратите внимание, что по умолчанию Prettier вносит следующие изменения:

  • Преобразование строк в одинарных кавычках в двойные кавычки
  • Добавление точек с запятой
  • Преобразование отступов в два пробела

В левом нижнем углу находится кнопка, позволяющая просматривать параметры. В предыдущем примере попробуйте отрегулировать ширину табуляции, переключить флаг –single-quote в разделе Common или переключить флаг –no-semi в JavaScript .

Параметры настройки

Prettier описывается как «самоуверенный», преднамеренный выбор дизайна, который означает, что контроль над особенностями принесен в жертву простоте и последовательности. Он разработан для того, чтобы вы настроили его, а затем забыли об этом, а не занимались всеми последними деталями форматирования вашего кода. (В качестве альтернативы с гораздо более детальным контролем над каждой последней деталью форматирования попробуйте eslint .)

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

Лучший способ управлять параметрами Prettier – сохранить их в файле конфигурации. Есть много способов организовать это, но начните с создания файла с именем .prettierrc.json в локальном каталоге проекта. Он может содержать любые поддерживаемые параметры в стандартном объекте JSON, например

 {
 "tabWidth": 8
 }

Prettier прочитает один и тот же файл конфигурации независимо от того, запускаете ли вы его через командную строку или поддерживаемый текстовый редактор.

Базовая установка и инструмент командной строки

Используя пряжу или npm, установка должна быть простой. Для пряжи:

 $ yarn global add prettier

И для npm:

 $ npm install --global prettier

После того, как вы установили Prettier глобально, вы сможете ввести:

 $ prettier

По умолчанию вы увидите экран с текстом справки, который подтвердит, что инструмент установлен и работает правильно.

Очистка файла

Чтобы переформатировать файл, используйте команду, похожую на:

 $ prettier --write filename.js

При этом будет перезаписан исходный файл, что часто является наиболее удобным подходом. В качестве альтернативы вы можете просто захотеть, чтобы prettier действовала для каждого файла в проекте:

 $ prettier --write .

Prettier будет работать со всеми файлами в текущем каталоге, форматируя все те, которые он распознает.

Вы также можете распечатать результат в стандартном выводе, а не изменять исходный файл, что позволяет вам сохранить вывод в другой файл или перенаправить его в другое место:

 $ prettier test.js > test2.js

Проверка файла

Чтобы Prettier сообщал о чистоте вашего кода без фактического внесения каких-либо изменений, используйте флаг –check для одного или нескольких файлов:

 $ prettier --check .

Вы получите строку вывода для каждого файла, который не соответствует ожидаемому формату, в соответствии с конфигурацией Prettier:

 Checking formatting...
 [warn] .prettierrc
 [warn] .prettierrc.json
 [warn] Code style issues found in the above file(s). Forgot to run Prettier?

Параметры командной строки

Стандартные параметры Prettier доступны как параметры командной строки, если они вам требуются. Вот пример того, как флаг –single-quote влияет на вывод:

 $ prettier tmp.js
 function example() {
 console.log("hello, world");
 }
 $ prettier --single-quote tmp.js
 function example() {
 console.log('hello, world');
 }

Получать помощь

Инструмент командной строки предоставляет информативную справку по любому параметру с помощью флага –help :

 $ prettier --help trailing-comma
 --trailing-comma <es5|none|all>
 Print trailing commas wherever possible when multi-line.
 Valid options:
 es5 Trailing commas where valid in ES5 (objects, arrays, etc.)
 none No trailing commas.
 all Trailing commas wherever possible (including function arguments).
 Default: es5

Использование текстового редактора

После того, как вы установили Prettier, вы можете использовать его в различных сценариях, в зависимости от того, какой набор инструментов вы уже используете. Скорее всего, вы используете текстовый редактор. У Prettier есть привязки для большинства популярных, поэтому вот как настроить три из них:

Возвышенный текст

JsPrettier – это плагин Sublime Text, который делает Prettier доступным в редакторе. Хотя существует несколько различных способов установки JsPrettier, мы рекомендуем использовать метод управления пакетами. Вам нужно будет уже установить Prettier, затем открыть палитру команд Sublime Text и выбрать «Package Control: Install Package»:

Затем найдите «jsprettier» и щелкните, чтобы установить его:

После установки JsPrettier вы можете щелкнуть правой кнопкой мыши любой открытый файл, чтобы отформатировать его. Вы также можете установить для параметра auto_format_on_save значение true в настройках JsPrettier, что приведет к тому, что JsPrettier автоматически очистит все совместимые файлы, когда вы сохраните их в Sublime Text.

Атом

Установка для Atom очень похожа на Sublime Text: просто используйте встроенный в редактор менеджер пакетов, чтобы установить prettier-atom :

После установки использование привычно: ярлык или пункт меню позволяют форматировать файл по запросу, а настройка Atom позволяет автоматически запускать Prettier при сохранении файла.

Vim

Vim – очень мощный редактор на основе командной строки, который не подходит для начинающих. Получить Prettier для работы с vim достаточно сложно, но это всего лишь несколько шагов:

 mkdir -p ~/.vim/pack/plugins/start
 git clone https://github.com/prettier/vim-prettier 
 ~/.vim/pack/plugins/start/vim-prettier

Git – это, вероятно, самый простой способ загрузить необходимые файлы, но любые средства, позволяющие получить vim-prettier в этом стартовом каталоге, должны работать.

После установки Prettier будет автоматически запускаться при сохранении файла в vi. Его также можно запустить вручную в любое время с помощью команды Prettier :

В результате должен получиться очищенный файл:

Интегрируйте Prettier в свой проект

Использование средства форматирования кода, такого как Prettier, может помочь поддерживать кодовую базу, которую легче читать. Это также может помочь обойти споры о том, какой именно стиль использовать при кодировании – просто передайте эти решения Prettier!

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