ESLintの設定をしたAngular 11のプロジェクトでVS CodeのExtension「ESLint」を使ってみた

大高大輔

2020.11.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！DA(データアナリティクス)事業本部 インテグレーション部の大高です。

先日、Angular 11のプロジェクトをTSLintからESLintへとマイグレーションをしてみました。

その際に、普段利用しているエディタのVS CodeにExtension「ESLint」の設定も行ってみましたので、設定について書いていきたいと思います。

Extension「ESLint」の導入

これは特に問題ないかと思います。拡張機能メニューからdbaeumer.vscode-eslintで検索し、ESLintを「インストール」します。

ESLintを利用しているAngular 11のプロジェクトで試してみる

では、ESLintを利用しているAngular 11のプロジェクトで試してみたいと思います。プロジェクトは単純にng newしただけのプロジェクトで、app.component.tsを以下のようにリテラルをダブルクォーテーションで括るように修正しています。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = "eslint-sample";  //'eslint-sample';
}

エラーが出ている

この時点で、Parsing error: Cannot read file '/home/ec2-user/tsconfig.json'.eslintというエラーが表示されました。

私はVS CodeでEC2インスタンスのホームディレクトリを「ワークスペース」として開いていたのですが、Angularのプロジェクトフォルダはホームディレクトリ配下のサブフォルダ内に存在しているため、どうもうまく認識してくれていないようです。

Extensionの設定を修正する

対応として、Extensionの設定を修正します。設定の変更は、以下の「拡張機能の設定」から開きます。

この中のWorking Directoriesの設定を編集します。

eslint.workingDirectoriesの値は、以下のように{ "mode": "auto" }を指定します。

    "eslint.workingDirectories": [
        { "mode": "auto" }
    ]

これは、Extensionのページにも記載のある通り「package.json、.eslintignore、および.eslintrc*ファイルの場所に基づいて作業ディレクトリを推測する」というモードになります。Angularのプロジェクト配下にはpackage.jsonや.eslintrc.jsonファイルが存在しているため、このモードを利用するようにします。

[{ "mode": "auto" }] (@since 2.0.0): instructs ESLint to infer a working directory based on the location of package.json, .eslintignore and .eslintrc* files. This might work in many cases but can lead to unexpected results as well.

再度、試してみる

設定後に、再度app.component.tsを開くと、想定通りにLinterが動作してくれました。

修正についても以下のようにクイックフィックスが利用できます。

ちゃんとESLintが直してくれましたね！

まとめ

以上、ESLintの設定をしたAngular 11のプロジェクトでVS CodeのExtension「ESLint」を使ってみました。Extensionを利用するとコーディング中にすぐに気付けるので、開発が捗りそうですね。

どなたかのお役に立てば幸いです。それでは！

AWS