Category: vim

0 RESPONSES comments
5月 6TH, 2010
By ISPERN

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

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

HTML

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

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

    2. http://tidy.sourceforge.net/

  2. ダウンロードしたファイルを、パスの通っているディレクトリに置く。
  3. 「.vim/ftplugin」下に”html.vim”を作成する。
  4. “html.vim”に以下を記述する。
    5. 	html.vim
	compiler tidy
	setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ \"%\"

CSS

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

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

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

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

JavaScript

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

  1. JavaScript Lintをダウンロード。

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

Tags:

categories JavaScript, vim

2 RESPONSES comments
1月 26TH, 2010
By ISPERN

MacVimでRailsの環境を作る 〜neocomplcacheインストール〜

いろいろなキーワードの補完リストを自動的に表示してくれる
neocomplcache
というvimスクリプトを入れました。
autocomplpopみたいなスクリプトです。

主な機能

  • シンタックス補完
  • 辞書ファイルの補完
  • タグファイルの補完
  • ファイル名の補完
  • オムニ補完
  • スニペット補完

これだけでも「おぉ！」と思いましたが、同じような機能補完はautocomplpopでもできるんですよね。
ただ、以下のような理由からneocomplcacheを選択しました。

  • カスタマイズ項目が豊富
  • プラグインで拡張が可能
  • SnipMateのトリガーを補完リストに表示できる
  • autocomplpopでもSnipMateのトリガーを補完リストに表示できるが、パッチを当てる必要があったり、対象が大文字の場合のみだったりと使いにくい

インストール

下のurlよりダウンロードして、『.vim』フォルダにインストール。
shougo’s neocomplcache at master – github

vimrcの設定

こんな感じです。

" neocomplcache
let g:NeoComplCache_EnableAtStartup = 1
" 大文字小文字を区別する
let g:NeoComplCache_SmartCase = 1
" キャメルケース補完を有効にする
let g:NeoComplCache_EnableCamelCaseCompletion = 1
" アンダーバー補完を有効にする
let g:NeoComplCache_EnableUnderbarCompletion = 1
" シンタックスファイルの補完対象キーワードとする最小の長さ
let g:NeoComplCache_MinSyntaxLength = 3
" プラグイン毎の補完関数を呼び出す文字数
let g:NeoComplCache_PluginCompletionLength = {
  \ 'keyword_complete'  : 2,
  \ 'syntax_complete'   : 2
  \ }
" ファイルタイプ毎の辞書ファイルの場所
let g:NeoComplCache_DictionaryFileTypeLists = {
            \ 'default' : '',
            \ 'java' : $HOME.'/.vim/dict/j2se14.dict',
            \ 'javascript' : $HOME.'/.vim/dict/javascript.dict',
            \ 'php' : $HOME.'/.vim/dict/PHP.dict',
            \ }

snipMateのトリガーを補完リストに表示する

“g:neocomplcache_snippetsdir”で任意のスニペットフォルダを指定できます。
このパラメータに、snipMateのスニペットフォルダを指定すると、
snipMateのトリガーも補完リストに表示してくれます。

ただ、個人的にsnipMateの方が使いやすかったので、スニペット補完に関してはsnipMateを使用しています。
このとき、補完リストにneocomplcacheとsnipMateのトリガーが重複して表示されてしまっていたので、
“g:neocomplcache_snippetsdir”の設定はしていません。
その代わり、snipMateのトリガーを補完リストに表示するneocomplcacheのプラグインが
公開されていたので、そちらを使用してトリガーが表示されるようにしました。

このサイトで紹介されています。
neocomplcache + snipMate の接着剤 snipMate_complete を試してみる

所感

初回起動時にキーワードがキャッシュされるので、ストレスなく補完リストが表示されました。
snipMateのトリガーを補完リストに表示することで、キーワードを覚えておく必要もないですし、
他にも辞書ファイルやシンタックスなどのキーワードが補完リストに表示されるので、
コーディングもしやすくなりました。
かなり素敵なスクリプトです！！作者の方に感謝です！！

追記

作者様よりコメントを頂き、若干修正しました。
http://lingr.com/room/vim/archives/2010/02/03

Tags: , ,

categories Ruby on Rails, mac, vim