vimで最強のgreasemonkey開発環境を作ってみた

vim greasemonkey


タイトルは釣りですが、実際にグリモンの開発効率が気持ち悪いくらいに上がりました

2009/06/02追記


動画upしました
初めてなのでいろいろ適当ですが、ご容赦を

これは何？


vimの環境設定の勉強がてら、greasemonkeyの開発環境を作ってみました
環境は、Ubuntu8.0.4です
できることは以下の通り

  • コード補完
  • スニペットに対応
  • user.jsで新規ファイルを作ると、テンプレートを自動に作ってくれる
  • コマンド一発で、firefoxにグリモンをインストール
  • 保存時に自動的にfirefoxの今開いてるページを再読み込み

まずは、vimrcと入れたプラグイン

.vimrc


上記の設定とかをまとめた.vimrcは以下の通りです

set encoding=utf-8
set nu
syntax on

"新しい行のインデントを現在行と同じにする
set autoindent

"インクリメンタルサーチを行う
set incsearch

"タブ文字、行末など不可視文字を表示する
set list

"tabが対応する空白の数
set tabstop=4

"listで表示される文字のフォーマットを指定する
set listchars=tab:>\ ,extends:<

"検索時に大文字を含んでいたら大/小を区別
set smartcase

"新しい行を作ったときに高度な自動インデントを行う
set smartindent

"全角スペースを強調
highlight zenkakuda ctermbg=7
match zenkakuda /　/

"バックスペースでindentを無視 & 改行を越えてバックスペースを許可
set backspace=indent,eol

"入力補完時に、辞書ファイルも読み込む
set complete=.,w,b,u,t,i,k

"共有のクリップボードを使用する
set clipboard=unnamed

"ペーストモードのON/OFF
set pastetoggle=<F12>

"カレントディレクトリを出力
cmap <c-x> <c-r>=expand('%:p:h')<cr>/
"ファイル名(フルパス)を出力
cmap <c-z> <c-r>=expand('%:p:r')<cr>

"---------------------------------------------------------------------
" ファイル毎の設定
"---------------------------------------------------------------------
"ファイル種別毎の辞書ファイル
autocmd FileType javascript :set dictionary=~/.vim/dic/js.dic

"スケルトンファイル
autocmd BufNewFile *.user.js 0r ~/.vim/skeleton/sk.js

"---------------------------------------------------------------------
" 入力補完
"---------------------------------------------------------------------
"<TAB>で補完
" {{{ Autocompletion using the TAB key
" This function determines, wether we are on the start of the line text (then tab indents) or
" if we want to try autocompletion
function! InsertTabWrapper()
	let col = col('.') - 1
		if !col || getline('.')[col - 1] !~ '\k'
				return "\<TAB>"
		else
			if pumvisible()
				return "\<C-N>"
			else
				return "\<C-N>\<C-P>"
			end
		endif
endfunction
" Remap the tab key to select action with InsertTabWrapper
inoremap <tab> <c-r>=InsertTabWrapper()<cr>
" }}} Autocompletion using the TAB key
プラグイン


インストールしたプラグインは以下の通り


以下、それぞれの詳細を解説

コード補完


vimだとオムニ補完言われてますね
fuまで入れると、functionとか表示してくれるやつです


辞書ファイルの設定の仕方は以下を参照
辞書ファイルで入力を補完する ― 名無しのvim使い


autocomplpop.vimを使って、とか押さなくても、自動的に候補を出してくれる方法は以下を参照
ついでに、tab押下で候補を選択する方法も
下記のサイトでは、tabキーだと、普通にtabを入れるときに難儀すると書いてあるけど、自分の環境では、で普通にtabが入れられたので問題ありませんでした
autocomplpop.vimでリアルタイムにキーワード補完 - ナレッジエース


javascriptの辞書ファイルは、以下をベースにgreasemonkey関係の単語を追加したのを自作
/cooldaemon/env/.vim/dict/javascript.dict - labs - Trac


自作したのはこちら
http://kasei-san.sakura.ne.jp/vim/dic/js.dic

スニペット対応


スニペットとは、functionって入力すると、

function( arg ){
}

とか自動的に補完してくれる機能のこと


これは、snipMateなるプラグインを使用
以下のサイトに使い方と、デモが貼ってありました
snipMate.vimをインストールしてみた - きみのハートを8ビットキャスト


ついでに、こっちにもグリモン関係のやつを追記

snippet GM_xmlhttpRequest
	var opt = {
			method 	: 'GET'
		,	url		: '${1:URL}'
		,	onerror	: function(res) { 
				err( "GM_xmlhttpRequest Err!" );
			}
		,	onload	: function(res) {
				if ( res.status != 200 ) {
					err( "Status Code is " + res.status );
				}
				var dom = convertToHTMLDocument(res.responseText);
				${2:/*code*/}
			}
	}

user.jsで新規ファイルを作ると、テンプレートを自動に作ってくれる


こんな風に.vimrcに設定してあげれば、.user.js新規作成時に、テンプレートの内容が入力された状態で立ち上がります

"スケルトンファイル
autocmd BufNewFile *.user.js 0r ~/.vim/skeleton/sk.js


スケルトンファイルの内容は、前回のやつを参照
自作greasemonkeyのテンプレートを公開 - かせいさんとこ

コマンド一発で、firefoxにグリモンをインストール


これはこちらを参照
Big Sky :: 意外と知られていないvimのtips(ファイルがあるディレクトリをコマンドモードで補完する)


これで、

:!firefox <C-z>Enter

で、firefoxで現在編集中のファイルを開くので、user.jsがインストールされます

保存時に自動的にfirefoxの今開いてるページを再読み込み


これは、MozLabっていうfirefoxをコンソールで操作できるプラグインと、以下のサイトにあるvimプラグインの組み合わせで実現
Vimでファイル保存時にFirefoxをリロードする(with MozLab) : Serendip - Webデザイン・プログラミング

最後に


動作してる所を動画で取ってみんなにこの気持ち悪さを見せつけたいです
また後日にでも


そんなかんじー