変換対コード断片

コードスニペット

あなたがここにいるならば、あなたはおそらくスニペットが何であるかについてわかっていて、多分、あなた自身のものを作る際にさえ馬鹿にしました.そのように、あなたは以下に概説される断片の基本的な機能/利益のいくらかまたはすべてに精通しています
スニペット機能/利点

迅速にプリコードを出力(繰り返し入力を保存)

用途tabstops タブキーを使用してあなたのスニペットの所定の場所にカーソルを移動するには

同じタブストップの複数の出現を使用して一度だけ繰り返し値を入力して

用途placeholder values デフォルト値をタブストップに設定するには

与えるplaceholder choice options (ドロップダウンのように)スニペットが挿入されたときに選択される

挿入certain variable values あなたのスニペットに

あなたがあなた自身のスニペットを作ることに新しいならば、彼らが順番にこれらの各々に取り組むことを非常に推薦します.これらの6だけで、あなたは非常に多くの信じられないほど便利なスニペットを作成することができます.
ここでは、私はトリッキーの一つをカバーするつもりですが、あなた自身のコーディングプロセスをさらに合理化するためにあなたのスニペットに追加することができますより強力なカスタマイズ
変数とプレースホルダ変換

変換

我々のスニペットの変換は、変数またはプレースホルダのいずれかを取り、いくつかの方法でそれを変更します.
なぜ、我々はこれをしますか?つの実用例を見てみましょう.

ユースケースの例

あなたが反応でプログラミングしていて、新しい州を宣言したいと言いましょう.反応に精通していない?心配するな.この例では、宣言状態がその変数の値を設定するためのメソッドと同様に変数を作成することを含むことを知っています.このように宣言されます.

const [fooBar, setFooBar] = useState()

私たちの変数“foobar”と私たちのメソッド“setfoobar”があります.慣例によって、変数の名前を使用して、setSense - Changesという名前が付けられます.どちらもキャメルケースです.
私たちがこのためにスニペットを作っているなら、私たちのようなものとして、私たちのスニペット本体を書きます.

"body": "const [$1, set$2] = useState();"

このスニペットは機能的ですが、同じ変数名を2回入力していることに注意してください.「＄2」のタターストップを「＄1」に置き換えることもできますが、2番目の出来事が出てくるという問題にすぐに走り回りますsetfooBar そして、もはや我々のcamelcaseに付着しません.
私たちが望むのは、一度変数を入力し、2番目の出来事の最初の文字を大文字で作る方法です.
これを達成するために、プレースホルダ変換を使用してtabstop $ 1を挿入し、それを仕様に変更します.新しいスニペットコードは次のようになります.

"body": "const [$1, set${1/(.*)/${1:/capitalize}/}] = useState()"

さて、そこにたくさんのことが起こっているように見えるので、それを粉々に壊しましょう.

変換構造/構文

まず始めに、一連の質問をもとに変換を考えましょう.

我々は何を変えるのか?

そのことの一部は我々が変身しているか

どのように、我々は各々の部分を変えていますか?

追加の詳細や変更はありますか?

変換の構文を見て、コード内の軸受を取得しましょう.${«variable|tabstop»/«regexp»/«text|format»/«options»}変換は"$}ドル記号の前にある"{ }"カーリーブラケットの中に含まれており、"\\"フォワードスラッシュで4つのセクションに分割されます.各セクションは、直接私たちの質問に直接関係します:

我々は何を変えるのか?

変数またはtabstop :変換される変数またはtabstop入力

そのことの一部は我々が変身しているか

regex :変数/tabstopのマッチを検索する正規表現

どのように、我々は各々の部分を変えていますか?

テキストまたはフォーマット:regexによって見つけられたマッチ(es)の代わりに挿入するテキストまたはregexによって見つけられるマッチ(es)に戻るか、またはどのように行動するかを示している形式

追加の詳細や変更はありますか?

