В этом уроке мы будем устанавливать Prettier & Husky, чтобы помочь нам с форматированием кода. Когда мы начали переходить на Angular, нам нужно было во многом разобраться, и мы хотели не тратить время на изменения форматирования. Итак, мы немного исследовали и нашли две замечательные библиотеки. После более чем 10 000 коммитов мы так и не попросили никого исправить форматирование их кода в канале проверки кода благодаря этим замечательным дуэтам.
Прежде чем мы начнем, выполните шаги по настройке с веб-сайта Angular, чтобы запустить стартовое приложение. Мы будем включать маршрутизацию по умолчанию и использовать SCSS. Угловая установка
Теперь, когда у нас запущено приложение Welcome, давайте добавим в наше приложение автоформатирование.
красивее
Prettier — это упрямый форматировщик кода, который мы будем использовать для форматирования нашего кода Typescript. Он анализирует код и форматирует на основе заранее определенных правил. Мы начнем с добавления Prettier в наш проект, а позже мы переопределим некоторые правила, чтобы они соответствовали нашим потребностям.
# Install Prettier as dev-dependency $npm install prettier -D
После успешной установки добавьте приведенные ниже строки в свойство scripts в файле `package.json` вашего проекта.
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“prettier:base”: “prettier — parser typescript — single-quote”,
“prettier:check”: “npm run prettier:base — — list-different \”src/**/*.{ts,tsx}\””,
“prettier:write”: “npm run prettier:base — — write \”src/**/*.{ts,tsx}\””
},
Протестируйте: откройте файл app.component.ts.
Неформат:
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent {
title = ‘levanteq’;
testPrettier(reallyLongArg, omgSoManyParameters, IShouldRefactorThis, isThereSeriouslyAnotherOne) {
const isTooFarFromBoundary = true;
}
}
Беги красивее:
$npm run prettier:write
Отформатировано:
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent {
title = ‘levanteq’;
testPrettier(
reallyLongArg,
omgSoManyParameters,
IShouldRefactorThis,
isThereSeriouslyAnotherOne
) {
const isTooFarFromBoundary = true;
}
}
Это волшебно!!
Если вы хотите переопределить стиль, вы можете сделать это, просто добавив файл `.prettierrc` параллельно с файлом package.json. Вот пример из нашего приложения.
{
“printWidth”: 120,
“singleQuote”: true,
“useTabs”: false,
“tabWidth”: 2,
“semi”: true,
“bracketSpacing”: true
}
Хаски
Husky предоставляет нам хук перед фиксацией, поэтому нам не нужно делать это вручную. Каждый раз, когда вы совершаете коммит, он форматирует код за вас, запуская Prettier. Давайте установим хаски как dev-зависимость.
$npm install husky -D
Создайте файл с именем `.huskyrc` и добавьте его параллельно файлу package.json. Добавьте к нему ниже.
{
“hooks”: {
“pre-commit”: “npm run prettier:write”
}
}
Вы можете проверить это сейчас, когда вы фиксируете свой код, ваш код будет отформатирован.
Бонус:
Попробуйте `pretty-quick` для форматирования только промежуточных файлов.
npm install pretty-quick -D
Удалите более красивые скрипты из package.json и добавьте ниже `format:fix`
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“format:fix”: “pretty-quick — staged”
},
Обновите .huskyrc следующим образом: `run-s` будет запускать команды последовательно. Теперь, если вы зафиксируете свои изменения, он сначала отформатирует их, а затем отформатирует.
{
“hooks”: {
“pre-commit”: “npm run-s format:fix lint”
}
}
В части 2 мы настроим тему Angular с помощью Glitch.
