Этот пост изначально был опубликован на www.wisdomgeek.com
Если вы какое-то время занимались программированием, вы были бы знакомы с трудностями написания чистого кода и поддержания согласованности в проекте с некоторыми конкретными рекомендациями по стилю кода. Даже если вы потратите несколько дней на согласование всего, какой-нибудь другой разработчик может зарегистрировать свои изменения или отключить какой-либо флаг, чтобы быстро ввести свой код.
Тратить время на форматирование кода - монотонная задача, и Prettier был разработан для решения этой проблемы, связанной с потерей времени на это. Таким образом, это поможет вам преодолеть усталость от форматирования с помощью очень простой настройки.
Что делает Prettier?
Prettier - это самоуверенный редактор кода, который автоматизирует процесс форматирования всей кодовой базы. Итак, после настройки prettier вам больше не нужно спорить с коллегами о правилах форматирования кода, точках с запятой, переносах строк и т. Д. Он принимает весь ваш код, удаляет все форматирование и переформатирует код в соответствии с его руководящими принципами стиля.
Под капотом весь код javascript преобразуется в абстрактное синтаксическое дерево, а затем снова форматируется. Таким образом, это гарантирует, что в написанный код не будет никаких критических изменений. Для вас все форматируется волшебным образом, и вам не о чем беспокоиться.
Например:
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
конвертируется в
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);
Если вы хотите покататься на нем, поиграйте с ним на игровой площадке. Подвести итог:
Но у меня уже есть ESLint!
Это один из наиболее часто задаваемых вопросов, и краткий ответ заключается в том, что ESLint - это инструмент для повышения качества кода (без неиспользуемых переменных, без глобальных переменных, предпочтение обещаний и т. Д.). С другой стороны, Prettier заботится только о форматировании файла (максимальная длина, смешанные табуляции и пробелы, стиль кавычек и т. Д.). Вы можете интегрировать prettier с ESLint, чтобы получить беспроигрышную комбинацию.
А что с Editorconfig?
Более красивая версия 1.9 читает из editorconfig, если он присутствует. Соблюдаются следующие свойства: indent_style, indent_size / tab_width и max_line_length.
Как мне это настроить?
Как уже упоминалось, Prettier автоматизирует процесс форматирования всей кодовой базы. Вы можете использовать Prettier на следующих уровнях:
- Плагины редактора
- CLI
- Хуки перед фиксацией
Редакторам
Чтобы установить его в свою IDE / Editor, перейдите на страницу интеграции на сайте и загрузите соответствующий плагин. Это должен быть довольно простой процесс. Для Visual Studio Code его просто нужно было загрузить с торговой площадки. После этого я ввел предпочтение в своих пользовательских настройках ("editor.formatOnSave": true
). И это просто сработало! (У меня также есть "prettier.singleQuote": true
, так как я предпочитаю это. Здесь также можно установить другую конфигурацию уровня редактора.
Для проектов
Сначала вам нужно установить более красивый интерфейс командной строки. Мы добавим это как зависимость разработчика. (yarn add prettier --dev --exact
или npm install --save-dev --save-exact prettier
). Prettier рекомендует установить точную версию в вашем проекте, поскольку они имеют тенденцию вносить стилистические изменения в выпуски исправлений. После успешной установки для запуска с конкретным файлом все, что вам нужно сделать, это запустить команду yarn prettier --write index.js
. При этом файл index.js будет напечатан на его месте.
Вы можете настроить другие параметры, с которыми хотите работать красивее, но обычно для этого используется файл конфигурации. Их можно добавить в файл .prettierrc в корневой папке вашего проекта. Доступные опции можно найти на сайте.
Затем вы можете добавить эту команду в свои сценарии NPM, передавая ее в папку src как глобус вместо одного файла. Скрипт форматирования будет выглядеть так: prettier --write './src/**/*.{ts,js,css,json}'
Вы можете указать здесь параметры, используя аргументы командной строки, если вы не используете несколько из них, или использовать файл .prettierrc.
И затем вы можете вызвать это как часть вашего шага сборки. И это внесет все изменения на свои места.
Вы можете сделать еще один шаг и интегрировать prettier в проект как хук перед фиксацией. Для этого вам нужно будет установить хаски вместе с lint-staged / pretty-quick. (Используйте lint-staged, если вы используете другие инструменты поверх prettier, такие как ESLint.) После установки этих пакетов в качестве зависимостей dev от NPM вы можете добавить следующую конфигурацию в свой файл package.json:
Для довольно быстрого :
"scripts": { "precommit": "pretty-quick --staged" }
Для безворсовых:
"scripts": {
"precommit": "lint-staged",
"lint-staged": {
"*.{ts,js,css,json}": [ "prettier --write", "git add" ]
}
}
Обратите внимание, что когда вы выполняете prettier в качестве хука перед фиксацией, он ломает промежуточные блоки. Обходной путь (предложенный на Reddit gocarsno) - спрятать все неустановленные изменения перед фиксацией (git stash -k
)
Вы можете пойти еще дальше, добавив еще одну проверку на этапе сборки вашего проекта. Facebook делает этот шаг, и я видел, как один из сотрудников упомянул об этом во время выступления на конференции. Вы можете запустить prettier на сервере CI / CD для файлов, и если файлы, выводимые с помощью prettier, отличаются от того, что было зарегистрировано, сервер не выполнит сборку из-за этого. В зависимости от того, насколько агрессивно вы хотите его использовать, вы можете это сделать.
И так, чего же ты ждешь? Давай, установи красивее сейчас! И попрощайтесь с форматированием вручную. Позвольте машине сделать это за вас.
Кроме того, поделитесь этим постом, и пусть больше людей узнают о том, что красивее 😉