Posted at

Visual Studio Codeのhtmlフォーマッターのメモ

More than 1 year has passed since last update.


概要

Visual Studio Code(以降VSCodeと記述)のデフォルトのhtmlフォーマッターをカスタマイズしたときのメモです。

VSCodeのhtmlフォーマッターはjs-beautifyというパッケージをベースにしており、拡張機能を追加することなくhtmlファイルのフォーマットを行うことができます。

(なお、Beautifyという拡張機能がありますが、これがインストールされている訳ではないようです。)

htmlファイルをフォーマットするには、フォーマットしたい範囲を選択状態にしてCtrl + K Ctrl + Fを押します。

環境


  • Windows 10 Professional

  • VSCode 1.24.1

参考


設定のデフォルト値

Ctrl + ,を押して設定画面を開きます。検索フィールドで"html.format"と入力してフォーマッターの設定に関する項目を絞り込みます。

下記は、VSCode 1.24.1での設定のデフォルト値です。

{

// コンテンツを再フォーマットしてはならないタグをコンマで区切ってリストにします。'null' は、既定値の'pre' タグを表します。
"html.format.contentUnformatted": "pre,code,textarea",

// 既定のHTMLフォーマッタを有効/無効にします
"html.format.enable": true,

// 末尾に改行を入れます。
"html.format.endWithNewline": false,

// 直前に改行を1つ入れるタグの、コンマで区切られたリストです。'null'は、既定値の"head, body, /html" を表します。
"html.format.extraLiners": "head, body, /html",

// 書式設定とインデント{{#foo}}および{{/foo}}。
"html.format.indentHandlebars": false,

// <head>セクションと<body>セクションをインデントします。
"html.format.indentInnerHtml": false,

// 1つのチャンク内に保持できる改行の最大数。無制限にするには、'null'を使います。
"html.format.maxPreserveNewLines": null,

// 要素の前にある既存の改行を保持するかどうか。要素の前でのみ機能し、タグの内側やテキストに対しては機能しません。
"html.format.preserveNewLines": true,

// 再フォーマットしてはならないタグの、コンマ区切りの一覧。'null'の場合、既定で https://www.w3.org/TR/html5/dom.html#phrasing-content にリストされているすべてのタグになります。
"html.format.unformatted": "wbr",

// 属性を折り返します。
"html.format.wrapAttributes": "auto",

// 1行あたりの最大文字数 (0=無効にする)。
"html.format.wrapLineLength": 120
}


設定値とフォーマット結果

以降は、設定値を変えてhtmlファイルがどのようにフォーマットされるか確認した結果です。


html.format.enable


既定のHTMLフォーマッタを有効/無効にします


設定値は true(default) または false

この設定はフォーマッターを有効にするかどうかなのでフォーマット結果は省略します。

デフォルトでは有効なので、他の拡張機能でフォーマットしたい場合などは無効にします。


html.format.indentInnerHtml


セクションとセクションをインデントします。

設定値は true または false(default)。

trueにすると、headタグとbodyタグをインデントします。


format前

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div id="app">
<!--省略-->
</div>
</body>
</html>


format後

true

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div id="app">
<!--省略-->
</div>
</body>
</html>

false(default)

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div id="app">
<!--省略-->
</div>
</body>
</html>


html.format.indentHandlebars


