こんにちは、中西です。

好きなエディタは何ですか、と聞かれるとVisual Studio Code(以下、VS Code)と答えますが、
フォーマットをエディタに任せると、想定外の形になることがあります。
以下がHTMLを標準設定のままフォーマットしたときの例です。

整形されているため、きれいなコードになっていますが、
やはり自分が好きな形で整形されてほしいものです。

今回はVS Codeのフォーマッタを自分好みに設定してみよう、という記事になります。

====実施環境====
・Windows 10
・Visual Studio Code version 1.37

フォーマッタの設定

1. インデントの数と種類を変更

最初に、自動挿入されるインデントを調節してみます。
標準設定ですと半角スペース4つ挿入されますが、この数を変更してみます。

画像内で赤の丸で囲んだSpacesを押し、
Indent Using Spaces を押すとスペースの数が選択できるので2 を選択します。
(1から8の間で設定できます)
これだけで、次回のフォーマットからインデントの数が変更されるようになります。

※左側がスペース数4つ、右側がスペース数2つのものです。

スペースだけでなく、タブを使うようにすることも可能です。

2. head要素とbody要素の調節

デフォルトではheadとbodyの開始タグ、htmlの終了タグの前に改行が入る設定になっています。
これを無効化してみます。

ウィンドウ上部の View からCommand Palette を選び、
Open Settings(JSON) を入力して選択すると、settings.jsonと呼ばれるVSCodeの設定画面が開きます。

VS Codeの設定はsettings.jsonに直接書き込むことも可能です。
今回は以下の行を追加します。

このextraLinersは「指定タグの前に空行を追加する」というものです。
デフォルトでは、headタグ、bodyタグ、htmlの閉じタグが選択されているため、
head,body要素の前後に自動で空行が入ることになります。

ここに空文字を入力することで、どのタグの前も改行を入れない、という状態になります。
※ちなみにnullだとデフォルトと同じ状態になります。

これだけだと、すでに存在している空行は消えてくれません。
空行を消したい場合は以下の行を追加します。

上記を追加することで、フォーマット時に要素前の空行を自動削除してくれるようになります。
※要素内の空行は無視されます。

さらに、現時点ではhead要素とbody要素にはインデントが入っていないので、
挿入できるように以下の行を追加します。

上記のindentInnerHtmlはhead要素とbody要素をインデントするかどうかの設定です。
trueを選択することで、head要素とbody要素をインデントされるようになります。

以下の画像は上記三つの設定を追加した後にフォーマットしたものです。

3. 長いコードは折り返す

HTMLを書いていると属性や要素などが増えて、一行が長くなることがあります。

わかりやすいように長いコードは折り返すようにしてみます。

一行が長いコードの例

3-1 属性で改行する

上記のコードのように属性が多くなることで長くなってしまうケースもあります。
その場合は、settings.jsonに以下の行を追加します。

上記の行を追加することで、属性ごとに改行されるようになります。
ただし、属性ではなく要素が長い場合は依然として見切れたままの状態になります。

3-2 見た目だけ折り返す

属性で改行をしたくない、属性で改行をしても見切れているのでなんとかしたい、という場合には見た目だけ折り返すといったことも可能です。

以下の行をsettings.jsonに追加します。

こちらはフォーマットではないため、完成したコードは長いままですが、
余計な改行が入らないという特徴があります。
状況によっては、属性による改行ができないこともありますので、
二つを使い分けて見た目の折り返しを実現することができます。

最後に

今回はVS Codeのフォーマッタを調節してみました。
標準で提供されている機能だけでも十分に設定可能ですが、
VS Codeは拡張機能を入れることで、HTMLのフォーマッタをカスタマイズできたり、
標準で用意されている言語以外も対応できたりします。

ぜひ、自分好みの設定をして、快適なコーディングライフを過ごしてください。