どうも yoshii です。

前回のやつ

前回は Next.js の最強 Lint 設定を考えて誰よりも丁寧に解説しました。

今回は NestJS 版です。割と説明は雑ですが、ぜひ読んでください。

内容

NestJS プロジェクトに俺の考えた最強の ESLint + Prettier を導入するぞという話です。
もし、もっといい Lint 設定や質問等あればコメントください。
みんなでより最強の設定にしていきたいです。

GitHub

リポジトリです。
記事読まなくてもここに全部載ってます。
個人開発でテストは使わないので、テスト用のファイルやライブラリは全部消しています。

.vscode/extensions.json に必要な VScode 拡張機能が記述されているので、 clone して VScode で開いたら「おすすめの拡張機能を入れる」みたいなポップアップが出てくれるはずです。入れてください。

今後、筆者がNestJSのプロジェクトを初期化するときは基本的にこのリポジトリから clone して使うと思います。
なので、割と定期的にライブラリのアップデートはしていこうと思ってます。

環境

macOS Monterey
node: v16.17.0
パッケージマネージャー: yarn v1.22.19
エディタ: VScode

設定の解説

一応、各設定ファイルの解説を行います。
用意する設定ファイルは以下です。

.eslintrc.json
- ESLint の設定ファイル
- リンターとフォーマッターの機能がありますが、今回はリンターの機能のみ使用
- デフォルトだと .eslintrc.js だと思いますが、 json ファイルの方が使い勝手良いと思うので json でいきます。
- 対象の拡張子
  - js
  - ts
.prettierrc.json
- Prettier の設定ファイル
- フォーマッターとして使用
- デフォルトでなぜかファイル名に拡張子がついてないですが、つけます。
- 対象の拡張子
  - js
  - ts
  - json
.vscode/settings.json
- VScode の動作の設定ファイル
- 保存時のコード整形を有効にします
.vscode/extensions.json
- VScode 拡張機能のインストールを要求するポップアップを表示させるファイル
- 必要な VScode 拡張機能を書いています。VScode 開いた時に拡張機能をインストールするポップアップが出てきます。

.vscode/settings.json

VScode の動作の設定ファイルです。

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

デフォルトのフォーマッターを Prettier に設定し、保存時の ESLint での整形を有効にしています。

.vscode/extensions.json

必要な VScode 拡張機能を列記しています。

.vscode/extensions.json

{
  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

以下の VScode 拡張機能をインストールするポップアップが出ます。
ポップアップ出なかったりしたら手動で入れましょう。

ESLint

Prettier

package.json

package.json の scripts の項目を以下のように変更します。

package.json

"scripts": {
  "lint": "eslint --ignore-path .gitignore './**/*.{js,ts}'",
  "lint:fix": "eslint --ignore-path .gitignore './**/*.{js,ts}' --fix",
  "format": "prettier --write --ignore-path .gitignore './**/*.{js,ts,json}'"
}

これらのコマンドで対象の拡張子のファイルをチェック・整形できます。

そして、必要なパッケージを入れます。筆者は yarn 派です。

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-sort-keys-fix eslint-plugin-typescript-sort-keys eslint-plugin-unused-imports prettier

.eslintrc.json

ESLint の設定ファイルです。

.eslintrc.json

{
  "root": true,
  "env": {
    "node": true,
    "es6": true,
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "sourceType": "module"
  },
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
  "plugins": ["import", "sort-keys-fix", "typescript-sort-keys", "unused-imports"],
  "rules": {
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "object",
          "type"
        ],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc"
        }
      }
    ],
    "import/no-duplicates": "error",
    "sort-keys-fix/sort-keys-fix": "error",
    "typescript-sort-keys/interface": "error",
    "unused-imports/no-unused-imports": "error"
  }
}

簡単に説明すると、
extends には偉い人が作ったルールが記述されています。ここに書いたルールは実際に適用されます。
plugins　には偉い人が作ったルールの設定を記述しています。ここに書いたルールは直接適用されず、下の rules で設定します。
rules では、いろんな細かいルールを定めています。

rules の内容は以下

"import/order": インポートの順番を並び替えます
"import/no-duplicates": インポートの重複でエラーを出します
"sort-keys-fix/sort-keys-fix": オブジェクトのキーの順番をソートします
"typescript-sort-keys/interface": 型のキーをソートします
"unused-imports/no-unused-imports": 使ってないインポートを消します

env とか parser とかの意味がもっと知りたい人は、こういう賢い人の書いた記事を読みましょう。

.prettierrc.json

Prettier のフォーマットルールです。

.prettierrc.json

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

これは見たまんまですね。シングルクオートかダブルクオートかを決めたりしてます。

最後に

お疲れ様でした。
俺の考えた NestJS の ESLint + Prettier の設定を解説してみました。
みなさん遠慮なくコメントなどくださると嬉しいです。

普段は Twitter を見ているので暇な人は友達になってください。

ではまた〜