Blog スタッフブログ

2024.04.26

WEB制作

知っておくと便利な「Visual Studio Code」の自動整形

Visual Studio Code（VS Code）は、Webサイトなどの開発ツールです。

中でも特に便利な機能の一つがHTMLの自動整形機能です。

この機能を使うと、コードが見やすく整理されて、効率よく作業が可能です。

HTMLの自動整形について

自動整形機能は、書いたコードを自動的にきれいに整えてくれる機能です。

VS Codeでは、設定ファイルや拡張機能を使って、自分の好みに合わせた整形ルールを設定できます。

VS Codeのsettings.jsonに以下の設定を追加することで、HTMLコードの整形がより便利になります。ここでは、それぞれの設定の一例を説明します。

{
  "editor.formatOnSave": true,
  "html.format.enable": true,
  "html.format.indentInnerHtml": true,
  "html.format.indentHandlebars": false,
  "html.format.wrapAttributes": "auto",
  "html.format.wrapAttributesIndentSize": 1,
  "editor.wordWrap": "on"
}

“editor.formatOnSave”: true
ファイルを保存するときに自動でコードを整形してくれます。

これで、手動でフォーマットする手間が省けます。

“html.format.enable”: true
HTMLの自動整形機能を有効にします。

これにより、HTMLコードが自動的に整理されて見やすくなります。

“html.format.indentInnerHtml”: true
内部のHTMLタグを適切にインデントします。

タグのネストが深くなっても、読みやすいインデントが維持されます。

“html.format.indentHandlebars”: false
Handlebars（{{}}）を使う場合、これを無効にすることで、インデントが崩れないようにします。

“html.format.wrapAttributes”: “auto”
HTMLタグの属性を自動で折り返します。

属性が多くても、コードが横に長くなりすぎません。

“html.format.wrapAttributesIndentSize”: 1
折り返した属性行のインデントサイズを設定します。

この設定では、インデントサイズを1スペースにしています。

“editor.wordWrap”: “on”
エディタの自動折り返しを有効にします。