VSCode Snippets
User Snippets
スニペットを自分で作成することもできます\
コマンドパレット→Configure User Snippetsから、スニペット用のファイルが作成できます\
VSCode全体・ワークスペースごと・拡張子ごとで分けて作成できるようです 自分はscopeをいちいち書くのが面倒なので拡張子ごとに作っています
code:json
{
"タイトル (どういうスニペットなのか)": {
"prefix": [
"候補に出したい文字",
"(キーやタグのようなイメージ)",
"(1つだけor配列どちらもOK)"
],
"description": "説明 (タイトルで済むからあまり使わない なくても可)",
"body": [
"スニペット本体"
]
},
"for文を作成する": {
"prefix": "for",
"body": "for (int i = 0; i < N; i++) {}"
}
}
のように書くことで作成できます
Snipet Syntax
本題です (Syntaxについてまとめた日本語記事は調べた限り見つからなかった)
後述のVariablesやVariableTransformsを駆使することで、手入力なしでコード挿入が完了できるようになったりならなかったりします
TabStops, Placeholders
$ 数字 でカーソル位置を指定することができます (例: $1\
${ 数字 : 文字 } でプレースホルダーがつけられます (例: ${1:hoge}
- 数字が同じだと複数カーソルになります
- 数字が小さい順にタブで移動できます
- $0は必ず最後になります
Variables
ファイルやワークスペースなどの内容を変数として使うことができます\
が個人的によく使う・使えそうなものをピックアップします
TM_FILENAME_BASE 拡張子なしのファイル名。クラス名生成に使う
RELATIVE_FILEPATH ワークスペースからの相対ファイルパス。import文生成に使う
CLIPBOARD クリップボードにコピーされた内容。使うかも
Variable transforms
スニペットとして適用する前に、正規表現を使って変数・プレースホルダーを変換することができます
スラッシュ/区切りで変換した内容をパイプライン処理のように渡して変換していきます
公式のhoge.txtをhogeに変換する例:
code:txt
${TM_FILENAME/(.*)\\..+$/$1/}
| | | |
| | | |-> おわり。hogeをそのまま表示する
| | |
| | |-> (.*)\..+$ で取れたhoge部分をわたす
| |
| |
| |-> 正規表現.txtより前を全部取る \\は\をエスケープしている
|
|
|-> ファイル名が入る
変換のイメージ:
code:txt
TM_FILENAME → (.*)\..+$ → $1 →
hoge.txt → (hoge).txt → hoge → hoge
使用例
code:txt
スニペット
入力 → 出力
の形で紹介します。正規表現覚えたてなのでへんな記法があるかもしれませんがご了承ください ファイル名からクラスを生成する
code:txt
${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}
hoge_huga_controller → HogeHugaController
/pascalcaseと/camelcaseで変換元がスネークケースなどでもうまいこと変換してくれます
ファイル名から一単語削ってクラスを生成する
code:txt
${TM_FILENAME_BASE/(.*)_^_*$/${1:/pascalcase}/}Provider hoge_huga_controller → HogeHugaProvider
final hogeProvider = StateNotifierProvider<HogeController>...のようにクラス名と後ろ一単語を変えて命名するときに使います。
こんな感じにファイル名から自動で生成できます
