この記事は Angular Advent Calendar 2018 の 1 日目の記事です。
Angular でアプリケーションを作成する時にやっておくと役立つオススメ 4 点の紹介をします。

今回の環境

以下の設定で確認
- macOS
- Angular CLI : 7.1.0

Angular アプリケーションの作成

下記コマンドでアプリケーションを作成

$ ng new lets-start-angular --style=scss --routing

Angular CLI v7.x からオプションを渡さなくてもインタラクティブに質問してもらえるようになった
- オプションを渡さないと下記のようになる

$ ng new lets-start-angular
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com   ]

その : TSLint

TSLint 自体は最初からインストールされているので、ルールを見直す
個人的に見直したルールは下記
- コードのメンテナンス性を下げないために循環的複雑度をチェックしたり 1 ファイルあたりの行数に制限をかけたりしている

見直したルール	説明	対応
cyclomatic-complexity	循環的複雑度をチェックする	追加
encoding	エンコーディングの指定(UTF-8)	追加
linebreak-style	改行コードの指定(LF)	追加
max-file-line-count	1 ファイルあたりの行数(200)	追加
no-boolean-literal-compare	真偽値のチェックを冗長的に書かない	追加
no-consecutive-blank-lines	2 行以上の空行を禁止する	追加
no-console	console メソッドの使用を禁止する(log 禁止)	変更
no-duplicate-imports	重複 import を禁止する	追加
prefer-template	文字列連結にテンプレートリテラルの使用を推奨	追加
trailing-comma	行末カンマについてのルール(複数行必須)	追加

全体的な設定は https://gist.github.com/kasaharu/476660a92fa9558b9760ec52265d974c

その : Prettier

Linter とは別に Formatter も導入しておくと複数人での開発に役立つので Prettier を入れる
下記でインストール

$ yarn add prettier --dev --exact

Prettier でフォーマットするのは *.html と *.ts
設定ファイルを配置

.prettierrc.json

{
  "arrowParens": "always",
  "printWidth": 140,
  "singleQuote": true,
  "trailingComma": "all"
}

ignore ファイルを配置

.prettierignore

dist/
coverage/
node_modules/

npm scripts を登録
- html と ts では parser が異なるので個別に設定し、それをまとめた script も登録

diff --git a/package.json b/package.json
index 552ef29..ff5b61d 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,10 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "prettier": "yarn prettier:ts && yarn prettier:html",
+    "prettier:ts": "prettier --write --parser 'typescript' './**/*.ts'",
+    "prettier:html": "prettier --write --parser 'angular' './**/*.html'"
   },
   "private": true,
   "dependencies": {

$ yarn prettier でフォーマットを実行

その : stylelint

CSS にも Lint をかけたいので stylelint を導入する
- stylelint-config-standard に standard なルールが定義されているのでこれを使う

$ yarn add stylelint stylelint-config-standard -D

stylelint の設定ファイルを用意

.stylelintrc

{
  "extends": "stylelint-config-standard",
  "rules": {
  }
}

npm scripts を登録

diff --git a/package.json b/package.json
index 9553923..274ec34 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
+    "stylelint": "stylelint 'src/**/*.scss'",
     "prettier": "yarn prettier:ts && yarn prettier:html",
     "prettier:ts": "prettier --write --parser 'typescript' './**/*.ts'",
     "prettier:html": "prettier --write --parser 'angular' './**/*.html'"

デフォルトで生成される app.component.scss が空なので $ yarn stylelint を実行すると no-empty-source のルールで怒られるのでよしなに対応する

その : Code coverage の閾値

Angular CLI はテストランナーに Karma が使われている
テスト実行には $ yarn test コマンドを使うが --code-coverage オプションを付けるとコードカバレッジを出力する
例えば、下記のように src/karma.conf.js を変更するとコードカバレッジの閾値を 80% に設定できる

diff --git a/src/karma.conf.js b/src/karma.conf.js
index ee9caa1..37d3155 100644
--- a/src/karma.conf.js
+++ b/src/karma.conf.js
@@ -18,7 +18,15 @@ module.exports = function (config) {
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, '../coverage'),
       reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+      fixWebpackSourcePaths: true,
+      thresholds: {
+        global: {
+          statements: 80,
+          lines: 80,
+          branches: 80,
+          functions: 80,
+        },
+      },
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,

閾値を下回るとエラーとして扱われるが emitWarning: true を追加するとエラーではなく警告として扱われるので、プロジェクトの途中でも閾値を設定するのは有用

まとめ

今回はアプリケーション開発時にオススメの設定 4 つを紹介しました。これらを CI でチェックすることでより保守しやすくなったり、チーム開発する場合は、コードレビューコストの削減にもなると思います。

明日は @shibukawa さんです。

Angular でアプリケーションを作成したらやること 4 点