Tips

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

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

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

Atomパッケージ linter-tidy

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

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

コードチェック系のパッケージはめちゃくちゃあるので、お間違えの無きよう。ダウンロード数が多いやつが主流なので見分けるポイントです。

linter-tidy

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

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

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

linter … linter-tidy動かす大元のパッケージ

linter-ui-default … アラート時のUIを規定するパッケージ

intentions … linterに必要な付属パッケージ

busy-signal … linterに必要な付属パッケージ

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

html5エラー

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

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

<header> is not recognized!

<section> is not recognized!

コーディングできひんやんけ!!

 

これを解決したい場合はtidy-html5を入れましょう。

tidy公式

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がだるいよ!という方はこちらのほうが向いているかもしれません。

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

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

wc3-validate

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

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

wc3-error-msg

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

 

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

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

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です