Sublime Text 3 で汚い HTML を編集するときに便利なプラグイン

Posted at 2014-11-30

フロントエンドの悩み

フロントエンドの仕事をしていると、誰が書いたのか分からないまともにインデントもされていない、更には文法まで間違っている汚い HTML に手を加えなければならない場面は往々にしてあると思います（？）

それでもブラウザは表示してしまうので、書いた本人は気付いていないか、表示されれば良いと思っているのでしょう。

インデントが無い HTML は、大体入れ子構造も間違っていることが多いです。文法が間違っているとエディタで開始タグと終了タグがハイライトされないので、非常に編集しにくくて困ります。

HTML-CSS-JS Prettify と SublimeLinter-html-tidy を使って、汚い HTML と決別できます！

HTML, CSS, JS のコードを整形するプラグインです。

HTML-CSS-JS Prettify は Node.js が必要なので先に導入して下さい。
UNIX/Linux なら nodebrew で入れると楽です。

SublimteLinter の HTML tidy インターフェースで、 HTML の文法上の間違いを見つけるプラグインです。

文法が間違っていると、当然ながら HTML を整形できないので修正する必要がありますが、分量のある HTML から間違っている箇所を人力で探すのは苦痛なので自動化しましょう。

SublimeLinter と HTML tidy が必要です。

後者は、 Mac であれば Homebrew から

brew install homebrew/dupes/tidy --HEAD

で入ります。

そもそも汚い HTML を書くと不幸になるので、 validator くらい通しましょう。