Free Writing

5月 6TH, 2010
By ISPERN

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

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

HTML

HTML Tidyを使って、チェックします。

ここからHTML Tidyをダウンロード

http://tidy.sourceforge.net/

ダウンロードしたファイルを、パスの通っているディレクトリに置く。
「.vim/ftplugin」下に”html.vim”を作成する。
“html.vim”に以下を記述する。

	html.vim
	compiler tidy
	setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ \"%\"

CSS

“WebService::Validator:CSS::W3C”というperlモジュールを使って、チェックします。

“WebService::Validator:CSS::W3C”のモジュールをCPAN経由でインストール。
css.vimをダウンロードする。

http://www.vim.org/scripts/script.php?script_id=1577

“css.vim”を「.vim/compiler」に置く。
“validate_css”をパスの通っているディレクトリに置く。
「.vim/ftplugin」に”css.vim”を作成する。
以下を記述する。

	css.vim
	compiler css

JavaScript

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

JavaScript Lintをダウンロード。

http://www.javascriptlint.com/

“jsl”を、パスの通っているディレクトリに置く。
javaScriptLint.vimをダウンロードする。
http://www.vim.org/scripts/script.php?script_id=2578
“javaScriptLint.vim”を、「.vim/plugin」に置く。

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

所感

普段はHTMLやCSSよりもJSを書く方が多いのですが、保存したときに自動でチェックしてくれるのは
かなり便利です。今までvimでコード書いているときは、エラーを事前に知る術がなかったので。
あとよくやるのが、「カンマが余計に付いていてFireFoxじゃエラーにならないけどIEでエラーになる」
とかですが、それもきちんとチェックしてくれるので助かっています。

Social Bookmark Service