WEB制作でデザインテンプレート等を使用したり、他社制作のサイト改修依頼等をいただいて作業するときに、
インデントをスペース数個にするかタブにするか、改行をどこで入れるか、などのコーディング規則が自分のとは違うと、
いじっていくうちに非常に汚いコードになっていってしまいます。

同一サイト内ではなるべくコーディング規則は揃えたいですが、
かといって元のコーディング規則に合わせるのも、やり慣れないので作業効率が悪いです。
作業に取り掛かる前に一度コードを自分仕様に整えておきたいものですね。

ということで今回は、HTML/CSSのコード整形ツールについて調べてみました。
エディタのプラグインなどにも整形ツールはありますが、今回はインストール等の手間がかからないオンラインサービスで、色々試して一番良かった「syncer」のコード整形ツールをご紹介したいと思います。

「syncer」のコード整形ツール

下にスクロールしていくとオプションがあり、整形規則について設定できます。

それでは実際に汚いコードを入れて試してみたいと思います。

HTML

https://lab.syncer.jp/Tool/HTML-PrettyPrint/

■オプションは
・インデント文字…タブ　1個
・長すぎる行の改行…無効
・改行を保持…無効

の設定で、整形しました。

紛れ込ませた全角スペースなども上手く除去してくれています。
改行場所もちょうどよいです。（他のツールではscriptやliの閉じタグなど全て改行されてしまって、スマートにいかないことが多かったです）

CSS

https://lab.syncer.jp/Tool/CSS-Pretint/

■オプションは
・インデント文字…タブ 1個
・セレクタ間の改行…有効
・ルール間の改行…有効
・記号周りのスペース…有効
・改行を保持…無効

の設定で、整形しました。

こちらも上手く整形してくれました。
オプションが豊富で、まさに痒いところに手が届く印象です。

まとめ

日本語で分かりやすく、オプションが豊富なこのツールが個人的に一番使いやすかったです。
変換後のコードコピーなどもクリックしただけで自動でしてくれて、コードはコピペ入力だけでなくファイルごとアップすることも出来るので非常に便利でした。

また、忙しい時などコーディング規則を揃え忘れてしまうこともあるので、納品前にも整形ツールをかけてあげたいですね。
（※横並びリストのカラム落ち回避のために、あえて改行していない箇所などがある場合は、修正を忘れないようお気を付けください。）

サイトの裏方であるコードは普段は目に見えませんが、後々メンテナンスする方のために、見やすくいじりやすい、美しいコードにするように心掛けたいものです。

この記事を読んだ方はこちらも読まれています

jQueryを使った折りたたみ式のグローバルメニュー 【注意喚起】WPA2の脆弱性「KRACKs」について 【CSS】見出しの記号をCSSで表示 HTML/CSS 初心者向け勉強法