書式設定とインデント{{#foo}}および{{/foo}}。


設定値は true または false(default)。

trueにすると、Handlebarsの式({{expression}})の内側がHandlebarsの式を基準にインデントされます。

なお、設定値に関わらずHandlebarsの式自体もインデントされます。



  • Handlebarsは、JavaScriptで使えるテンプレートエンジンです。


format前

<div class="container">

{{#if authenticated}}
<div class="primary">
<p>認証済み</p>
</div>
{{else}}
<div class="warning">
<p>未認証</p>
</div>
{{/if}}
</div>


format後

true

Handlebarsの式の内側が式を基準にインデントされます。

<div class="container">

{{#if authenticated}}
<div class="primary">
<p>認証済み</p>
</div>
{{else}}
<div class="warning">
<p>未認証</p>
</div>
{{/if}}
</div>

false(default)

Handlebarsの式のインデントとは関係なく内側のタグがインデントされます。

<div class="container">

{{#if authenticated}}
<div class="primary">
<p>認証済み</p>
</div>
{{else}}
<div class="warning">
<p>未認証</p>
</div>
{{/if}}
</div>


html.format.extraLiners


直前に改行を1つ入れるタグの、コンマで区切られたリストです。'null'は、既定値の"head, body, /html" を表します。


設定値はタグ(複数ある場合はカンマ区切りで指定)または'null'。デフォルトは"head, body, /html"。


format前

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div id="app">
<!--省略-->
</div>
</body>
</html>


format後

既定値(head, body, /html)

<!DOCTYPE html>

<html lang="ja">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
<div id="app">
<!--省略-->
</div>
</body>

</html>

空行をいれない("")

どのタグの前にも空行を入れたくない場合は設定値に""を指定します。

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div id="app">
<!--省略-->
</div>
</body>
</html>


html.format.wrapAttributes


属性を折り返します。


設定値は以下の通り。デフォルトはauto



  • auto : Wrap when the line length is exceeded


    • 行の長さが最大文字数を超えたときに折り返す




  • force : Wrap all attributes, except first


    • 2つ目の属性から折り返す




  • force-aligned : Wrap all attributes, except first, and align attributes


    • 2つ目の属性から折り返し、属性の並びを揃える




  • force-expand-multiline : Wrap all attributes


    • 全ての属性を折り返す、ただし属性が1つだけの場合は折り返さない




format前

<p class="desc">description</p>

<p class="desc" data-index-1="aaa" data-index-2="bbb" data-index-3="ccc">description</p>


format後

auto

暫定的に"html.format.wrapLineLength": 30に設定した状態でフォーマットしました。

<p class="desc">description</p>

<p class="desc" data-index-1="aaa"
data-index-2="bbb" data-index-3="ccc">description</p>

force

<p class="desc">description</p>

<p class="desc"
data-index-1="aaa"
data-index-2="bbb"
data-index-3="ccc">description</p>

force-aligned

<p class="desc">description</p>

<p class="desc"
data-index-1="aaa"
data-index-2="bbb"
data-index-3="ccc">description</p>

force-expand-multiline

<p class="desc">description</p>

<p
class="desc"
data-index-1="aaa"
data-index-2="bbb"
data-index-3="ccc"
>description</p>


html.format.endWithNewline


末尾に改行を入れます。


設定値は true または false(default)。

trueにするとファイルの一番最後の行に改行が入ります。


format前

<!--省略-->

</div>
</body>
</html>


format後

true

      <!--省略-->

</div>
</body>
</html>

false(default)

      <!--省略-->

</div>
</body>
</html>


html.format.preserveNewLines


要素の前にある既存の改行を保持するかどうか。要素の前でのみ機能し、タグの内側やテキストに対しては機能しません。


設定値は true(default) または false

trueにすると既存の空行を保持します。


format前

<div>

<h1>title</h1>

<p>description</p>

</div>


format後

true(default)

空行はそのまま保持されます。

<div>

<h1>title</h1>

<p>description</p>

</div>

false

空行は削除されます。

<div>

<h1>title</h1>
<p>description</p>
</div>


html.format.maxPreserveNewLines


1つのチャンク内に保持できる改行の最大数。無制限にするには、'null'を使います。


設定値は null(default)か、1以上の整数値。

連続する空行の最大行数を指定します。デフォルトは'null'なので無制限です。


format前

<div>

<h1>title</h1>

<p>description</p>

</div>


format後

既定値(null)

空行はそのまま保持されます。

<div>

<h1>title</h1>

<p>description</p>

</div>

1を指定

1を指定すると、空行は最大1行までになります。

<div>

<h1>title</h1>

<p>description</p>

</div>


html.format.unformatted


再フォーマットしてはならないタグの、コンマ区切りの一覧。

'null'の場合、既定で https://www.w3.org/TR/html5/dom.html#phrasing-content にリストされているすべてのタグになります。


設定値はタグ(複数ある場合はカンマ区切りで指定)または'null'。デフォルトは"wbr"。

インライン要素などフォーマットしたくないタグを指定します。


format前

<p>The following span is an <span class="highlight">inline element</span>;

its background has been colored to display both the beginning and end of
the inline element's influence.</p>


format後

既定値(wbr)

デフォルトではspanタグで改行されてしまいます。

<p>The following span is an

<span class="highlight">inline element</span>; its background has been colored to display both the beginning and end of the inline element's
influence.</p>

spanを指定

フォーマットしないタグにspanを指定すると、spanタグでは改行は行われません。

<p>The following span is an <span class="highlight">inline element</span>; its background has been colored to display both

the beginning and end of the inline element's influence.</p>


html.format.contentUnformatted


コンテンツを再フォーマットしてはならないタグをコンマで区切ってリストにします。'null'は、既定値の'pre'タグを表します。


設定値はタグ(複数ある場合はカンマ区切りで指定)または'null'。デフォルトは"pre,code,textarea"。

デフォルトではscriptタグは含まれていないので、scriptタグでJavaScriptコードを埋め込んでいる場合はフォーマットするとコードが整形されてしまうので注意が必要です。


format前

<div>

<textarea>aaaaaa
bbbbbb
cccccc

dddddd</textarea>
</div>


format後

既定値(pre,code,textarea)

<div>

<textarea>aaaaaa
bbbbbb
cccccc

dddddd</textarea>
</div>

null(pre)

textareaが対象から外れたのでコンテンツまでフォーマットされています。

<div>

<textarea>aaaaaa bbbbbb cccccc dddddd

</textarea>
</div>