sharedhat

今回はスニペットの作成について解説します。
スニペットはよく使うコードの断片を挿入できる便利な機能です。
挿入位置はファイルのカーソル位置に挿入します。

今回のスニペットのサンプルを作成したので、興味のある人は解凍してbundlesディレクトリにおいてください。
メニューにExample Bundleと表示されるはずです。

スニペットサンプル:
http://dl.dropbox.com/u/603849/example.ruble-snippets.zip

スニペットファイルを作る

まず、スニペットを記述するファイルを作成します。
ファイル名はsnippets.rbもしくは、サフィックスが_snippets.rbとなる形にします。

ファイルはsnippetsディレクトリに格納します。

使い分けはスニペットが少ない場合と複数のスニペットを分割して管理したい場合とで分けるといいと思います。

例1 スニペットが少ない場合

snippets.rbを作成して、すべてのスニペットをこのファイルに記述します。

/snippets/snippets.rb

例2 スニペットを分類して管理する場合

データベース、ビュー、その他などに分類する場合はファイルをそれぞれ分けて、ファイル名の最後が_snippets.rbになるようにします。

/snippets/db_snippets.rb
/snippets/utils_snippets.rb
/snippets/view_snippets.rb

スニペットを記述する

スニペットファイルを開いて、コードを記述します。

モジュールの読み込み

ファイルの先頭に下記のコードを記述して、モジュールを読み込みます。

require 'ruble'

スニペットの定義

フォーマットは下記のような形になります。

snippet [name] do |s|
	s.scope = [scope]
	s.trigger = [trigger]
	s.expansion = [expansion]
end

それぞれの項目の説明は次のようになります。

name スニペットの名称です。
バンドル毎にユニークな名称である必要があります。メニューの表示にも利用されるのでわかりやすい名称がいいと思います。
scope スニペットの有効範囲です。
スニペットを利用できる条件を指定することができます。
Shift + Control + Pを押すことで、カーソル位置のスコープをチェックすることができます。
trigger スニペットを挿入するトリガーになる文字列です。
.fooとした場合は、.fooとタイプした後にTABキーを押すとスニペットがカーソル位置に挿入されます。
expansion スニペットコードです。
ここで指定した内容が、スニペットとして挿入されます。
${[number]:[placeholder]}の形式でプレースホルダーを指定することができます。
また、${0}を記述すると挿入後のカーソルキーの位置も指定できます。
PHPのスニペットなどでは変数に$がつく場合バックスラッシュでエスケープしてください。

スニペットの定義の例

次の例ではjavascriptファイルのみで有効な”Element inject”というスニペットを定義しています。
.injectとタイプしてTABキーを押すと、2つのプレースホルダー付でスニペットを挿入します。

snippet 'Element inject' do |s|
	s.scope = 'source.js'
	s.trigger = '.inject'
	s.expansion = '$(${1:element}).inject(${2:container});${0}'
end

スニペット定義の応用

with_defaultsを利用するとスニペットにまとめてデフォルト値を設定することができます。

with_defaults :scope => 'source.js' do

	snippet 'inject' do |s|
		s.trigger = '.inject'
		s.expansion = '\$(${1:element}).inject(${2:container});${0}'
	end

	snippet 'adopt' do |s|
		s.trigger = '.adopt'
		s.expansion = '\$(${1:container}).adopt(${2:elements});${0}'
	end

end

スニペットメニューの定義

メニューからスニペットを挿入できるようにするには、bundle.rbを編集してメニューを定義する必要があります。
フォーマットは下記のような形になります。

bundle.menu [bundle] do |main_menu|

	main_menu.command [sunippet_name]

	main_menu.separator

	main_menu.menu [submenu] do |submenu|
		submenu.command [sunippet_name]
		submenu.separator
		submenu.command [sunippet_name]
	end

end

コマンドの指定にはスニペットの名称を指定します。

main_menu.command [sunippet_name]

メニューに区切りを線をいれたい場合はseparatorを指定します。

main_menu.separator

サブメニューを作成したい場合はメインメニューと同じように作成します。

main_menu.menu [submenu] do |submenu|
	submenu.command [sunippet_name]
	submenu.separator
	submenu.command [sunippet_name]
end

スニペットメニューの例

下記の例ではExampleメニューの中に3つのスニペット挿入のメニューを定義しています。

bundle.menu 'Example' do |main_menu|

	main_menu.command 'example_snippet1'

	main_menu.separator

	main_menu.menu 'example_snippet_list' do |submenu|
		submenu.command 'example_snippet2'
		submenu.separator
		submenu.command 'example_snippet3'
	end

end

メニューの階層は下記の通りになります。

	/Example
		/example_snippet1
		/example_snippet_list
			/example_snippet2
			/example_snippet3

スニペットの動作確認

Bundlesビューを開いて、対象のバンドル名を選択し、マウスを右クリックして、コンテキストメニューのReloadを選択します。
ツリーに定義したスニペットが表示されていれば、読み込みはできています。

定義したスニペットが有効なファイルを開いて、トリガー文字列を入力し、TABキーを押すとスニぺットが挿入されるはずです。

スニペットがうまく動かない場合は下記のことを試してみてください。

1. キャッシュファイルの削除

Aptana3は一度バンドルを読み込むとキャッシュファイルを作成するので、キャッシュを削除します。
キャッシュファイルのファイル名はcache.yamlです。

キャッシュファイルを削除したら、Bundlesビューを再読み込みしてみてください。

2. キャッシュファイルの削除とAptana3再起動

キャッシュファイルを削除して、再読み込みしてもうまく動かない場合は
もう一度キャッシュファイルを削除して、Aptana3を再起動してみてください。

これでうまく動くはずです。

次回はテンプレートの作成を解説します。

Trackback:

It is a comment that has been gotten before.

トラックバックを下記のURLに送ってください。
http://sharedhat.com/blog/1759/trackback/

Reply:

Please give the comment to this article.





個人的なフォトログサイト

Wordpressのフォトログテーマ

Concrete5のアドオンパッケージ

this site is licensed under a Creative Commons License But, a part of contents is excluded.
Powered by WordPress