LoginSignup
164
143

More than 5 years have passed since last update.

@rubytomato@github(渡邉 真)

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

Posted at

概要

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>
164
143
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
164
143