Угловой
Настройте Prettier для Angular за 30 минут
Руководство по установке Prettier и добавлению его в ловушку перед фиксацией для Angular.
В этой статье я хочу поделиться тем, как настроить Prettier для Angular, чтобы он работал только в определенной папке и чтобы ваш код выглядел хорошо.
- Что красивее?
- Установить Prettier
- Написать сценарий
- Код автоформатирования с помощью 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 скрипта, которые мы часто используем в проекте:
- проверьте, не имеет ли файл стандартного формата
- форматировать файлы
Проверьте, не имеет ли файл стандартного формата
Мы добавляем этот скрипт ниже в 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. Я тоже в Твиттере. Не стесняйтесь оставлять любые вопросы в комментариях ниже. Буду рад помочь!