AngularにESLintとPrettierを導入する

これは何？

Angular に ESlintとPrettierを導入するための記事、自分用の備忘録です。

Angular CLI でアプリを作成

まずは新しいアプリケーションを作成します。
Angular CLIをインストールしていなければ、npm install -g @angular/cliでインストールしましょう。

$ ng new my-app
$ cd my-app

TSLintをアンインストール

AngularではもともとTSLintが推奨されていて、ng newでアプリを作成するとデフォルトでTSLintがインストールされます。
しかしTSLintは2020/12/1に開発が停止しており、ESLintへの移行が推奨されています。
というわけでESLintへ移行していきますが、まずはTSLintをアンインストールします。

$ npm uninstall --save-dev tslint

更にTSLintの設定ファイルであるtslint.jsonも削除します。

ESLint, Prettierとそのプラグインをインストール

ESLint, Prettier, そしてこれらを併用するために必要なプラグインをインストールします。

$ npm install --save-dev eslint prettier
$ npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-prettier prettier-eslint eslint-config-prettier

ESLintとPrettierの併用についてはこちらの記事で大変わかりやすく解説されています。

ESLintの設定

ESLintの設定をします。
npx eslint --initを実行し、質問に答えるとESLintの設定ファイルを作ってくれます。
これで作成された設定ファイルにPrettierと併用するための設定も記述します。
ESLintの設定ファイルは.eslintrc, .eslintrc.json, .eslintrc.jsと3形式ありますが、今回は.eslintrc.jsで作成します。

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  rules: {},
};

また、ESLintの構文チェック対象から除外するための設定ファイル.eslintignoreも作成しておきましょう。

node_modules/

Prettierの設定

Prettierrcの設定ファイル、.prettierrcを作成し、設定を記述します。
ここはお好みで。

{
	"tabWidth": 2,
	"bracketSpacing": true,
	"printWidth": 100,
	"semi": true,
	"singleQuote": true,
	"trailingComma": "all"
}

これにて設定完了です。

参考

Prettier 入門 ～ESLintとの違いを理解して併用する～
Using ESLint and Prettier with VScode in an Angular Project 🚀