Угловой

Настройте Prettier для Angular за 30 минут

Руководство по установке Prettier и добавлению его в ловушку перед фиксацией для Angular.

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

  1. Что красивее?
  2. Установить Prettier
  3. Написать сценарий
  4. Код автоформатирования с помощью Pre-commit Hook

Примечание. Я написал эту историю на основе того, как недавно установил Prettier для моего нового проекта Angular 9.

Что красивее?

Prettier - самоуверенный редактор кода с поддержкой многих языков.

Вот эта история, мы установим ее для форматирования TypeScript, HTML, SCSS.

Причина, по которой мы ДОЛЖНЫ иметь эту замечательную библиотеку в вашем проекте, заключается в том, что мы можем убедиться, что в нашем коде есть только одно и уникальное руководство по стилю в проекте.

Установить Prettier

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

npm install --save-dev --save-exact prettier

и создайте файлы prettierrc.json и .prettierignore.

Но в этой истории я установлю эту библиотеку в проект Angular 9 немного иначе.

НАЧАТЬ !!!!

Сначала запустите эту команду

npm i -D prettier

Во-вторых, создайте файл. prettierrc, чтобы редакторы и другие инструменты знали, что вы используете Prettier.

Наконец, создайте .prettierignore

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

Запустить скрипт

Есть 2 скрипта, которые мы часто используем в проекте:

  1. проверьте, не имеет ли файл стандартного формата
  2. форматировать файлы

Проверьте, не имеет ли файл стандартного формата

Мы добавляем этот скрипт ниже в package.json и называем его как хотите.

Эта команда будет делать 3 вещи:

  • применить конфигурацию для файла. prettierrc.
  • проверять файлы только в папке app и environment.
  • проверьте файлы с расширениями: .ts, .html, .scss.

Вам просто нужно обновить имя папки + расширение файла, который вы хотите отформатировать в этом скрипте.

Форматирование файлов

Этот скрипт будет делать 3 вещи:

  • применить конфигурацию для файла. prettierrc.
  • форматировать файлы только в папке app и environment.
  • форматируйте файлы с расширениями: .ts, .html, .scss.

Код автоматического форматирования с помощью Pre-commit Hook

Вам не нужно будет запускать скрипт вручную каждый раз, когда вы фиксируете код, установив Husky.

Эта библиотека может помочь вам во многих вещах, и в этом разделе я буду использовать ее для форматирования кода до того, как произойдет фиксация кода.

Что тебе необходимо сделать:

npm i -D husky

Добавьте Husky в package.json

Надеюсь, эта статья оказалась для вас полезной! Вы можете следить за мной на Medium. Я тоже в Твиттере. Не стесняйтесь оставлять любые вопросы в комментариях ниже. Буду рад помочь!