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

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

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

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

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

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

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

• JavaScript
• HTML
• CSS
• Sass
• Уценка
• YAML

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

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

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

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

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

(функция ()
{
window.alert ('хорошо')
}())

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

(функция () {
window.alert ("ок");
})();

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

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

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

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

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

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

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

{
"tabWidth": 8
}

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

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

$ yarn global добавить красивее

И для npm:

$ npm install --global prettier

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

$ красивее

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

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

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

$ prettier --write filename.js

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

$ prettier - написать.

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

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

$ красивее test.js> test2.js

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

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

$ prettier --check.

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

Проверка форматирования ...
[предупредить] .prettierrc
[предупреждение] .prettierrc.json
[предупреждение] В указанном выше файле (ах) обнаружены проблемы со стилем кода. Забыли запустить Prettier?

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

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

$ prettier tmp.js
function example () {
console.log ("привет, мир");
}
$ prettier - single-quote tmp.js
function example () {
console.log ('привет, мир');
}

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

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

$ prettier --help завершающая запятая
- конечная запятая 
Печатайте запятые, если это возможно, если они многострочные.
Допустимые варианты:
es5 Завершающие запятые, если они допустимы в ES5 (объекты, массивы и т. д.)
нет Запятых в конце нет.
все конечные запятые везде, где это возможно (включая аргументы функций).
По умолчанию: es5

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

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

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

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

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

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

Атом

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

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

Vim

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

mkdir -p ~ / .vim / pack / plugins / start
git clone https://github.com/prettier/vim-prettier \
~ / .vim / pack / плагины / старт / vim-prettier

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

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

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

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

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

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

нано vs. Vim: по сравнению с лучшими текстовыми редакторами терминалов

Ищете текстовый редактор терминала для Linux? Главный выбор - между Vim и nano! Вот как они сравниваются.

Об авторе