MacVimでHTML,CSS,JavaScriptの文法チェック

MacVimでHTML、CSS、JavaScriptを文法チェックをする方法です。
HTMLとCSSはmakeコマンド、JavaScriptはファイル保存でチェックできるようにしました。

HTML

HTMLの文法チェックにはHTML Tidyを使います。
HTML Tidyは、文法のチェックや自動修正、フォーマットをしてくれるツールです。

こちらのサイトに日本語訳のドキュメントがあります。
HTML TIDY で Web ページをお掃除する

  1. ここからHTML Tidyをダウンロード
    http://tidy.sourceforge.net/
  2. ダウンロードしたファイルを、パスの通っているディレクトリに置く。
  3. 「.vim/ftplugin」下に”html.vim”を作成する。
  4. “html.vim”に以下を記述する。

CSS

CSSの文法チェックは、”WebService::Validator:CSS::W3C”というperlモジュールを使います。

  1. “WebService::Validator:CSS::W3C”のモジュールをCPAN経由でインストール。
  2. css.vimをダウンロードする。
    http://www.vim.org/scripts/script.php?script_id=1577
  3. “css.vim”を「.vim/compiler」に置く。
  4. “validate_css”をパスの通っているディレクトリに置く。
  5. 「.vim/ftplugin」に”css.vim”を作成する。
  6. 以下を記述する。

JavaScript

JavaScriptのチェックは、JavaScript LintというチェックツールとjavaScriptLint.vimというvimプラグインを使います。

  1. JavaScript Lintをダウンロード。
    http://www.javascriptlint.com/
  2. “jsl”という名前のファイルをパスの通っているディレクトリに置く。
  3. javaScriptLint.vimをダウンロードする。
    http://www.vim.org/scripts/script.php?script_id=2578
  4. “javaScriptLint.vim”を、「.vim/plugin」に置く。

これでファイル保存時にチェックできるようになります。
エラーがある場合、下の画像のようにエラーメッセージが表示されて、
エラーのある行にカーソルが移動します。

ファイル保存時のエラーチェック

所感

普段はHTMLやCSSよりもJSを書く方が多いので、保存したときに自動でチェックしてくれるのはかなり便利です。
よくやる「カンマの文法エラー」などもきちんとチェックしてくれるので助かります。