Цель этого документа - представить исчерпывающее руководство по настройке проекта Angular с нуля с необходимыми зависимостями и плагинами.

Все шаги по созданию Angular проекта с использованием Angular CLI приведены здесь. В этом документе подробно описаны дальнейшие инструкции по настройке проекта со всеми необходимыми зависимостями и плагинами.

Примечание. Просто не забудьте выбрать «.scss» при выборе фреймворка CSS. SCSS предоставляет больше возможностей для поддержки кода и возможности его повторного использования.

Настроить линтинг TS / ES:

TS Linting настроен в Angular "из коробки", и вы можете настроить правила, отредактировав файл tslint.json. Пожалуйста, добавьте ниже правило в файл «tslint.json», которое важно для сохранения сложности кода.

Изначально настроенный TSLint не имеет правил ESLint. Для его настройки используйте пакет npm «tslint-eslint-rules» с командой «npm install - save-dev tslint-eslint-rules». После установки зависимости включите ESLinting, настроив его в tslint.json, как показано ниже:

Настроить линтинг SCSS

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

Добавьте пакет sass-lint с помощью команды npm install sass-lint - save-dev. Настройте правила SCSS в файле sass-lint.yml, образец файла доступен здесь.

Настроить Prettier

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

Prettier имеет поддержку машинописного текста, и чтобы убедиться, что у нас есть согласованная и читаемая база кода, установите пакет 'prettier' с помощью 'npm install - save-dev - save-exact prettier' ' команда.

Создайте файл «.prettierrc» в корневой папке с указанным ниже содержимым и поместите его в корень каталога вашего проекта:

{
«printWidth»: 120,
«singleQuote»: true,
«useTabs»: false,
«tabWidth»: 2,
«semi»: true ,
«bracketSpacing»: true
}

Также не забудьте установить плагин «prettier» в VS Code и включить его, установив «editor.formatOnSave: true». Если вы используете любой другой редактор кода, включите соответствующие настройки.

Команды сборки

До сих пор мы настроили все проверки статического кода (TSLint / ESLint / SCSSLint / Prettier), сейчас самое время настроить команду сценариев сборки, которую могут использовать конвейеры CI / CD для развертывания и отчетов о качестве кода (Sonarqube ).

Настройте команды ниже в разделе «scripts» в файле «package.json» в корневой папке.

Я определил только две команды для развертывания «build: dev» и «build: prod» для двух сред, если в вашем проекте есть несколько команд, не стесняйтесь добавлять команды, специфичные для среды.

Команда производства сначала запускает все определенные правила линтинга, затем выполняет все модульные тесты с покрытием и, наконец, создает пакет сборки. С этой последовательностью сбой сборки сработает, если произойдет какой-либо сбой статического кода или UT.

Настроить ловушку предварительной фиксации

После установки всех статических кодов и сценариев сборки нам все еще нужно избегать плохих коммитов, то есть любых ошибок линтинга / UT, вводимых разработчиком. Эта цель может быть достигнута с помощью хуков предварительной фиксации, которые выполняют определенные сценарии перед каждой фиксацией. Я использовал для этого «хаски» зависимость с командой «npm install husky - save-dev» для установки.

После установки этого пакета добавьте следующие сценарии в «package.json», чтобы включить его:

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

Структура папки CSS

Angular обеспечивает инкапсуляцию для компонента, то есть у нас есть определенные стили для компонента, и это не загрязняет глобальные стили. В то же время для проекта требуется множество общих / глобальных стилей, которые будут использоваться в приложении как повторно используемые стили. Чтобы иметь стили повторного использования / поддержки, приложение должно определять структуру папок, которая масштабируется с четко определенными обязанностями.

Ниже представлена ​​структура папок CSS, которую можно использовать для масштабирования:

grids.scss: определите структуры сеток / столбцов для приложения.
theme.scss: сохраните этот файл для определения тем, то есть переопределения темы материала Angular или конкретного проекта. тема.
breakpoint.scss: определите все размеры устройств и точки останова, это будет импортировано в стили компонентов. Используйте подход «сначала мобильные» при определении точек останова, т. Е. Без мультимедийных запросов для мобильных устройств.
layout.scss: определите весь дизайн, специфичный для макета, то есть отступы / поля / промежутки между ними и т. Д.
main.scss: это заполнитель для импорта всех файлов из папки стилей.
Удалите файл style.scss, созданный с помощью Angular CLI. Вместо этого мы будем использовать main.scss. , обновите файл angular.json для изменений 'style.scss'.

Государственное управление

Управление состоянием - важный аспект приложения, установите @ ngrx / store как зависимость проекта. Вместе с магазином @ngrx установите пакет store-devtools, который полезен для отладки разработчика. Обязательно настройте это для НЕ ПРОИЗВОДСТВЕННОЙ среды.

@ ngrx / Effects - еще один полезный пакет, который изолирует побочные эффекты от компонентов. @ ngrx / effects - эффективный способ написания тонких компонентов, эффекты - не что иное, как инъекционные сервисы angular.

Структура папки компонентов

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

У каждого компонента в папке могут быть следующие файлы:

my.component.ts: файл класса компонента
my.component.html: шаблон для html
my.component.mobile.scss : стиль для мобильных устройств
my.component.tablet.scss: стиль для планшетов
my.component.desktop.scss: для настольных компьютеров.

Медиа-запросы для планшетов и настольных компьютеров должны использоваться из файла `breakpoint.scss` и для повторной итерации медиазапросов для мобильных стилей в подходе, ориентированном на мобильные устройства.
Конкретные файлы хранилища ngrx (действие / редуктор / эффекты) должны оставаться в та же папка с компонентами.

Плагины Essentials VSCode:

CodeMetrics: учитывая сложность кода для класса / функций.
EsLint: разрешает ошибки ES Linting.
SASS Lint : Разрешает ошибки линтинга SASS.
TSLint: ошибки линтинга машинописного текста.

Вот пример кода репо на то же самое.