【Angular】TSLintからESLint+Prettierに移行する手順！

2024年3月1日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

TSLintからESLint+Prettierに移行する手順は？
VSCodeにESLintの設定を行う手順は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴8年）で、資格は13個保有しています。

「AngularでTSLintからESLint+Prettierに移行したい」とお考えではありませんか？

Angularが古いバージョンだとTSLintがデフォルトでしたが、TSLintは非推奨になったのでESLintに移行する必要があります。

いずみ

手順自体は非常に簡単なので、面倒がらずにサクッと移行しちゃいましょう（笑）

本記事を読めば、AngularでTSLintからESLint+Prettierに移行する手順が分かるので早速見ていきましょう！

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいね♪

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴5年
ブランドせどりで月利50万円⇨脱サラ
投資歴5年（仮想通貨・FXが得意）
Twitterフォロワー約2,000人
運営者情報はこちら

いずみです

前提

Angular：14

TSLintからESLint+Prettierに移行する手順

早速ですが、TSLintからESLint+Prettierに移行する手順を解説します。

STEP

ESLintのインストール

$ ng add @angular-eslint/schematics

// Angular14の場合
$ ng add @angular-eslint/schematics@14

ℹ️ Using package manager: npm
✔️ Package information loaded.

The package @angular-eslint/schematics@14 will be installed and executed.
Would you like to proceed? Yes
✔️ Packages 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.

UPDATE package.json (2041 bytes)
✔️ Packages installed successfully.

ESLintをインストールします。

STEP

TSLintのアンインストール

$ ng g @angular-eslint/schematics:convert-tslint-to-eslint {{YOUR_PROJECT_NAME_GOES_HERE}}

? Would you like to remove TSLint and its related config if there are no TSLint projects remaining after this conversion? Yes
? Would you like to ignore the existing TSLint config? Recommended if the TSLint config has not been altered much as it makes the new ESLint config cleaner. Yes

    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...

CREATE .eslintrc.json (1015 bytes)
UPDATE angular.json (7241 bytes)

TSLintがインストールされている場合はアンインストールします。

いずみ

上記コマンドを実行すると「.eslintrc.json」というファイルが作成されます。

ちなみに、「Codelyzer」というライブラリや「tslint.json」も不要なので削除しちゃいましょう。

STEP

lintの確認

$ ng lint

lintが実行されればOKです。

STEP

Prettierのインストール

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

Prettierをインストールします。

STEP

.prettierrcの作成

{
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

こちらを参考に、.prettierrcを作成します。

STEP

.eslintrcの修正

{
  "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",
        "plugin:prettier/recommended" // <--- 追加
      ],
      "rules": {}
    },
    {
      "files": ["*.html"],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:prettier/recommended" // <--- 追加
      ],
      "rules": {}
    }
  ]
}

こちらを参考に、.eslintrcにPrettierの設定を追記します。

STEP

再度、lintの確認

$ ng lint

lintが実行し、Prettierのチェックが実行されればOKです。

VSCodeにESLintの設定を行う手順

VSCodeを使用している場合は、ESLintを設定しておきましょう。

いずみ

ESLintを設定すれば、ファイル保存時に自動でフォーマットを整えてくれます。

STEP

拡張機能「ESLint」をインストール

拡張機能の「ESLint」をインストールします。

STEP

settings.jsonの設定

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

上記をsettings.jsonに記載すればOKです。

いずみ

これでESLintの導入は完了です！