У каждого языка и фреймворка есть свои правила передового опыта, чтобы упростить жизнь разработчикам и избежать ошибок. Но не _’сойти с пути’_ вручную - непросто и становится невозможным, если в проект вовлечены несколько разработчиков / команд.

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

Веб-языки и Angular не являются исключением из этого правила и

для этого существуют различные инструменты. После поиска и некоторого тестирования, вот моя личная рекомендация по настройке принудительных мер «Lint» и «Форматирование кода».

Инструменты

Предлагаемые здесь инструменты делятся на две категории: ’CLI’ и ’Editor Plugins / Extensions’.

Инструменты CLI являются частью проекта (в package.json). Это означает, что его легко синхронизировать и применять во всех средах разработчика и развертываниях CI / CD.

Представленные здесь плагины редактора предназначены для постоянного редактора VSCode (мой личный фаворит). Они помогают вам оставаться на пути в режиме реального времени, пока вы пишете код.

Инструменты интерфейса командной строки:

Плагины VSCode:

tslint

tslint - это пакет, который анализирует ваш код Typescript в поисках точек, которые "нарушают правила передовой практики". Он поставляется с заранее настроенным набором правил для передовых практик в Typescript в целом.

Вам не нужно ничего делать, чтобы установить его. Он входит в состав любого нового проекта Angular, который вы создаете, когда вы запускаете команду `ng new`.

codelyzer и tslint-angular

Пакеты codelyzer и tslint-angular представляют собой набор правил для tslint, и они обеспечивают соблюдение передовых практик Angular, включая Руководство по стилю Angular. .

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

Чтобы установить tslint-angular:

npm install — save-dev tslint-angular

Затем отредактируйте tslint.json, чтобы расширить конфигурацию

{
“extends”: [“tslint:recommended”, “tslint-angular”],

Чтобы запустить ваш проект в соответствии с этими правилами, просто запустите:

ng lint

красивее и tslint-config-prettier

Prettier - это инструмент, обеспечивающий форматирование стиля кода. Это касается только формата отображения кода. Он не имеет ничего общего с операциями кода и проверками эффективности, которые выполняет tslint.

Чтобы установить его, запустите:

npm install — save-dev prettier

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

Чтобы установить его, запустите:

npm install — save-dev tslint-config-prettier

Затем отредактируйте файл tslint.json, чтобы применить конфигурацию

{
“extends”: [“tslint:recommended”, “tslint-angular”, “tslint-config-prettier”],

Вы также можете заменить некоторые более красивые правила своими собственными. Вы можете создать файл .prettierrc в корневой папке вашего проекта.

Вот мои предпочтительные правила:

.prettierrc

{
“tabWidth”: 4,
“singleQuote”: true
}

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

Вы также можете исключить определенные файлы из проверок prettier. Просто поместите файл конфигурации .prettierignore в корневую папку проекта. Вот мое предпочтение:

.prettierignore

package.json
package-lock.json
yarn.lock
dist

Чтобы вручную запустить красивее, просто введите:

npx prettier --write “**/*”

ВНИМАНИЕ! Параметр write напрямую изменяет ваши файлы. Наличие чистого состояния фиксации до того, как вы сделаете это, - хорошая идея, чтобы вы могли отменить любые изменения, которые не сработали (это может случиться).

Чтобы отформатировать только определенные типы файлов вашего проекта, вы можете запустить (например):

npx prettier --write “**/*.{ts, html}”

Вы также можете запустить его для определенных файлов. например.:

npx prettier --write “src/app/app.component.ts”

довольно быстро и хрипло

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

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

Приветственный пакет хаски. Это позволяет вам автоматически запускать ваш скрипт в таких хуках жизненного цикла git, как pre-commit и pre-push.

Но с другой стороны, повторный запуск этих проверок по всей кодовой базе каждый раз - пустая трата времени и ресурсов. И это портит коммиты.

Добро пожаловать, довольно быстро: он определяет, какие файлы были изменены, и позволяет применять более красивые исправления только к ним.

So:

Установите быстро:

npm install — save-dev pretty-quick

Установите хаски:

npm install — save-dev husky

Настройте хаски для запуска перед фиксацией. Добавьте следующее в package.json

“husky”: {
    “hooks”: {
        “pre-commit”: “pretty-quick — staged && ng lint”
    }
}

Итак, перед каждой фиксацией:

1. prettier отформатирует измененные файлы, автоматически обновит их.

2. Затем будет выполнен ng lint. Если код не соответствует правилам, фиксация будет остановлена.

В противном случае фиксация будет выполняться как обычно.

Плагины VSCode

Как мы упоминали ранее, гораздо эффективнее, если у вас есть вышеупомянутые проверки в режиме реального времени, пока вы пишете свой код. К счастью, для этого есть соответствующие плагины VSCode. Вот мои рекомендации.

TSLint и codelyzer

Он выполняет анализ tslint на основе редактируемых файлов. Просто установите плагин, и все готово для части tslint.

Для включения также правил codelyzer для VSCode: откройте Код ›Настройки› Пользовательские настройки и введите следующие строки:

{
    “tslint.rulesDirectory”: “./node_modules/codelyzer”,
    “typescript.tsdk”: “node_modules/typescript/lib”
}

Красивее

Он предложит корректировки формата кода в режиме реального времени. Он привязывается к команде Форматировать документ в VSCode - контекстное меню в содержимом файла, которое вы редактируете - и форматирует на основе ваших правил prettier весь документ, над которым вы работаете.

Плагины для Angular

Следующие плагины специфичны для Angular, и они также рекомендованы гуру Angular Джоном Папой.

И следующие тоже очень полезны.

Закрытие

Как уже говорилось выше, это личные рекомендации. Они не «высечены на камне», и я ожидаю, что некоторые из них со временем изменятся, когда я наткнусь на дела, требующие точной настройки. Я буду обновлять этот пост соответственно.

Удачного программирования на Angular!