AngularでESLintを適用させる（v12＆v11向け）

Angular v12ではデフォルトのコードチェックツールが無いため、ソースコードがAngularの一般的なコーディング規約に則っているかをチェックするにはESLintを適用する必要があります。

そこで今回はAngular ESLint公式ガイドに沿ってAngularにESLintを適用する方法をご紹介します。

また、Angular v11まではTSLintがデフォルトでインストールされているため、TSLintからESLintの移行についても合わせて記載しております。

そもそもESLintとTSLintって何？

ESLint

• JavaScriptのコードチェックツールです。
• コーディングルールを定義することで、ソースコードがルールに則っているか確認できます。
• 例えば「コーディング規約に違反している場合はエラーとする」といった設定を定義させることができます。
  • そうすることで、チームで開発する時にコードの記述を統一させることができ、保守性・可読性の低下や思わぬエラーなどを未然に防ぐことができます。
• ESLintには様々なプラグインがあり、TypeScriptやAngular用のプラグインも提供されています。

TSLint

• こちらもTypeScriptのコードチェックツールですが、既に2019年に非推奨となっています。
• Angular v11まではデフォルトでインストールされているため、TSLintからESLintへの移行が必要です。

ESLintの適用手順

前提

Node.jsおよびAngularは以下のバージョンを利用します。

• Node.js: v14.15.4
• Angular: v12.1.1
  • v11までの手順も掲載しています。

ESLintのインストール

1. Angularプロジェクト直下に移動

2. ESLintのインストール

   • 以下のコマンドを実行させ、ESLintをインストールします。

     ng add @angular-eslint/schematics
     

   • 続行するか聞かれるので「Y」を入力します。

     ℹ Using package manager: npm
     ✔ Found compatible package version: @angular-eslint/schematics@12.2.0.
     ✔ Package information loaded.
     
     The package @angular-eslint/schematics@12.2.0 will be installed and executed.
     Would you like to proceed? (Y/n)Y
     

   • 以下のメッセージが表示されるとインストールが完了します。

     ✔ Package successfully installed.
     
         All @angular-eslint dependencies have been successfully installed 🎉
     
         Please see https://github.com/angular-eslint/angular-eslint for how to add ESLint configuration to your project.
     
     
         We detected that you have a single project in your workspace and no existing linter wired up, so we are configuring ESLint for you         automatically.
     
         Please see https://github.com/angular-eslint/angular-eslint for more information.
     
     CREATE .eslintrc.json (984 bytes)
     UPDATE package.json (1453 bytes)
     UPDATE angular.json (3549 bytes)
     ✔ Packages installed successfully.
     

   • package.jsonを見ると、下記のライブラリがインストールされていることが確認できます。

     • これらはESLintおよびAngular用のESLintプラグインとなります。詳細はこちらのドキュメントをご覧ください。
       • @angular-eslint/builder
       • @angular-eslint/eslint-plugin
       • @angular-eslint/eslint-plugin-template
       • @angular-eslint/schematics
       • @angular-eslint/template-parser
       • @typescript-eslint/eslint-plugin
       • @typescript-eslint/parser
       • eslint

   • またESLintの設定ファイルである.eslintrc.jsonというファイルも追加されていることが確認できます。

     • Angular v11までの場合、この段階では.eslintrc.jsonの追加はされません。後述の「TSLintのアンインストール」で追加されます。

3. TSLintのアンインストール（Angular v11まで）

   • Angular v11までのバージョンではデフォルトでTSLintが含まれているので、以下の手順でアンインストールします。

     • 以下のコマンドを実行させ、TSLintのアンインストールとESLintの設定を適用します。

       ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config
       

     • 以下のメッセージが表示されれば完了です。

       > ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config
       
       INFO: We are now installing the "tslint-to-eslint-config" package into a tmp directory to aid with the conversion
       
       This may take a minute or two...
       
       DELETE tslint.json
       CREATE .eslintrc.json (1015 bytes)
       UPDATE angular.json (4132 bytes)
       UPDATE package.json (1683 bytes)
       ✔ Packages installed successfully.
       

     • 実行が完了すると、以下の変更が適用されます。

       • .eslintrc.jsonの追加
       • TSLintおよびCodelyzerのアンインストール
       • TSLintの設定ファイルtslint.jsonの削除
       • Angular設定ファイルangular.jsonのLinter設定がtslintからeslint向けに移行

4. ESLintの実行

   1. 下記コマンドからESLintを実行し、コードチェックを行います。

      > ng lint
      

   2. ESLintの結果は下記の通りです。

      Linting "angular-example"...
      
      C:\Users\username\Documents\angular-example\src\app\header.component.ts
      12:3  error  Lifecycle methods should not be empty  @angular-eslint/no-empty-lifecycle-method
      
      ✖ 1 problems (1 errors, 0 warnings)
      
      Lint errors found in the listed files.
      

      • @angular-eslint/no-empty-lifecycle-methodというESLintのルールに違反している旨が記載されています。

