適当なHTMLファイルを開き、ファイル内のどこでもよいのでクリックしてカーソルを置いた後に、Shift+Alt+Fを押すと、ファイル内のすべてのコードの整形が行われる。ただし、細かな設定に基づいて生計を行うには、拡張機能「Prettier」を使う。使うためにはインストールが必要。
- 拡張機能アイコンをクリックするかCtrl+Shift+Xを押して、左側のメニューを「拡張機能：マーケットプレース」に切り替える。
- 上部のテキストボックスに「prettier」と入力すると、下に表示される候補に「Prettier - Code formatter」があるはず。
- それをクリックすると、右側の表示が切り替わるはず。上部の「インストール」ボタンをクリック。インストールされる。
- インストールしただけでは使うことができず、Prettierを使えるように設定する必要がある。左下の設定アイコン（歯車アイコン）をクリックして、表示されたコンテキストメニューの「設定」をクリック。Ctrl+,を押してもよい。「設定」タブが表示される。
- 上部のテキストボックスに「formatter」と入力。下に項目「Editor: Default Formatter」が表示される。
- ドロップダウンから「Prettier - Code formatter」を選択。これでPrettierの機能が使えるようになる。
適当なHTMLファイルを開き、ファイル内のどこでもよいのでクリックしてカーソルを置いた後に、Shift+Alt+Fを押すと、ファイル内のすべてのコードの整形が設定に基づいて行われる。
例として、以下のようなソースコードを使う。
Prettierをインストールする前にShift+Alt+Fを押すと、以下のようになる。
Prettierをインストールした後にShift+Alt+Fを押すと、以下のようになる。
