NestJS に俺の考えた最強の ESLint + Prettier の設定を導入するぞ！！

どうも [yoshii](https://twitter.com/ganja_tuber) です。

# 前回のやつ

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

https://qiita.com/ganja_tuber/items/95507e658ecfef7e9457

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

# 内容

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

# GitHub

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

https://github.com/yoshiishunichi/nestjs-lint-template

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

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

### Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

## 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` 派です。

```bash
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` とかの意味がもっと知りたい人は、こういう賢い人の書いた記事を読みましょう。

https://maku.blog/p/j6iu7it/

## .prettierrc.json

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

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

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

# 最後に

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

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

https://twitter.com/ganja_tuber

ではまた〜