AtomでHTMLコードチェックできるパッケージ２つ紹介するよ

人間は絶対にミスをするものなので、コーディング中にミスは絶対に起きます。

AtomでHTMLのコードのエラーチェックできるパッケージを探したところ、便利なものがいくつかあったので２つご紹介します。

Atomパッケージ linter-tidy

まずおすすめするのが、linter-tidyです。linter-tidy公式ページ

巷では割と上級者向けなどと言われていますが、全然そんなことはなくてHTML構文エラーがあったらリストで通知してくれるすぐれものです。

コードチェック系のパッケージはめちゃくちゃあるので、お間違えの無きよう！

基本的にダウンロード数が多いやつがお目当てのやつなので見分けるポイントです。

使い方は簡単、まずはlinter-tidyをインストールします。

インストール後、Atomを一旦閉じて適当なhtmlファイルを開いて保存を押すと、linterをインストールしろという文章が出るのでインストールします。

linter-tidyの付属パッケージとして以下、インストールを促されます。害はないので全部入れましょう。

※不足していると催促されます。

再度Atomを閉じて、htmlファイルを開いて保存すると以下のような感じに「Error」「Warning」がでます。

これでも十分エラーチェックできるのですが、html5に対応していないのでMacデフォルト搭載のtidyを更新する必要があります。

※html5を認識していないので、headerやらasideやらをエラーと認識するようです。

<header> is not recognized!

<section> is not recognized!

こんなん、コーディングできひんやんけ！！

これを解決したい場合はtidy-html5を入れましょう。tidyをhtml5に対応させてあげます。

tidy公式

パッケージを入れたあと、Homebrewで手元のtidyもアップデートします。

brew install tidy-html5

これで無事インストールできれば、上記エラーは消えます。

一方で、リンク通ってないよ！brew linkしてくれよ的なエラーが出ることがあります。

↓こんなの

Could not symlink lib/hogehoge.hoge
/usr/local/hogehoge is not writable.

その場合、tidyのバージョンが古いままの可能性があるので tidy -v を叩くと

$ tidy -v HTML Tidy for Mac OS X released on 31 October 2006 - Apple Inc. build 15.8

みたいな表記が出るので、これが原因です。

こいつを解決するためには、何だかいろいろ解決方法が出回っていますが、

$ brew doctor

で一発です。これを実行すると、

と、アクセス権限を変えてくれよと、アドバイスしてくれるのでこれを実行。

その上でもう一度インストールしてみると、うまくいきます。

brew install tidy-html5

困ったときのbrew doctor鉄板ですね。

すると先程のエラーは消えてくれるので、いい感じにhtmlチェック環境を構築できます。

うーん、何だか性に合わないな？という方はもう一つのパッケージw3c-validationをお使いください。

Atomパッケージ w3c-validation

W3C Markup Validatorを利用できる、w3c-validationは手間な設定なく直ぐにインストール可能です。

linterがだるいよ！という方はこちらのほうが向いているかもしれません。

こちらもパッケージなので例にももれずインストールしましょう。

よくインストールされてるやつです。

Atomを再起動して、htmlファイルを開いて保存すればエラーチェックできます。

以下のようにエラーが表示されます。

ただ、自分が使ってみた限りシンプルなタグ閉じ忘れやalt空欄などベーシックなミスのチェックツールとして使うのであれば良いと思いますが、tatget=”_blamk”みたいなスペルミスを見つける精度は無かったので、linterオシではあります。

htmlチェックツール、こんなのも使えるぜ！！

っていうのがあれば、是非コメント欄で教えてください！