JavaScriptとCSSの構文チェッカ2011

まとめ

npm に便利ツールが揃ってきてる。

果たして JavaScript という言語が構文チェッカに向いているのか自分には分からないんだけど1、昔と違って全部 JavaScript で済むという環境が本当に揃ってきていて、かつては Perl などで書かれていたツールが今は JavaScript に集約されつつあるみたい。

とりあえず jshint, csslint をうまく使えるようにしていきたい。

背景

ここ数年は Firebug などのブラウザ上の強力なデバッガ、チェッカが活躍する機会が多かったけれども、とは言え

いちいち目的のページを手で開いてチェッカのレポート、あるいは警告やエラーの出ないことをを目視確認するのはバカバカしい

とずっと思っていた。また手動＆目視は作業者のレベルに大きく左右されてしまうのも問題。「ちゃんとチェックしてよ」と言わずに済むならその方が嬉しい。言う手間も含めて省力化できるし、漏れも防げる。

手作りの HTML についてはだいぶ前に

簡単なWeb作り向けRakefile作った

なんてものを作って

  • HTML tidy
  • linkchecker

を利用していた2んだけど、やはり

  • JavaScript
  • CSS

も対象にしたい。もちろん

The W3C Markup Validation Service

はあるんだけど、

  • ローカルだけで
  • できるだけサクっと利用できる

ものが欲しい。ということで改めて探してみると最近は JavaScript 製で揃ってきているみたい。

リスト

JSLint

最初に JavaScript 製のツールがキテるっぽいと思ったのはこの名前を聞いてから。

もちろんサイトが有名なんだけど、

npm install -g jslint

するとコマンドがインストールできる（もちろん今のところ Un*x 系の環境が必要）。

最近 Emacs 22 + js2-mode から Emacs 23 + js-mode に移行したので以前よりチェックが甘くなってしまって IE のバグを踏んで苦しんだのもこれを使おうと思ったきっかけ。

ただし jslint はちょっと不評な面もあるらしい。

JSHint

ということで fork したのがこれ。

同じく

npm install -g jshint

でインストールでき、実行ファイルが入る。これについては

jshint4rというものを作りました

Rubygems で入れられるバージョンを作ってみたので Windows の人も試してみてね。

JavaScript Lint

JavaScript Lint

Win, Mac, Linux 用バイナリがあるんだけど、止まってるっぽいなぁ、これ。

csslint

npm search すればイロイロ出てくるんだなと試して見つけたのがコレ。

あ、今見ると IDEA*IDEA で紹介されてるのか。知らなかった。

動かしてみると selector に ID 使うんじゃないとか言われる。ん？ 最近はそういう常識なの？ メンテナンス性の項目に入ってるみたい。なるほど…。

JS[LH]int ほどにはこうやって使ってみてる、みたいな日本語記事を見かけないけど、評判はそれなりにいいみたい。 　 CSSTidy ってのもあって最適化もしてくれるんだけど、今後は期待できそうにないかなぁ。

  1. 少なくとも Ecma レベルだと全然機能が足りないと思うんだけど、node.js 環境なら十分便利なのかも。 ↩

  2. と言っても実際の利用機会は作った時期から半年程度で今はほとんどないんだけど ↩

More