htmlやJS、CSS、PHPの自動整形ツール

ソースコードにインデントが正しくつけられていないと、終了タグがどこだか分からなくなってコーディング中に思わぬ時間のロスをしてしまうことがあります。
そんな時にコードの整形ツールを使えば、あっという間に散らかったコードを読みやすく整形してくれます。

html整形ツール Source Code Beautifier

Screenshot of ctrlq.org

htmlをコピペすればインデントを整えてくれる、手軽なhtml整形ツールです。

Source Code Beautifier

html、JS、CSS整形ツール Dirty Markup

Screenshot of www.dirtymarkup.com

html、JavaScript、CSSのコードを自動整形、補完してくれるツールです。
提供されたhtmlのインデントがスペースだったけどタブにしたい。
色んな人の手によって運用されてるうちにCSSが散らかってしまった。
そんな時にこのツールを使えば、ワンクリックできれいに整形されたコードを吐き出してくれます。

Dirty Markup

html、JS、CSS整形、圧縮、コンバートツール Beautify Converter

Screenshot of www.beautifyconverter.com

html、JS、CSSの整形の他に、コードを軽量化してくれる圧縮(minify)ツールもあります。
また、コンバートツールも充実しており、特に個人的にありがたかったのがhtml→PHPへのコンバートです。
例えば、以下のようなhtmlのコードをPHPでechoするには、ダブルクォーテーションを文字列として認識させるために、バックスラッシュを入れる必要があるのですが、このツールを使えば一発で変換してくれるので手間が省けます。

コンバート前のhtml

<link rel="stylesheet" href="style.css" media="all" />

コンバート後のPHP

<?php
echo "<link rel=\"stylesheet\" href=\"style.css\" media=\"all\" />\n";
?>

Beautify Converter

htmlからPHPのコンバートツール

Sublime Textのhtml、JS、CSS整形プラグイン
HTML/CSS/JS Prettify

エディタにSublime Textをお使いなら、右クリで選択するだけでコードを整形してくれるプラグイン、HTML/CSS/JS Prettifyがおすすめです。
導入方法は以下の記事で詳しく紹介されています。

Sublime Text で CSS や HTML、Javascript のソースを整形するプラグイン

PHP整形ツール PHP Beautifier

Screenshot of flatsystems.net

PHPのソースコードのインデントを整形して統一、開始タグや閉じタグが不足していた場合は補完してくれるツールです。

PHP Beautifier

RELATED POSTS