Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

フロントエンドの悩み

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

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

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

エディタで解決

HTML-CSS-JS PrettifySublime​Linter-html-tidy を使って、汚い HTML と決別できます!

HTML-CSS-JS Prettify

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

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

Sublime​Linter-html-tidy

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

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

SublimeLinterHTML tidy が必要です。

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

brew install homebrew/dupes/tidy --HEAD

で入ります。

最後に

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

参考

cyberagent
サイバーエージェントは「21世紀を代表する会社を創る」をビジョンに掲げ、インターネットテレビ局「AbemaTV」の運営や国内トップシェアを誇るインターネット広告事業を展開しています。インターネット産業の変化に合わせ新規事業を生み出しながら事業拡大を続けています。
http://www.cyberagent.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away