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

当ページのリンクには広告が含まれています。
【Angular】TSLintからESLint+Prettierに移行する手順
いずみ

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

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

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

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

いずみ

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

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

いずみ

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

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴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の導入は完了です!

まとめ

今回は、AngularでTSLintからESLint+Prettierに移行する手順を解説しました。

以下が本記事のまとめになります。

まとめ
  • ESLint+Prettierの移行は簡単。
  • TSLintに関連するライブラリやファイルは削除しておく。
  • VSCodeの設定を行えば自動でフォーマットを整えてくれる。
まとめ♪
  • おすすめ本
¥4,070 (2023/07/23 15:56時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場

Angularの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました!

  • クソおすすめ本
¥4,480 (2024/06/01 23:28時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。

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

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次