Тестовое задание на Angular. Настройка базового приложения.

В данной статье будем использовать стандартные Angular CLI для создания базового приложения.

Создание нового приложения

Первым делом создадим новое Angular приложение.

Есть несколько способов создать новое приложение в Angular, но обычно оно сводиться к двум: созданием с помощью стандартного angular-cli, либо использование более мажорного варианта — это использовать Nx (монорепозиторий для Angular и не только).
Nx хорош тем, что предоставляет множество хороших техник и технологий, такие как настроенный eslint, тестирование с помощью jest и cypress, создание библиотек и соответствующих алиасов, кеширование тестов и много чего еще. Однако, это хорошо для бывалого разработчика и enterprise решений, а для тестового задания хватит обычного стека.

Для этого сначала установим @angular/cli, запустив команду:

npm install -g @angular/cli

Для любителей yarn, можно выполнить команду:
yarn global add @angular/cli

Однако, нужно убедиться, что в PATH попадает yarn global bin, для того чтобы yarn мог использовать глобальные пакеты

После установки CLI перейдем в каталог, где хранятся проекты и запустим команду:

ng new barinb

Команда создаст новое приложение, которое будет называться barinb. Небольшой каламбур из слов “барин” и “airbnb”.

Не выбирайте в качестве названия проекта — test-project или что-то, что содержит слово тест или тестовое. Включите фантазию, придумайте что-то креативное или звучное.

Убедимся, что в проекте создался git репозиторий, например с помощью команды tig:

После того, как репозиторий был создан, запушим его в github.

Для этого создайте репозиторий в github и следуйте инструкциям. Но обычно достаточно установить remote и запушить.

После создания приложения и репозитория, остается только один вопрос. Использовать ли git flow.

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

Настройка линтера

Angular до версии 12, по умолчанию в качестве линтера использует tslint, а с 12 версии уже используется eslint.

Так как сейчас стабильная версия Angular 12, данный шаг руководства можно пропустить, но я все же приведу пример простой интеграции с angular-eslint, который можно использовать в проектах до 11 версии.

Установим angular-eslint, запустив команду:

ng add @angular-eslint/schematics

И мигрируем на eslint, где в качестве последнего проекта указываем название проекта:

ng g @angular-eslint/schematics:convert-tslint-to-eslint barinb

Как видим, команда создала .eslintrc.json.

В angular.json в качестве линтера стал использоваться — @angular-eslint/builder:lint.

Так как при миграции были добавлены правила связанные с Angular, добавим общепринятые практики в eslint:

"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@angular-eslint/recommended",

Удалим ненужные зависимости:

yarn remove codelyzer tslint

Удалим tslint.json :

rm tslint.json

Закомитим изменения, так как уже накопилось изменений, которые можно сохранить.

И если linter это хорошо, то prettier позволит нам следовать определенными нами же правилами.

Добавим prettier в проект:

yarn add -D prettier

Создадим файл .prettierrc, который добавит немного правил для переписывания кода:

А также создадим .prettierignore, где заигнорим файлы проекта, которые не должны быть переписаны.

# Add files here to ignore them from prettier formatting
/dist
/coverage
/tmp
/node_modules
/nginx
/.vscode
/.idea
package-lock.json
package.json
yarn.lock

Теперь воспользуемся мощью JetBrains и Webstorm и запустим prettier для всего проекта:

Как видно, prettier будет запускаться для следующих файлов:

{**/*,*}.{js,ts,jsx,tsx,json,scss,css,html}

Ссылки

Вернуться к оглавлению — Введение.

Следующая статья — Настройка базовых стилей и Angular Material.

Предыдущая статья — Оглавление.

Все исходники на github/fafnur/barinb.

Fafnur/barinb

Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur