VsCodeのスニペットのススメ

最近、普段使いのエディタをVsCodeに切り替えたのですが、
スニペットを使ってみたら非常に便利でした。
これは手放せなくなりそうです。

そもそもスニペットとは？

コードのよく使うパターン(定型的なクラス宣言だったりとか、ループ系コードだったりとか)を
貯めておいて簡単に入力できるようにしたものです。
単純な繰り返し作業がごく少ないコマンドやキー入力で済むため、
開発効率が高まります。

スニペットをどうやって手に入れるのか

Extentionとして導入する

VsCodeのMarketPlaceで検索すると大量に出てきます。
メジャーなフレームワークや言語のものならまずありますので、
これらを導入するだけでもかなり便利です。

自分で作る

ただ、世間一般に出回っているSnippetはやはり最大公約数的なものなので、
かゆいところに手が届かないこともあります。

そんな時は、スニペットを自作してしまうという手があります。
これが、中々手軽でかつ多機能です。

自作の方法

File > Preferences > User Snippetsから自作が可能です。
個人的には、Ctrl+Shift+Pでコマンドパレットを開いてSnippetと打って出すのもアリです。

スニペットは、ファイルの拡張子ごとにjsonファイルに格納されます。
(手動てscopeを調整するGlobalのものもありますが)
jsonファイルを書き換えて保存すると、起動中のVSCodeに即反映されます。
(複数起動している場合でも再起動は不要です。便利。)

大体の書式は以下のような通り
(より詳しく知りたい場合は公式ドキュメントを参照してください)


{
    "fetchPost":{//スニペットの名前
        "prefix":"fpost",//スニペットのprefix これだけ打ってctrl + Tabで呼び出せる
        "body":[//実際に出力される部分。文字列の配列で宣言
            "const resp = await fetch(${1:url},{",//$マークをつけた部分はプレースホルダ
            "\tmethod: 'POST',",//タブは\tに変換する必要アリ
            "\tcredentials: 'same-origin',",
            "\theaders: {",
            "\t\t\"Content-Type\": \"application/json; charset=utf-8\",",
            "\t},",
            "\tbody:JSON.stringify(${2:param})",
            "});",
            "if(!resp.ok){",
                "\t${3://handleError}",
                "\treturn;",
            "}",
            "const json = await resp.json();"
            ],
    "description": "For fetch in post"//表示される説明文
    }
}

まず、Snippetの名前を付け、そこにJsonで設定を紐づけます。
とりあえず、prefix,body,description辺りをまず覚えましょう。
これだけでもかなり便利です。

　Tabストップとプレースホルダ

ボイラープレート的なコードであっても、その中に状況に応じた値を入力しなければいけないことがほとんどです。
そのための支援機能がTabストップとプレースホルダです。タブストップは$[順番を示す数値]形式の文字列を
bodyの中に仕込んでいると、スニペットを挿入後その部分にカーソルが当たり、その状態でTabを押下すると
順番にカーソルが動いていきます。マウス操作やカーソル移動を伴わずに必要な値を連続的に入力できるのでかなり便利です。
プレースホルダは、タブストップ部分にデフォルト値を付ける機能です。${[順番]:[デフォルト値]}という形で利用します。

組み込み変数

スニペットの中ではいくつか組み込み変数が利用できます。
例えば、以下のスニペットは選択した文字列を2出力します。


    "duplicate":{
        "prefix":"dup",
        "body":[
            "${TM_SELECTED_TEXT}${TM_SELECTED_TEXT}"
        ]
    }

現在選択中の文字列や、クリップボードの中身といったコーディング用っぽい変数のほかに、
ブロックコメントの先頭・末尾(おそらくコード中のコメント用)や
日付や時間といった議事録などに便利な項目まで色々そろっています。

正規表現置換や大文字・小文字変換も出来る

さらに、変数の内容に対してjs標準の正規表現置換やupcase,downcase,capitalizeも出来ます。
ちょっとした文字列整形機能だったらスニペットで十分できてしまいそうです。

まとめ

スニペットはかなり手軽に作れます。
変数や置換まで使えるようになるとかなり夢が広がります。