VSCodeでファイル保存時にインテンドを自動整形する設定方法(setting.json)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、VSCodeでファイル保存時にインテンドを自動整形する設定方法について解説します。

VSCodeでファイル保存時にインテンドを自動整形する設定方法

VSCodeでファイル保存時にインテンドを自動整形する設定をするには、

上記、2つのStepが必要です。

それでは、それぞれ見ていきます。

まずは、自動整形をするためのフォーマッター(拡張機能)をVSCodeに追加します。

使用する言語に対応しているフォーマッターの拡張機能を追加してください。

JavaScript・TypeScript使いなら間違いなく『Prettier – Code formatter』がおすすめです。

自動整形をするためのフォーマッター(拡張機能)をVSCodeに追加したら、次はsetting.jsonに設定を追加します。

VSCodeの右下の歯車マークをClickすると表示されるポップアップの中から「設定」を選択します。

VSCodeの設定画面を開くと「ユーザー」や「ワークスペース」などのタブが中央にあります。

そのタブが「ユーザー」の状態だと右上に『設定(JSON)を開く』という項目があるので、それを選択します。

すると、setting.json が開かれるので、設定を追加します。

今回は、次の3つの設定を追加しました。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.formatOnSave": true
}

それぞれ、次のような意味です。

"editor.defaultFormatter": "esbenp.prettier-vscode" は、DefaultのFormatterを指定しています。
"editor.tabSize": 2 は、タブサイズを2で設定しています。
"editor.formatOnSave": true は、ファイルをSaveした時に自動整形する機能を有効化しています。

これでVSCodeでファイル保存時にインテンドを自動整形する設定は、完了です。