Angularの静的解析ツール設定(ESLint & Prettier)

mabushiisign

普段フロントエンドの開発では、Angularを使用しています。
その際に使用している、静的解析ツールとして、ESLintとPrettierを使用しています。
ESLint はコードの構文的な問 題をチェックし、Prettier はコードの読みやすさをチェックします。
この記事では、設定内容を共有します。

目次
  1. ESLint
  2. Prettier
  3. さいごに

ESLint

ライブラリのインストール・設定

ESLintのインストールは、個別でインストールしなくてもAngular CLIでいい感じにやってくれます。
ng lint と実行すると、設定されていないとインストールをしてくれます。
package.jsonを見ると、以下の変更が反映されました。

  "scripts": {
    //lintが追加
    "lint": "ng lint"
  },
  "devDependencies": {
    // 以下のライブラリが追加
    "@angular-eslint/builder": "16.3.1",
    "@angular-eslint/eslint-plugin": "16.3.1",
    "@angular-eslint/eslint-plugin-template": "16.3.1",
    "@angular-eslint/schematics": "16.3.1",
    "@angular-eslint/template-parser": "16.3.1",

    "@typescript-eslint/eslint-plugin": "5.62.0",
    "@typescript-eslint/parser": "5.62.0",
    "eslint": "^8.51.0",
  }

そのほかに、プロジェクト直下にeslintrc.jsonという設定ファイルが追加されます。

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:@angular-eslint/template/accessibility"
      ],
      "rules": {}
    }
  ]
}

動作確認

Lintの実行は、ng lintまたはnpm run lintで出来ます。
最初の状態ではAll files pass lintingと指摘なしとなります。

指摘される際の動作の確認をしてみます。
app.component.ts に private i: number = 2;という記述をして、ng lintを実行すると以下の指摘がされます。

src/app/app.component.ts
  11:3  error  Type number trivially inferred from a number literal, remove type annotation  @typescript-eslint/no-inferrable-types

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Lint errors found in the listed files.

変数定義の際に、2とnumberと型推論出来るものに対して、numberの定義は不要という指摘になります。

自動で修正可能な指摘については、ng lint --fixとすることで自動で修正してくれます。

vscodeの拡張機能のインストール

vscodeを使用している場合、ESLintの拡張機能を入れるとリアルタイムでのチェックやコード上に表示してくれるようになります。
ESLintで検索すると複数出てきますが、Microsoftが提供するものを使用します。https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

先ほどの指摘も以下のように表示され、指摘の内容やフィックスのリンクなどが表示されます。

Prettier

ライブラリのインストール・設定

以下のコマンドでインストールします。
eslint-config-prettierは、ESLintと競合する設定を無効にしてくれます。

npm install --save-dev prettier eslint-config-prettie

ESLintの設定ファイルにprettierを使用する設定をeslintrc.jsonのextendsに追加します。

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      // (省略)
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:@angular-eslint/template/accessibility",
        // prettierの設定を追加
        "prettier"
      ],
      // (省略)
    }
  ]
}

prettierの設定は、.prettierrc.jsonにします。
設定値は公式で確認できます。

{
  // １行120文字
  "printWidth": 120,
  // インデントをタブにする
  "useTabs": false,
  // タブを半角スペースにする
  "tabWidth": 2,
  // シングルクオートにする
  "singleQuote": true,
  // HTMLの閉じタグは同じ行にする
  "bracketSameLine": true,
  // HTMLの属性を属性ごとに1行にする
  "singleAttributePerLine": true,
  // HTMLの半角スペースの扱いを無視する
  "htmlWhitespaceSensitivity": "ignore"
}

prettierの除外設定を、.prettierignoreにします。

# Ignore artifacts:
build
coverage

動作確認

ソースをコードを変更し、npx prettier --write srcとすると、srcフォルダ配下のファイルにフォーマットを適用します。 —writeをなくすとチェックのみになります。

vscodeの拡張機能をインストール

vscodeを使用している場合、ESLintの拡張機能を入れるとリアルタイムでのチェックやコード上に表示してくれるようになります。
ESLintで検索すると複数出てきますが、Prettierが提供するものを使用します。
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

.vscode/settings.jsonを作成し、ファイル保存時にprettierを実行するように設定します。

1{
2  "editor.defaultFormatter": "esbenp.prettier-vscode",
3  "editor.formatOnSave": true
4}

コマンドの設定

ESLintとPrettierをまとめて実行するコマンドを、package.jsonに設定します。

{
  // (省略)
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    // ESLintとprettierを実行し修正する
    "lint": "ng lint --fix && npx prettier --write ."
  },
  // (省略)
}

さいごに

この設定で、手動ではありますが、Angularでの静的解析ツールの設定になります。

今後は、Git-hookを使用して、コミット時に自動的に実行することも考えたいと思いますが、これはクライアントでやるべきか、CIでやるべきか悩ましいです。色々な言語を使用しているので、JavaやPythonでも統一的に出来る方法にしたいです。

ABOUT ME
mabushiisign
mabushiisign
B'zとdoaとミスチルと登山が好きな40代のプログラマです。 普段は、SIer企業で働いています。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました