0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

vscode拡張機能のprettierがあれば、npm install -D prettierで入れるprettierは必要ない?

Posted at

結論

どちらも入れたほう良いです
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が動いてコード整形が実行されるかもしれませんのでご注意。

さいごに

今まで両者の違いをよく理解せずになんとなく使っていました
(本当に恥ずかしい・・・)

小さいことから一歩ずつ学び直していきたいです。
頑張りましょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?