結論
どちらも入れたほう良いです
※npm install -D prettierで入れるprettierは必須
両者の違い
npm install -D prettierで入れるprettier
node_modulesに存在するprettierです。
コード整形の実行エンジンそのものです。コイツがいないと始まりません。
vscode拡張機能のprettier
vscodeで便利にprettierを使えるようにすることが出来るプラグインです。
prettierを便利に使えると言っても、前述の通り実行エンジンそのものはnode_modules/prettierです。
node_modules/prettierが無ければ、vscode拡張機能のprettierだけ入れてもコード整形は出来ません。
例えるなら、node_modules/prettierは家事代行サービスのおばちゃんそのもの。
vscode拡張機能のprettierは、家事代行サービスを呼ぶ為のスマホアプリ。
実際に掃除をするおばちゃんが1人もいない家事代行業者のスマホアプリを入れても意味がありません。
まずは、あなたのプロジェクトにおばちゃんをインストールしましょう。
vscode拡張機能のprettierのメリット
一例ですが、vscodeで以下のようなことが出来るようになります。
・エディタで「保存時に自動整形」
・右クリックから「ドキュメントのフォーマット」
実験例
試しにnode_modulesディレクトリが存在しないディレクトリをvscodeで開いて、test.tsのようなファイルを作成して保存すると上記の説明が理解しやすいかと思います。
例え、vscodeで保存時に自動整形の設定をしていたとしても、node_modules/prettierが無いので自動整形が実行されません。
※グローバルにnode_modules/prettierを入れていた場合は話が別で、グローバルなprettierが動いてコード整形が実行されるかもしれませんのでご注意。
さいごに
今まで両者の違いをよく理解せずになんとなく使っていました
(本当に恥ずかしい・・・)
小さいことから一歩ずつ学び直していきたいです。
頑張りましょう。