オプション: regexに対する追加のオプションで、しばしば空白(この例では使用しません.

この例の変換の構造

では、これらのセクションが上記で使用した変換にどのように現れるかを見てみましょう.

${1/(.*)/${1:/capitalize}/}    // the full transformation
${ /    /                /}    // container and dividers
  1                            // tabstop reference
    (.*)                       // regex
         ${1:/capitalize}      // format

遊びの3つのセクションのそれぞれに触れましょう.
TabStop -変換されている?
タブストップリファレンスは比較的自己説明的です.我々は我々が最初のtabstop(上から上の我々の変数名)に入っているものを変えたいです1 .

If we were transforming a variable instead of a tabstop input, we would put the variable name here instead.

それで、我々の質問1に対する答え
Regex -どのような部分が変換されている?
regex構文に慣れていない場合は、このポストの底にリストされるリソースがあります.今のところ、この特定の式を知っている(.*) 任意の組み合わせで任意の文字のタブストップ入力文字列内で検索していることを示しますAK :文字列全体を返します.
したがって、質問2に対する答えは以下の通りです:tabstop
移動する前にここで注意する重要なことは、すべてのregexの周りの括弧の使用は、それが同じ正規表現“キャプチャ”のすべての部分であることを意味-最初のキャプチャは、特定することです.これは、フォーマットのセクションがキャプチャとキャプチャ順序を気にするので、これは重要です.
再び、regexとcapturesがあなたに外国人であるならば、この例のためにそれについてあまり心配しないでください.Regex/Captureをこの方法で考えることができます:regexは特定の部分文字列の文字列を検索する方法です.ここでは、正規表現は単一チャンクとしてグループ化されます.
どのように変換されている?
フォーマットの参照結果は/当社の正規表現からキャプチャし、個別にキャプチャすることができます.変更されることによって、書式は次の構文を持つことができます.
書式構文

insertion: $«int» or ${«int»}
method: ${«int»:/«method»}
conditional insertions:

• if/else ${«int»:?«if insertion»:«else insertion»}
• if ${«int»:+«if insertion»}
• else ${«int»:-«else insertion»} or ${«int»:«else insertion»}

上で、「int」は作用されている捕獲番号です、「方法」は適用されている変化です、そして、「if/else挿入」はregex/捕獲がするか、マッチを返さないなら、挿入されるストリングです.
これは非常に多くのに入ることができるので、我々の例に我々の範囲を制限しましょう.上記の書式が以下のようになります.${1:/capitalize}したがって、私たちのフォーマットはキャプチャ番号1の「資本化」の方法を呼ぶようです.

Sidenote: It would be easy to confuse the "1" here for referencing our tabstop $1, but they are entirely unrelated. In format, "1" indicates that this format is acting on the first capture in our regex. Note that if you wish to act on the entire regex collectively, you can list an int of "0" in your format. In our example, we only have one capture, and it is the entirety of our regex, so we could technically use "0" or "1".

VSコードドキュメントに記載されているメソッドは以下の通りです.

/upcase -文字列を大文字に変換する

/downcase -文字列を小文字に変換する

/capitalize -文字列の最初の文字を保存する

/camelcase - SnakeRoundケースをキャメルケースに変換する

/pascalcase -大文字小文字をパースケース(別名のキャメルケース)に変換する

だから私たちの形式${1:/capitalize} 最初のキャプチャを取り、最初の文字を大文字で.これはまさに我々が目指していたものです!
我々の第3の質問に対する答えは、そうです:最初の手紙は、資本主義です

回収する

それはかなり徹底的な観察でした、それで、我々のスニペットを見るために外へズームしてください、そして、作品が現在我々により意味をなすかどうか確かめてください.

"body": "const [$1, set${1/(.*)/${1:/capitalize}/}] = useState()"

それを我々の質問に戻してください.

なに?1 - を入力します.

部分?(.*) - 入力文字列全体を変更する

変更?${1:/capitalize} - その文字の最初の文字を大文字で囲む

そして? and are done

The result is a snippet which lets you type a variable one time, and as soon as you tab out of the first tabstop (you must tab out!) the second occurrence will adjust its capitalization automatically!

It seems like a lot of work for something very small, but the more familiar you can become with snippet syntax, regex, format, etc, the easier it will become to implement.

This is a complex topic, and this single use-case could only cover so much. I recommend looking through the resources below if you want to look into this further.

リソース

Snippets

• Official VS Code Snippets Documentation
• TextMate Snippet Syntax Documentation

Regex

• Regular Expressions Documentation
• Rubular - tool for testing regex
• Regulex - tool for visualizing regex expressions