Этот пост изначально был опубликован на 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, отличаются от того, что было зарегистрировано, сервер не выполнит сборку из-за этого. В зависимости от того, насколько агрессивно вы хотите его использовать, вы можете это сделать.

И так, чего же ты ждешь? Давай, установи красивее сейчас! И попрощайтесь с форматированием вручную. Позвольте машине сделать это за вас.

Кроме того, поделитесь этим постом, и пусть больше людей узнают о том, что красивее 😉