人間は絶対にミスをするものなので、コーディング中にミスは絶対に起きます。
AtomでHTMLのコードのエラーチェックできるパッケージを探したところ、便利なものがいくつかあったので2つご紹介します。
Atomパッケージ linter-tidy
まずおすすめするのが、linter-tidyです。linter-tidy公式ページ
巷では割と上級者向けなどと言われていますが、全然そんなことはなくてHTML構文エラーがあったらリストで通知してくれるすぐれものです。
コードチェック系のパッケージはめちゃくちゃあるので、お間違えの無きよう!
基本的にダウンロード数が多いやつがお目当てのやつなので見分けるポイントです。
使い方は簡単、まずはlinter-tidyをインストールします。
インストール後、Atomを一旦閉じて適当なhtmlファイルを開いて保存を押すと、linterをインストールしろという文章が出るのでインストールします。
linter-tidyの付属パッケージとして以下、インストールを促されます。害はないので全部入れましょう。
※不足していると催促されます。
linter … linter-tidy動かす大元のパッケージ
linter-ui-default … アラート時のUIを規定するパッケージ
intentions … linterに必要な付属パッケージ
busy-signal … linterに必要な付属パッケージ
再度Atomを閉じて、htmlファイルを開いて保存すると以下のような感じに「Error」「Warning」がでます。
これでも十分エラーチェックできるのですが、html5に対応していないのでMacデフォルト搭載のtidyを更新する必要があります。
※html5を認識していないので、headerやらasideやらをエラーと認識するようです。
<header> is not recognized!
<section> is not recognized!
こんなん、コーディングできひんやんけ!!
これを解決したい場合はtidy-html5を入れましょう。tidyをhtml5に対応させてあげます。
パッケージを入れたあと、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
で一発です。これを実行すると、
You should create these directories and change their ownership to your account.
sudo mkdir -p /usr/local/lib /usr/local/hogehoge
sudo chown -R $(whoami) /usr/local/lib /usr/local/hogehoge2
と、アクセス権限を変えてくれよと、アドバイスしてくれるのでこれを実行。
その上でもう一度インストールしてみると、うまくいきます。
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チェックツール、こんなのも使えるぜ!!
っていうのがあれば、是非コメント欄で教えてください!