VSCODE htmlを自動的に整形する
![VSCODE htmlを自動的に整形する](https://mebee.info/wp-content/uploads/2019/11/vscode.png)
VSCODEで、htmlを自動的に整形する手順を記述してます。
環境
- OS windows11 home
- vscode 1.63.2
手順
まずは赤枠で囲んだアイコンを、クリックして拡張機能を表示します。
ショートカットキー「ctrl」+「shift」+「x」を使っても可能です。
![](https://mebee.info/wp-content/uploads/2021/12/vscode.png)
「Prettier – Code formatter」と入力します。この拡張機能を使用することで、整形することができます。
![](https://mebee.info/wp-content/uploads/2021/12/image-484-1024x593.jpg)
「インストール」をクリックすると、「インストール」が始まります。インストールはすぐに終わります。
![](https://mebee.info/wp-content/uploads/2021/12/image-484-1024x282.png)
htmlファイルを開いて「Shift」+「Alt」+「f」をクリックすると以下のダイヤログが表示されるので
「構成」をクリックします。
![](https://mebee.info/wp-content/uploads/2021/12/image-486.png)
「Prettier」を選択します。
![](https://mebee.info/wp-content/uploads/2021/12/image-487.png)
これで、「Shift」+「Alt」+「f」をクリックすると以下のように「html」が整形されるようになります。
![](https://mebee.info/wp-content/uploads/2021/12/vscode-5.gif)
無効にする
無効にする場合は、「Prettier – Code formatter」を選択して「無効にする」をクリックします。
![](https://mebee.info/wp-content/uploads/2021/12/image-488.png)
「再読み込みが必要です」をクリックすると「無効」になります。
![](https://mebee.info/wp-content/uploads/2021/12/image-489.png)
-
前の記事
chromeが突然重くなった場合の対処法 2022.06.16
-
次の記事
javascript 配列のオブジェクト化処理で「Object.assign」と「reduce」と「スプレッド構文」のパフォーマンスを計測する 2022.06.16
コメントを書く