Wizard Notes

Python, JavaScript を使った音楽信号分析の技術録、作曲活動に関する雑記

Notepad++でHTML/XMLを自動フォーマット/インデントする方法

f:id:Kurene:20220212104655g:plain:w300

HTML/XMLファイルの編集においてインデントはコードの保守管理を考えると非常に重要です。

Webサイトが大規模化した時や改修が必要になってHTML/XMLを見返した時に、インデントが綺麗にそろっていると構成を把握しやすいです。

また、ケアレスミスを減らすことにもつながります。複数人でコードをいじっている際はなおさらです。

ただ、HTMLタグや要素を継ぎ足したり部分的に切り貼りしていくうちに、だんたんとインデントに気を使っていちいち整えるのは面倒になってきます

そんな面倒から解放されるために、自動フォーマットが実装されているエディタがあります。

自動フォーマットを使えば、一瞬でインデントが整えられ、綺麗で保守性の高いコードになります。

この記事では、高機能で手軽に利用しやすいエディタであるNotepad++においてHTML/XMLを自動フォーマット/インデントするプラグイン XML Tools を紹介します。

導入方法

Notepad++ において、画面上部の「プラグイン」をクリックします。

そこから「プラグイン管理」を選択してください。

f:id:Kurene:20220212103311p:plain

次に、プラグイン管理の画面内で「XML Tools」と打ち込んで検索してください。

すると XML Tools が出てくるため、チェックボックスをクリックしてチェックし、右上にある「インストール」を押してください。

再起動後、画面上部の「プラグイン」から「XML Tools」を選択できるようになります。

f:id:Kurene:20220212103556p:plain

使い方

以下のインデントがそろっていないコードを例に説明します*1

このコードをNotepad++で開いて、画面上部の「プラグイン」から「XML Tools」を選択を選択します。

すると、以下のようなウィンドウが出てくるので、「Pretty print」を押してください。

もしくは、ショートカットキーとしてキーボードの ctrl, shift, alt, bを同時に押してください。

すると、以下のように自動フォーマットされ、一瞬で綺麗で保守性の高いコードになります

f:id:Kurene:20220212104655g:plain

まとめ

Notepad++においてHTML/XMLを自動フォーマット/インデントするプラグイン XML Tools を紹介しました。

XML Tools を導入し、自動フォーマットのショートカットキー ctrl + shift + alt + bに慣れると、HTMLの編集効率がとてもよくなりますので、是非導入して使ってみてください。

*1:こちらのHTMLコードを利用しました