【VScode】コードを自動整形する方法 prettier

コードのインデントなどのフォーマットを手動で整えていませんか?
その時間は無駄なので、速やかに自動化しましょう。

VScodeのprettierという拡張機能を使えば、ファイルを保存するだけで自動整形してくれます!

 

★デモ




インストール方法

拡張機能(Ctrl + Shift + X)を開き
prettier」と検索し、「Prettier – Code formatter」をインストールします。

 

新米太郎
新米太郎

インストールは完了です。続いて設定をしましょう!

 

設定方法

Ctrl + Shift + P でコマンドパレットを出します。

setting」と検索すると
Preferences: Open Settings (JSON)」が出てくるので、クリック

 

jsonが新しいタブで開くので、以下を追記します

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

 

新米太郎
新米太郎

設定完了です。ここでVScodeを再起動しましょう!

 

使い方

任意のファイルを開いて保存(Ctrl + S)すると、自動的にフォーマットされます!

↓↓↓こんな感じ

うまく行かない場合はjsonの設定などを見直してみてください。
jsonは最後の要素に”,”(カンマ)はつかないのですが、見逃しがちだったりします。

最後に

いかがだったでしょうか?

今回はコードを自動整形する方法を紹介しました。

 

新米太郎
新米太郎

お読み頂きありがとうございました!




コメント

タイトルとURLをコピーしました