Clever Geek Handbook

Sublime Text 2：スニペットの作成方法

画像

Sublime Text 2を使い始めて、便利なスニペットを作成することで生活を少し簡略化したいことに気づきましたが、当時はネットワーク上でロシア語の指示がなかったという事実に直面しました。 良い英語の記事を見つけたので、私は翻訳することを決め、同時にそれを少し補足し、あなたと共有する準備ができているいくつかの興味深いニュアンスを認識しました。



PMの不正確さ、タイプミス、エラーについて書きます-すぐに修正します。









スニペット



これはSublime Text 2のスニペットテンプレートです。Tools-NewSnippetからアクセスできます。



  1. < スニペット >
  2. < コンテンツ > <！ [CDATA [
  3. こんにちは、$ {1：this}は$ {2：snippet}です。
  4. ]] >
  5. </ コンテンツ >
  6. <！-オプション：tabTriggerを設定して、スニペットをトリガーする方法を定義します->
  7. <！-<tabTrigger>こんにちは</ tabTrigger>->
  8. <！-オプション：スコープを設定して、スニペットがトリガーする場所を制限します->
  9. <！-<scope> source.python </ scope>->
  10. </ スニペット >




挿入するコードは、直接<！[CDATA [ some code ]]>の間に含まれています。 実際の例を次に示します。

  1. < スニペット >
  2. < コンテンツ > <！ [CDATA [
  3. assert_equal（$ {1：予想}、$ {0：実績}）
  4. ]] > </ content >
  5. < tabTrigger > ase </ tabTrigger >
  6. < scope > source.ruby </ scope >
  7. < description > assert_equal（..） </ description >
  8. </ スニペット >
。



ここで、エディターに「ase」と入力してTabキーを押すと、「ase」がスニペットで指定されたコードに置き換えられます。

  1. assert_equal（予想、実際）




これで、$ {1：expected}は、Tabを押した後に最初に「expected」という単語が強調表示され、編集の準備ができ、Tabをもう一度押すと、カーソルが$ {0：actual}に切り替わります。 。 「実際」という単語が強調表示されます。



奇妙なことに、$ {0：actual}が2番目に強調表示されます。 「ase」を入力した後にTabキーを押すと、$ {0：actual}が強調表示されると思うかもしれません。 0は1の前になりますが、ここにはありませんでした。$ {0}はどこに置いても常に最後に割り当てられます。 したがって、次のようなスニペットがある場合：

  1. < スニペット >
  2. < コンテンツ > <！ [CDATA [
  3. こんにちは、$ {1}は$ {2：snippet}です。 $ {0}、$ {3}
  4. ]] > </ content >
  5. <！-オプション：tabTriggerを設定して、スニペットをトリガーする方法を定義します->
  6. < tabTrigger >こんにちは</ tabTrigger >
  7. <！-オプション：スコープを設定して、スニペットがトリガーする場所を制限します->
  8. <！-<scope> source.python </ scope>->
  9. </ スニペット >


Tabキーを押すたびに、$ {1}に、次に$ {2}に、次に$ {3}に、最後に$ {0}に移動します。

また、$ {0}に達すると、選択範囲の移動が停止することに注意してください。 $ {0}は、ユーザーが通常、すぐにさらに書き始めるコードの部分を示していると推測できます。



タブでの収穫にうんざり



この方法でしかTabボタンをバインドできないように思えるかもしれません。 しかし、ctrl-alt-を使用する場合はどうでしょう。 そのようなラッパーを作成するには：<％=％>？

これを実現するには、キーボードショートカットをスニペットにバインドする必要があります。

[設定]、[キーバインド-ユーザー]の順に移動します。 外観は次のとおりです。

  1. [
  2. {
  3. 「キー」：["command + shift +。"]、
  4. 「コマンド」：「insert_snippet」、
  5. 「引数」：{「名前」：「パッケージ/ユーザー/ erb.sublime-snippet」}
  6. }
  7. ]


そのため、いくつかのオプションがあります。

「キー」：目的のキーボードショートカット

「コマンド」：コマンド名

「引数」：オプションの引数



最後にスニペットを作成する必要があることを忘れないでください:)すべての「パッケージ」が配置されている場所を見つけるには、[設定]メニュー項目をクリックし、[パッケージの参照]をクリックします。 ユーザーフォルダーを見つけて、次の内容のerb.sublime-snippetを追加します。

  1. < スニペット >
  2. < コンテンツ > <！ [CDATA [ <％ = $ {1} ％> ]] > </ content >
  3. </ スニペット >




できた！



ジモロドクのサプリメント


1. $ TM_SELECTED_TEXTなどの変数を使用できます。 スニペットにホットキーが指定されたとき、またはコマンドバーからスニペットが起動されたときに、デフォルト値を指定すると便利です。 



<snippet> <content><![CDATA[console.log(${0:$TM_SELECTED_TEXT});]]></content> <tabTrigger>cl</tabTrigger> <scope>source.js</scope> <description>console.log</description> </snippet>




2.正規表現を使用して、入力中にスニペットの本体を変更できます。 



 <snippet> <content><![CDATA[set${5:T}${5/(T)|(I).*/(?1:imeout)(?2:nterval)/}(${20:function () \{${0:$TM_SELECTED_TEXT}\}}, ${10:50});]]></content> <tabTrigger>set</tabTrigger> <scope>source.js</scope> <description>setTimeout, setInterval</description> </snippet>




「set」-TABと入力すると、「I」を書き続けることができ、「terval」が自動的に置き換えられます。 言葉で説明するのは難しいですが、便利です。



Zimorodok JavaScript スニペットセット



参照：


www.sublimetext.com/download-ダウンロード

www.sublimetext.com/docs/api-reference-プラグインAPIリファレンス

habrahabr.ru/post/136529-Sublime Text 2のプラグイン作成に関する素晴らしい記事

github.com/bobthecow/sublime-sane-snippets-Sane Snippet-スニペットを作成するためのプラグイン（ TycoooNに感謝）

sublimetext.info-非公式ドキュメント

sublimetext.info/docs/en/reference/snippets.html-スニペットに関する章


More articles:


All Articles