edc)」を紹介します。Bracketsユーザーで且つEmmetを利用しており、言語も普段からよく使うのはHTML・CSS・JavaScript辺りとかであれば、Emmetで十分だったり足りなくてもsnippets.jsonいじって追加とかで事足りる人もいるとは思いますが、例えばそれをもっとわかりやすく管理したいとかPHP・Ruby・Pythonといったその他の言語でもスニペットを管理したり簡単に呼び出せるようにしたいという時に便利なエクステンションです。検索すれば該当のエクステンションが出てくると思うのでインストール・有効化します。エクステンションが有効化されると、画像のようにエディタ右に電球のようなアイコンが表示されるので、ここからスニペットの登録・管理が可能になります。Manager」がエディタ下に表示され、左の領域にはスニペット追加ボタン・スニペット検索ボタン・現在登録されているスニペットの一覧が表示されています。右の領域にはデフォルトでエクステンションの概要や更新情報が表示されていますが、右上にある「Library」ボタンで登録可能なスニペットライブラリを、同じく右上にある「Settings」ボタンではキー設定の変更やスニペットのインポート・エクスポートなどを行う項目がそれぞれ表示されるようになっています。任意で追加・編集するスニペットの入力などもこの領域で行います。Manager」の左上にある「New+」ボタンから行うことができます。ボタン押下でイメージのようにトリガーや対象言語を選択する項目とエディタが表示され、それぞれどのように選択・入力していくかは以下のようになっています。Triggerスニペットを呼び出すためのトリガーを記述していきます。Description(Optional)スニペットに関する概要を記述する箇所で省略することも可能です。Scope登録したスニペットを使いたい(呼び出したい)言語・拡張子を選択します。HTML・CSS・JavaScriptはもちろん、PHP・Ruby・Perl・Pythonなどにも対応しており、その他テキストやMarkdownなどにも対応しています。---」を選べば言語・拡張子に関係なくそのスニペットを使用できるように設定できます。個人的にはごちゃごちゃになってしまったり意図しないスニペットを呼び出すなどが起きる可能性もあるので、できるだけ言語・拡張子指定して登録した方が良いと思います。Textこの部分にトリガー使用時に展開される内容を記述していきます。いう機能が用意されています。Create」ボタンを押下すればスニペットが登録され、自由に呼び出すことができるようになります。機能このエクステンションにはスニペット呼び出し後のカーソル位置や文字列選択をあらかじめ設定しておける機能がついており、これらを使うことでより便利にスニペットを呼び出し・使うことができるようになります。実際にどのような動きになるかは自分で確認してもらうのが一番なのですが、簡単に説明するとそれぞれ以下のような機能になっています。いう感じで連番で記述されていた場合はTab(Emmetを使用している場合は注意)で番号順にカーソル移動できるようになります。Variable${NUMBER:STRING}という形で記述しておくと、Cursorの動きに加えあらかじめ文字列を入れておいて展開後にはその文字列部分を選択状態にすることが可能になっています。文字列部分は日本語も使用可能なので、例えば${1:ここには○○の値}といったように入力すべき内容のヒントみたいな使い方もできますね。いう感じで記述すれば、あらかじめ文字列を入れておき且つTab(Emmetを使用している場合は注意)でその番号順に簡単にカーソル移動できるようになっています。これらは複数箇所を同時に選択状態にすることも可能になっており、例えば記述箇所は違うけど同じ内容を毎回記述しているという時は、両箇所とも${1}や${1:ここに文字列}のような感じで記述しておきます。あとは、スニペット展開すると指定しておいた複数箇所にカーソルがある状態や複数箇所にカーソルがあり且つ文字列が選択された状態にすることができます。登録したスニペットを使用する場合は、基本的にはトリガー名を入力後にTabでスニペットを呼び出すという流れになりますが、内容によってはトリガー名の入力途中でもTabで呼び出せたり、あとは入力中にヒントが表示されるのでそれを利用(Enterを押すなど)して呼び出すといったこともできます。上で紹介したように登録されているスニペットによってはさらにカーソルを任意の場所へ移動させた状態でスニペットを呼び出したり、複数の場所が指定されている場合は呼び出し後にTabでそれぞれに移動することが可能です。Emmetのキー設定を変える必要があります。このエクステンションのキーを変更する形で問題を解決したいときは「Settings」から変更できるようになっています。動作確認用の記述サンプル上で紹介したCursor・Variable機能とスニペット使用方法を踏まえ、実際にそれぞれ以下のような内容を入力・選択したスニペットを登録し、「test」と入力してスニペットを呼び出してみましょう。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箇所が同時に選択状態になっているのを確認できると思います。Manager」の左側で確認でき、並びも言語別になっているので見やすいです。一覧は背景色付きで表示されているのがトリガー、その横に表示されているテキストはDescriptionの内容となっており、選択すれば右画面が編集画面に切り替わるので、そこでそのスニペットの内容を編集することができます。編集後は登録と同様、右上にある「Save」ボタンでスニペットを保存できます。スニペット一覧の上(「New+」ボタン横)にある虫眼鏡アイコンから登録されているスニペットの検索をすることができます。検索ワードを入力していくと検索結果が絞り込まれて表示されるインクリメンタルサーチになっているので探しやすいですし、特定の言語だけで検索することもできるので、スニペットの登録数がかなり増えてしまってもこの検索機能を利用すれば容易に見つけ出すことができると思います。Manager」左に表示されているスニペット一覧から削除することができます。Confirmという順で選択すればスニペットを削除することができます。Manager」の右上にある「Library」ボタンから内容を確認したり追加できるようになっています。AngularJS)・PHPのスニペットがそれぞれ表示されるので、これらの中で使いたいのがあれば、そのスニペットの右上にある「+」ボタン押下で利用できるスニペットとして登録されて使用可能になります。Manager」左に表示されている一覧から選んで編集することができます。Manager」の右上にある「Settings」ではCursor・Variable機能で使用するキーを変更したり、スニペットのインポート・エクスポートを行えるようになっています。このエクステンションはあらかじめ設定しておくことでスニペット呼び出し後に任意の順でカーソル移動させることができ、デフォルトだと移動するためのキーはTabになっているため、もしEmmetを利用している場合に上手く機能してくれないことがあります。Emmetのキー設定を変えるのでももちろん回避はできますが、できればEmmetはそのままにしたいという時はこのSettings画面内にある「Keystrokes」の項目で変更することができます。「Keystrokes」の下にある「Import/Export」では、その名の通りスニペットをインポート・エクスポートすることができます。既存のスニペットをどうするかや自分が作成したものだけ抜き出すといったように、インポートは3種類、エクスポートは2種類の方法が用意されているので、自分の好みの方法でインポート・エクスポートが可能です。この機能を使えば例えばチーム内で共通のスニペットを使いたい時にも便利そうですし、他にも誰かがWeb上で公開しているスニペットなどがあればそれを簡単にインポートするなんてことも可能になります。edc)」の紹介でした。Cursor・Variable機能も便利ですが、個人的には様々な言語・拡張子に対応していて且つスニペットを簡単にインポート・エクスポートまでできるという点にもすごく惹かれて、今では手放せないエクステンションのひとつになっています。Bracketsをメインエディタとして利用することが前提とはなりますが、毎回入力するのが手間だとかエディタ内で頻繁に使うものを管理・登録したいと思っている方には非常におすすめのエクステンションなので、まだ使ったことがないという人は是非試してみてください。エクステンションの機能や詳細情報などについては以下より確認できます。