Brackets拡張機能スニペット
sassのコードヒントが出るようになってからBracketsを頻繁に使うようになりました。さらに使い勝手をよくするために拡張機能でスニペットをいれてみました。 Bracketsの拡張機能のインストールは簡単です。
ファイル>拡張機能マネージャーでURLからインストール
https://github.com/jrowny/brackets-snippetsを入力してインストール
完了！
もしくはファイル>拡張機能マネージャーで検索して入手可能タブから検索してインストール。どちらにしろお手軽です。
スニペットの使い方
表示 Show Snippetsでスニペットが表示されます。デフォルトではhtmlとjavascriptのスニペットが少々はいっています。
|
1 2 3 4 5 6 7 8 9 |
[ { "name": "link", "trigger": "a", "usage": "a index.html home", "description": "Create an achor with an href", "template": "<a href=\"$${href}\">$${title}</a>" } ] |
上記のソースはhtmlのaタグのスニペットですこのスニペットの使い方は例えば下記のようなソースにするには
|
1 |
<a href="index.html">HOME</a> |
|
1 |
a |
と入力してcommand(ctrl)+option(alt)vでhrefの中身にindex.htmlとaタグで挟まれるラベルにHOMEと入力、もしくは
|
1 |
a index.html HOME |
と入力してcommand(ctrl)+option(alt)vでOKです。どちらの入力方法でも結果は同じです。
スニペットの登録方法
先ほどのaタグのスニペットの登録を参考に僕がsass+compassでよく使うスニペットを登録してみました。 まずはヘルプ>拡張機能のフォルダーを開く>/user/jrowny.brackets.snippets/data/に sass.jsonというファイルを作り上記のaタグを元に編集したものを保存しました。
|
1 2 3 4 5 6 7 8 9 |
[ { "name": "mixin-include", "trigger": "in", "usage": "in i_b", "description": "mixin include", "template": "@include $${mixin};" } ] |
これはsassのミックスインをインクルードするスニペットです。
|
1 |
in |
と入力してcommand(ctrl)+option(alt)vでミックスイン名を入力すると
|
1 |
@include ミックスイン名; |
と表示されます。aタグのときと同じく
|
1 |
in ミックスイン名 |
と入力してcommand(ctrl)+option(alt)vでも同じ結果です。
複数のスニペットを登録するには「,」で区切ります。先ほどのmixinのスニペットの他にレスポンシブデザイン時によく使うスニペットを登録しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
[ { "name": "type-common", "trigger": "tc", "usage": "tc", "description": "media-query type-common", "template": "@if $type == common {}" }, { "name": "type-phone", "trigger": "tp", "usage": "tp", "description": "media-query type-phone", "template": "@if $type == phone {}" }, { "name": "type-tablet", "trigger": "tt", "usage": "tt", "description": "media-query type-tablet", "template": "@if $type == tablet {}" }, { "name": "type-screen", "trigger": "ts", "usage": "ts", "description": "media-query type-screen", "template": "@if $type == screen {}" }, { "name": "type-screen", "trigger": "in", "usage": "in i_b", "description": "mixin include", "template": "@include $${mixin};" } ] |
sassでcssを書くとついついネストしすぎて閉じ括弧がどこかややこしくなってしまうのですがBracketsは閉じ括弧をハイライトしてくれるので可視性がよくなり閉じ括弧抜けのミスが減りました。 これが無料なんだもんなぁ〜
- 2013年10月13日日曜日
- ：Naruhiko Wakai
comments