Angular10にESLintとPrettierを追加する #Angular #Angular10
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
2020/07/07現在の最新バージョン、Angular10ではTSLintが適用されています。
ですが、TSLintのロードマップにもある通り、既にTSLintは非推奨になっていて2020年12月1日に完全廃止することが宣言されています。
よってTSLintからESLintへの移行が推奨されています。
ここでは、Angular10のプロジェクトにESLintとPrettierを追加する手順を紹介します。
環境
- Angular: 10.0.2
- Angular CLI: 10.0.1
- eslint: 6.8.0
- prettier: 2.0.5
ESLint
TSLintの削除
まずはデフォルトでインストールされているTSLintを削除します。
$ rm tslint.json $ npm uninstall tslint
angular-eslint関連パッケージのインストール
以下のコマンドで関連するパッケージが一括でインストールされます。
$ ng add @angular-eslint/schematics
ESLintの設定ファイルを追加
$ touch .eslintrc.js
module.exports = { extends: ['plugin:@angular-eslint/recommended'], rules: { '@angular-eslint/directive-selector': [ 'error', { type: 'attribute', prefix: 'app', style: 'camelCase' }, ], '@angular-eslint/component-selector': [ 'error', { type: 'element', prefix: 'app', style: 'kebab-case' } ] }, overrides: [ { files: ['*.ts'], parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 2020, sourceType: 'module', project: ['*/tsconfig.json', './tsconfig.**.json'] // 追加 }, plugins: ['@angular-eslint/template'], processor: '@angular-eslint/template/extract-inline-html' }, ], }; 上記は@angular-eslintのサンプルです。
ただ、サンプルではAngular9のプロジェクトとなっているので、Angular10に合わせて少し修正します。
Angular10では、tsconfig.jsonが下記のように分割されています。
- tsconfig.json
- tsconfig.base.json
- tsconfig.app.json
- tsconfig.spec.json
- e2e/tsconfig.json
これを全て反映させるためにparserOptions.projectに以下を追加します。
['*/tsconfig.json', './tsconfig.**.json']
ちなみにESLintの設定ファイルはJSON|YAML|JSで記述できます。
ng lintの設定変更
angular.jsonのLintの項目を修正します。
"lint": { "builder": "@angular-eslint/builder:lint", "options": { "eslintConfig": ".eslintrc.js", // 追加 "tsConfig": [ "tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json" ], "exclude": [ "**/node_modules/**" ] } } 確認
ESLintが正しく適用できているか確認します。
$ ng lint Linting "sample-app"... /Users/oka.haruna/playground/sample-app/src/app/app.component.html 12:1 error This line has a length of 159. Maximum allowed is 140 max-len // 中略 519:1 error This line has a length of 1046. Maximum allowed is 140 max-len ✖ 41 problems (41 errors, 0 warnings) /Users/oka.haruna/playground/sample-app/src/app/app.component.spec.ts 23:6 error Strings must use singlequote quotes ✖ 1 problem (1 error, 0 warnings) 1 error and 0 warnings potentially fixable with the `--fix` option. Lint errors found in the listed files.
初期構成のままだと app.component.spec.ts と app.component.html でエラーが出ました。
とりあえずエラーを消すため、fixオプションを実行します。
$ ng lint --fix
app.component.htmlの方は自動修正されないのでサンプルコード部分は一旦削除します。(routerを有効にしてる場合はその部分だけ残す)
<router-outlet></router-outlet>
$ ng lint Linting "sample-app"... All files pass linting.
これでLint自体の追加は完了です。 ルールはカスタマイズしてください。
Prettier
Prettierのインストール
$ npm i -D prettier \ eslint-config-prettier \ eslint-plugin-prettier
Prettierの設定ファイルを追加
Prettierの設定ファイルもJSON|YAML|JS|TOML、もしくはpackage.jsonに内包する形で記述できます。
ここでは記述量が比較して少ないYAMLにします。
$ touch .prettierrc.yml
以下はデフォルトのルールになります。
trailingComma: "es5" tabWidth: 4 semi: false singleQuote: true
こちらのドキュメントに従ってルールを変更してください。
VSCodeの設定（オプション）
VSCodeの拡張機能を追加することで、ファイル保存時に自動でフォーマットすることができます。
Prettierの拡張機能を追加して、.vscode/settings.jsonに以下を追加してください。
"editor.formatOnSave": true
