ソースコードにインデントが正しくつけられていないと、終了タグがどこだか分からなくなってコーディング中に思わぬ時間のロスをしてしまうことがあります。
そんな時にコードの整形ツールを使えば、あっという間に散らかったコードを読みやすく整形してくれます。
目次
html整形ツール Source Code Beautifier
htmlをコピペすればインデントを整えてくれる、手軽なhtml整形ツールです。
html、JS、CSS整形ツール Dirty Markup
html、JavaScript、CSSのコードを自動整形、補完してくれるツールです。
提供されたhtmlのインデントがスペースだったけどタブにしたい。
色んな人の手によって運用されてるうちにCSSが散らかってしまった。
そんな時にこのツールを使えば、ワンクリックできれいに整形されたコードを吐き出してくれます。
html、JS、CSS整形、圧縮、コンバートツール Beautify Converter
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"; ?>
Sublime Textのhtml、JS、CSS整形プラグイン
HTML/CSS/JS Prettify
エディタにSublime Textをお使いなら、右クリで選択するだけでコードを整形してくれるプラグイン、HTML/CSS/JS Prettifyがおすすめです。
導入方法は以下の記事で詳しく紹介されています。
Sublime Text で CSS や HTML、Javascript のソースを整形するプラグイン
PHP整形ツール PHP Beautifier
PHPのソースコードのインデントを整形して統一、開始タグや閉じタグが不足していた場合は補完してくれるツールです。