BLOG

Brackets拡張機能スニペット

sassのコードヒントが出るようになってからBracketsを頻繁に使うようになりました。さらに使い勝手をよくするために拡張機能でスニペットをいれてみました。 Bracketsの拡張機能のインストールは簡単です。

ファイル>拡張機能マネージャーでURLからインストール

https://github.com/jrowny/brackets-snippetsを入力してインストール

完了!

もしくはファイル>拡張機能マネージャーで検索して入手可能タブから検索してインストール。どちらにしろお手軽です。

スニペットの使い方

表示 Show Snippetsでスニペットが表示されます。デフォルトではhtmlとjavascriptのスニペットが少々はいっています。

上記のソースはhtmlのaタグのスニペットですこのスニペットの使い方は例えば下記のようなソースにするには

と入力してcommand(ctrl)+option(alt)vでhrefの中身にindex.htmlとaタグで挟まれるラベルにHOMEと入力、もしくは

と入力してcommand(ctrl)+option(alt)vでOKです。どちらの入力方法でも結果は同じです。

スニペットの登録方法

先ほどのaタグのスニペットの登録を参考に僕がsass+compassでよく使うスニペットを登録してみました。 まずはヘルプ>拡張機能のフォルダーを開く>/user/jrowny.brackets.snippets/data/に sass.jsonというファイルを作り上記のaタグを元に編集したものを保存しました。

これはsassのミックスインをインクルードするスニペットです。

と入力してcommand(ctrl)+option(alt)vでミックスイン名を入力すると

と表示されます。aタグのときと同じく

と入力してcommand(ctrl)+option(alt)vでも同じ結果です。

複数のスニペットを登録するには「,」で区切ります。先ほどのmixinのスニペットの他にレスポンシブデザイン時によく使うスニペットを登録しました。

sassでcssを書くとついついネストしすぎて閉じ括弧がどこかややこしくなってしまうのですがBracketsは閉じ括弧をハイライトしてくれるので可視性がよくなり閉じ括弧抜けのミスが減りました。 これが無料なんだもんなぁ〜

    Sponsored Links

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です