この記事は 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 | 行末カンマについてのルール(複数行必須) | 追加 |
その 
: 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 さんです。