У каждого языка и фреймворка есть свои правила передового опыта, чтобы упростить жизнь разработчикам и избежать ошибок. Но не _’сойти с пути’_ вручную - непросто и становится невозможным, если в проект вовлечены несколько разработчиков / команд.
Наличие набора инструментов для применения этих передовых методов в максимально автоматическом режиме является одной из «базовых» подготовительных работ, которые каждый проект должен иметь перед тем, как приступить к написанию хотя бы одной строчки кода.
Веб-языки и 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!