Brackets:様々な言語のスニペット登録・管理ができるエクステンション「Brackets Snippets (by edc)」

Brackets:様々な言語のスニペット登録・管理ができるエクステンション「Brackets Snippets (by edc)」

Bracketsでスニペットの登録・管理を行いたい時に便利なエクステンション「Brackets Snippets (by edc)」を紹介します。Bracketsユーザーで且つEmmetを利用しており、言語も普段からよく使うのはHTML・CSS・JavaScript辺りとかであれば、Emmetで十分だったり足りなくてもsnippets.jsonいじって追加とかで事足りる人もいるとは思いますが、例えばそれをもっとわかりやすく管理したいとかPHP・Ruby・Pythonといったその他の言語でもスニペットを管理したり簡単に呼び出せるようにしたいという時に便利なエクステンションです。

インストール・起動方法

インストール後、エディタ右に電球のようなアイコンが表示される

Bracketsの「拡張機能マネージャー」で Brackets Snippets (by edc) と検索すれば該当のエクステンションが出てくると思うのでインストール・有効化します。

エクステンションが有効化されると、画像のようにエディタ右に電球のようなアイコンが表示されるので、ここからスニペットの登録・管理が可能になります。

電球アイコンをクリックでSnippets Managerが表示される

アイコンをクリックするとイメージのような「Snippets Manager」がエディタ下に表示され、左の領域にはスニペット追加ボタン・スニペット検索ボタン・現在登録されているスニペットの一覧が表示されています。
右の領域にはデフォルトでエクステンションの概要や更新情報が表示されていますが、右上にある「Library」ボタンで登録可能なスニペットライブラリを、同じく右上にある「Settings」ボタンではキー設定の変更やスニペットのインポート・エクスポートなどを行う項目がそれぞれ表示されるようになっています。
また、任意で追加・編集するスニペットの入力などもこの領域で行います。

基本的な使い方

スニペットを登録

スニペット登録画面

スニペットの登録は「Snippets Manager」の左上にある「New+」ボタンから行うことができます。
ボタン押下でイメージのようにトリガーや対象言語を選択する項目とエディタが表示され、それぞれどのように選択・入力していくかは以下のようになっています。

Trigger
スニペットを呼び出すためのトリガーを記述していきます。
Description(Optional)
スニペットに関する概要を記述する箇所で省略することも可能です。
Scope
登録したスニペットを使いたい(呼び出したい)言語・拡張子を選択します。
HTML・CSS・JavaScriptはもちろん、PHP・Ruby・Perl・Pythonなどにも対応しており、その他テキストやMarkdownなどにも対応しています。
また、この項目で「— Any —」を選べば言語・拡張子に関係なくそのスニペットを使用できるように設定できます。
ただ、個人的にはごちゃごちゃになってしまったり意図しないスニペットを呼び出すなどが起きる可能性もあるので、できるだけ言語・拡張子指定して登録した方が良いと思います。
Text
この部分にトリガー使用時に展開される内容を記述していきます。
また、「Text」という項目名横にある「?」にホバーすると確認できますが、このエクステンションには展開後に任意の箇所へカーソルを移動することができる Cursor とあらかじめ文字列を入れておき展開後にその文字列を選択した状態にしておくことができる Variable という機能が用意されています。

上記をそれぞれ入力し、あとは右上にある「Save」または「Save and Create」ボタンを押下すればスニペットが登録され、自由に呼び出すことができるようになります。

Cursor と Variable 機能

このエクステンションにはスニペット呼び出し後のカーソル位置や文字列選択をあらかじめ設定しておける機能がついており、これらを使うことでより便利にスニペットを呼び出し・使うことができるようになります。
実際にどのような動きになるかは自分で確認してもらうのが一番なのですが、簡単に説明するとそれぞれ以下のような機能になっています。

Cursor
スニペット展開後に任意の場所にカーソルを移動したいときは${NUMBER}という形で記述し、その際に${1},${2},${3} … という感じで連番で記述されていた場合はTabEmmetを使用している場合は注意)で番号順にカーソル移動できるようになります。
Variable
${NUMBER:STRING}という形で記述しておくと、Cursorの動きに加えあらかじめ文字列を入れておいて展開後にはその文字列部分を選択状態にすることが可能になっています。
文字列部分は日本語も使用可能なので、例えば${1:ここには○○の値}といったように入力すべき内容のヒントみたいな使い方もできますね。
こちらもカーソルを移動させるよう記述した時と同様、${1:ここに文字列},${2:ここに文字列},${3:ここに文字列} … という感じで記述すれば、あらかじめ文字列を入れておき且つTabEmmetを使用している場合は注意)でその番号順に簡単にカーソル移動できるようになっています。

さらに、これらは複数箇所を同時に選択状態にすることも可能になっており、例えば記述箇所は違うけど同じ内容を毎回記述しているという時は、両箇所とも${1}${1:ここに文字列}のような感じで記述しておきます。
あとは、スニペット展開すると指定しておいた複数箇所にカーソルがある状態や複数箇所にカーソルがあり且つ文字列が選択された状態にすることができます。

スニペットを使用

登録したスニペットを使用する場合は、基本的にはトリガー名を入力後にTabでスニペットを呼び出すという流れになりますが、内容によってはトリガー名の入力途中でもTabで呼び出せたり、あとは入力中にヒントが表示されるのでそれを利用(Enterを押すなど)して呼び出すといったこともできます。
また、上で紹介したように登録されているスニペットによってはさらにカーソルを任意の場所へ移動させた状態でスニペットを呼び出したり、複数の場所が指定されている場合は呼び出し後にTabでそれぞれに移動することが可能です。

