こんにちはフロントエンドエンジニアのまさにょんです!
今回は、VSCodeでファイル保存時にインテンドを自動整形する設定方法について解説します。
目次
VSCodeでファイル保存時にインテンドを自動整形する設定方法
VSCodeでファイル保存時にインテンドを自動整形する設定をするには、
- 該当の言語に対応するォーマッター(Code formatter)の拡張機能を追加する。
- setting.json に設定を追加する。
上記、2つのStepが必要です。
それでは、それぞれ見ていきます。
VSCodeにフォーマッター(Code formatter)の拡張機能を追加する
まずは、自動整形をするためのフォーマッター(拡張機能)をVSCodeに追加します。
使用する言語に対応しているフォーマッターの拡張機能を追加してください。
JavaScript・TypeScript使いなら間違いなく『Prettier – Code formatter』がおすすめです。
![](https://masanyon.com/wp-content/uploads/2023/05/Prettier-1024x691.jpg)
setting.json に設定を追加する
自動整形をするためのフォーマッター(拡張機能)をVSCodeに追加したら、次はsetting.json
に設定を追加します。
VSCodeの右下の歯車マークをClickすると表示されるポップアップの中から「設定」を選択します。
![](https://masanyon.com/wp-content/uploads/2023/05/14d83e5ba3e321b909a91d628805d13a.png)
VSCodeの設定画面を開くと「ユーザー」や「ワークスペース」などのタブが中央にあります。
そのタブが「ユーザー」の状態だと右上に『設定(JSON)を開く』という項目があるので、それを選択します。
![](https://masanyon.com/wp-content/uploads/2023/05/setting_json.png)
すると、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でファイル保存時にインテンドを自動整形する設定は、完了です。
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!
Python関係書籍
プログラミング学習・エンジニア転職関連の情報
自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)
![](https://www15.a8.net/0.gif?a8mat=3NNG1X+D8W8C2+3GWO+6O1Z5)
『GEEK JOBキャンプ』スピード転職コース(無料)
![](https://www13.a8.net/0.gif?a8mat=3NNG1X+DAOJ5E+40C4+5ZMCH)
【IT道場】入校時0円! 就職目的プログラミングスクール
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+DML78Y+53W0+609HT)
エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】
![](https://www14.a8.net/0.gif?a8mat=3NNGTV+ACPDGY+4VYG+60H7L)
『techgym』 (Python特化・無料)
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+C2MGDU+4PGA+BY641)