Prettierのインストール

• Prettierとはフォーマッターライブラリの1つで、TypeScriptやHTMLなど、様々な言語に対応しています。

• ESLintではPrettierのプラグインを組み込むことができ、プラグインを追加することで上述のTypeScriptやAngularのルールに加えてコードフォーマット周りもチェックできます。

  参考：https://github.com/angular-eslint/angular-eslint#notes-for-eslint-plugin-prettier-users

1. PrettierおよびESLint Prettierのインストール

   • 下記3つをインストールします
     • prettier: Prettier本体
     • eslint-plugin-prettier: ESLintでPrettierのルールを適用するプラグイン
     • eslint-config-prettier: Prettierとその他プラグインで競合するESLintのルールをオフにするライブラリ

   > npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
   

2. Prettier設定ファイル.prettierrcの追加

   • プロジェクト直下に.prettierrcファイルを追加し、設定を記述します。
     • 1行に表示させる文字数や、文字列等をシングルクォートにするか等の設定が可能です。
     • 詳細: https://prettier.io/docs/en/configuration.html

   {
     "printWidth": 80,
     "singleQuote": true,
     "useTabs": false,
     "tabWidth": 2,
     "semi": true,
     "bracketSpacing": true,
     "endOfLine": "auto"
   }
   

3. .eslintrcのPrettierプラグインの追加

   "overrides": [
     {
       ...
       "extends": [
         "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/  process-inline-templates",
         "plugin:prettier/recommended"   // 追加
       ],
       ...
     },
     {
       "files": [
         "*.html"
       ],
       "extends": [
         "plugin:@angular-eslint/template/recommended"
       ],
       "rules": {}
     },
     // ↓追加
     {
       "files": ["*.html"],
       "excludedFiles": ["*inline-template-*.component.html"],
       "extends": ["plugin:prettier/recommended"],
       "rules": {
         "prettier/prettier": ["error", { "parser": "angular" }]
       }
     }
   ]
   

4. ESLintの実行

   • ng lintの実行例は下記の通りです。
   • インデントやカッコがprettierのルールに則りチェックされていることが確認できます。

   C:\Users\username\Documents\angular-example\src\main.ts
   11:25  error  Insert `⏎··`                prettier/prettier
   12:10  error  Replace `err` with `(err)`  prettier/prettier
   

VSCode拡張機能

Visual Studio CodeではESLint拡張機能があり、VSCodeのエディタ上でESLintによるコードチェックや自動フォーマットを行うことができます。

上述のng lintの実行無しでもリアルタイムにコードチェックが行われるのが嬉しい点です。

1. ESLint拡張機能をインストール

2. 設定ファイルの編集

   • settings.jsonを開き、下記の設定を追加します。
     • eslint.optionsとeslint.validateはTS、HTMLファイルに対しESLintのコードチェックを行うことができる設定です。
     • editor.codeActionsOnSaveはドキュメントの保存時に自動的にコードフォーマットを実行する設定です。Prettierを適用している場合に有効です。

   {
     "eslint.options": {
       "extensions": [".ts", ".html"]
     },
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       "typescript",
       "typescriptreact",
       "html"
     ],
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     }
   }
   

3. コード自動チェックの確認

   以下のキャプチャのようにHTMLやTSファイルに対して、自動的にコードチェックを行っていることが確認できます。

   

   

4. 自動フォーマットの確認

   以下のとおりインデント周りのエラーが起こっているファイルがありますが、このファイルを保存してみます。
   

   すると、このように自動的にコードフォーマットが実行され、フォーマット周りのエラーが解決できます。
   

補足

• ESLintによるエラーを無視させたい場合

  • ESLintによるエラーを無視させたい場合、エラーが出ている箇所の1行前に// eslint-disable-next-line [ESLintルール名]のコメントを追記することで対応ができます。
  • 例えばこのような書き方になります。

  export class HeaderComponent implements OnInit {
  
    constructor() { }
  
    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
    ngOnInit(): void {
    }
  
  }
  

• 特定のファイルをコードチェックの対象外にしたい場合

  • Angularプロジェクト直下に.eslintignoreファイルを追加し、以下の通りコードチェックの対象外とするファイルを記載します。

  src/app/**/*.spec.ts
  

おわりに

以上で、Angular12のESLintの適用手順は完了です。

私も実際に複数人が開発するAngularプロジェクトでESLintを組み込んでいますが、

開発やコードレビューのスピードがかなり上がったと感じています。

ぜひ、皆さんもESLintで快適なAngularアプリ開発をお試しください！