ただ、Emmetを使用しているなど環境によってはこのTabでカーソルを移動させる機能がうまく動かないこともあり、その場合はBrackets Snippets (by edc) またはEmmetのキー設定を変える必要があります。
もし、このエクステンションのキーを変更する形で問題を解決したいときは「Settings」から変更できるようになっています。

動作確認用の記述サンプル

上で紹介したCursor・Variable機能とスニペット使用方法を踏まえ、実際にそれぞれ以下のような内容を入力・選択したスニペットを登録し、「test」と入力してスニペットを呼び出してみましょう。

  • Trigger: test
  • Description: Cursor と Variable のテスト
  • Scope: 「— Any —」を選択
  • Text: 1.${1:foo}、2.${2:bar}、3.${3:baz}

問題なければ「1.foo、2.bar、3.baz」というテキスト表示され且つ「foo」が選択状態になっているのを確認でき、Tabを押すと「bar」が選択状態に、さらにもう一度Tabを押すと次は「baz」が選択状態になると思います。
また、1.${1:foo}、2.${2:bar}、3.${3:baz}としていたものを1.${1:foo}、2.${1:bar}、3.${1:baz}に変更して再度試してもらえれば、同じく「1.foo、2.bar、3.baz」というテキストが表示されますが、「foo」「bar」「baz」の3箇所が同時に選択状態になっているのを確認できると思います。

スニペットの確認・編集

自分が登録したものをはじめ、現在登録されているスニペットは「Snippets Manager」の左側で確認でき、並びも言語別になっているので見やすいです。
一覧は背景色付きで表示されているのがトリガー、その横に表示されているテキストはDescriptionの内容となっており、選択すれば右画面が編集画面に切り替わるので、そこでそのスニペットの内容を編集することができます。
編集後は登録と同様、右上にある「Save」ボタンでスニペットを保存できます。

また、スニペット一覧の上(「New+」ボタン横)にある虫眼鏡アイコンから登録されているスニペットの検索をすることができます。
検索ワードを入力していくと検索結果が絞り込まれて表示されるインクリメンタルサーチになっているので探しやすいですし、特定の言語だけで検索することもできるので、スニペットの登録数がかなり増えてしまってもこの検索機能を利用すれば容易に見つけ出すことができると思います。

スニペットを削除

スニペットを削除したい場合は「Snippets Manager」左に表示されているスニペット一覧から削除することができます。
各スニペットにホバーすると右に「×」マークが表示されるので、あとは不要なものであれば「×」マーク → Confirmという順で選択すればスニペットを削除することができます。

ライブラリからスニペットを登録

Libraryからスニペットを登録

エクステンションのインストール直後からJavaScriptがあらかじめ幾つか登録されているのを確認できると思いますが、あらかじめ用意されているスニペットは他にも幾つかあり、それらは「Snippets Manager」の右上にある「Library」ボタンから内容を確認したり追加できるようになっています。
「Library」ボタンを押下するとイメージのような画面に切り替わり、HTML・CSS・JavaScript(VanillaJS と AngularJS)・PHPのスニペットがそれぞれ表示されるので、これらの中で使いたいのがあれば、そのスニペットの右上にある「+」ボタン押下で利用できるスニペットとして登録されて使用可能になります。
また、「Library」から引っ張ったけどトリガー名や内容を変えたいという時は、自身で登録したスニペットを編集した時と同じように「Snippets Manager」左に表示されている一覧から選んで編集することができます。

キー変更やスニペットのインポート・エクスポート

Settings画面

「Snippets Manager」の右上にある「Settings」ではCursor・Variable機能で使用するキーを変更したり、スニペットのインポート・エクスポートを行えるようになっています。

このエクステンションはあらかじめ設定しておくことでスニペット呼び出し後に任意の順でカーソル移動させることができ、デフォルトだと移動するためのキーはTabになっているため、もしEmmetを利用している場合に上手く機能してくれないことがあります。
Emmetのキー設定を変えるのでももちろん回避はできますが、できればEmmetはそのままにしたいという時はこのSettings画面内にある「Keystrokes」の項目で変更することができます。

「Keystrokes」の下にある「Import/Export」では、その名の通りスニペットをインポート・エクスポートすることができます。
既存のスニペットをどうするかや自分が作成したものだけ抜き出すといったように、インポートは3種類、エクスポートは2種類の方法が用意されているので、自分の好みの方法でインポート・エクスポートが可能です。
この機能を使えば例えばチーム内で共通のスニペットを使いたい時にも便利そうですし、他にも誰かがWeb上で公開しているスニペットなどがあればそれを簡単にインポートするなんてことも可能になります。

以上、Bracketsで様々な言語のスニペット登録・管理ができるエクステンション「Brackets Snippets (by edc)」の紹介でした。
Cursor・Variable機能も便利ですが、個人的には様々な言語・拡張子に対応していて且つスニペットを簡単にインポート・エクスポートまでできるという点にもすごく惹かれて、今では手放せないエクステンションのひとつになっています。
もちろんBracketsをメインエディタとして利用することが前提とはなりますが、毎回入力するのが手間だとかエディタ内で頻繁に使うものを管理・登録したいと思っている方には非常におすすめのエクステンションなので、まだ使ったことがないという人は是非試してみてください。

エクステンションの機能や詳細情報などについては以下より確認できます。

Back to Top

Brackets:様々な言語のスニペット登録・管理ができるエクステンション「Brackets Snippets (by edc)」

Brackets:様々な言語のスニペット登録・管理ができるエクステンション「Brackets Snippets (by edc)」

/ Services & Resource

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。