NestJSにPrettierを導入する

概要

NestJSのプロジェクトにPrettierを導入する方法を簡単にまとめる。

前提

今回のコードは下記の内容の後に実装する。

エディタはVScodeを利用

方法

1. プロジェクトルートで下記を実行してPrettierのパッケージが入っていることを確認

   cat package.json | grep prettier
   

2. VScodeにこちらの拡張機能を導入（当該の拡張を入れないとターミナルからのnpx prettier --writeでしかコードが修正されない。導入後、後述の手順でsettings.jsonをいじり拡張機能とPrettierパッケージを紐づけることで初めて保存時等に自動でコードが修正される様になる。）

3. VScodeで「command」+「shift」+「p」を押下しopen user settings (JSON）と入力しヒットしたものをクリック

4. 開いたUser直下のsettings.jsonの末尾に下記を追記

   ~/Library/Application Support/Code/User/settings.json

   {
       "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true
       },
       "[javascript]": {
           "editor.defaultFormatter": "esbenp.prettier-vscode",
           "editor.formatOnSave": true
       }
   }
   

5. プロジェクトルートに.prettierrcというファイルがあることを確認

   .prettierrc

   {
     "singleQuote": true,
     "trailingComma": "all"
   }
   

6. 何かしらのTSのファイルを開いて「command」+「s」などで保存するとフォーマッタにより一定のルールでコードの記述が修正される

付録

念の為Prettierのコマンドも羅列しておく

ファイルを指定してフォーマット実施

npx prettier --write フォーマット対象ファイル指定

ディレクトリを指定してフォーマット実施

npm prettier --write フォーマット対象フォルダ指定

配下の対象ファイルすべてにフォーマット実施

npm prettier --write .