🛠️

VSCodeのスニペット登録を簡単にする拡張機能を作ったので紹介する

2023/01/04に公開

VSCodeにおけるスニペットとは、よく使うコードのテンプレートを登録しておき、いつでも呼び出せるようにする機能のことです。

スニペットをご存知ない方向けの説明

詳しい説明は公式ドキュメントに譲って、ここではPythonに対するスニペットを登録する例を使って雰囲気だけ説明しておきます。

Pythonに適用されるスニペットを登録するには、F1→"Snippets: Configure User Snippets"→"python.json"で開かれるファイルを編集します。例えば、

python.json
{
    "変数名=値でprint": {       // IntelliSense で表示される名前
        "prefix": "print",     // コード呼び出しに使う文字列
        "body": [              // コード生成の雛形
            "$1=\"テキスト\"",
            "print(f\"$1 = {$1}\")"
        ],
        "description": "変数名=値という感じでprintさせるコード"  
    }
}

と書いておくことにしましょう。python.jsonを保存してから、適当な.pyファイルの編集中にprint(prefixに設定してある文字列です)をエディタに入力すると、
スニペット挿入の提案
このように、スニペットを挿入することを提案してくれます。このままTABキーを押してtextと入力すると、
挿入の結果
このようになります。print TAB textと入力するだけで2行のコードになっています。

Pythonに限らず、任意の言語で、どんなに長いスニペットも登録できます。普段から長い定型文を使っていて「テンプレ機能が欲しいなあ」と思っている方にはとても便利な機能でしょう。

ただし、スニペットの登録には少々めんどくさい文法の勉強と作業が必要です。特に、複数行のスニペットを登録する場合、各行を"",で囲って登録しなければなりません。そのデメリットを軽減するのが、本記事で紹介する拡張機能 Snippet Utilitiesです!

Snippet Utilities とは?

私が開発した、VSCodeのスニペットを簡単に登録するための無料の拡張機能です。スニペットの登録を、

  1. スニペットにしたい部分を選択する
  2. Shift+Alt+S(MacならShift + Option + S)を押す

のたった2ステップで可能にします!

VSCodeのスニペット機能の唯一の弱点である「登録の面倒さ」は,この拡張機能が解決してくれるでしょう。

Snippet Utilities のインストール

VSCodeを開き、拡張機能Marketplaceで、 Snippet Utilities と検索し、インストールします。
icon
このアイコンが目印です。

もしくは、Snippet Utilitiesにアクセスして、VSCodeにインストールします。

Snippet Utilities の使い方

  1. VSCodeにおいてコードの編集中に、スニペットととして登録したい部分を選択します。
    スニペットする部分を選択

  2. Shift + Alt + S(MacならShift + Option + S)を押します。もしくは、右クリックから "Add selection to user snippets."をクリックします。

  3. どの言語のスニペットファイルに追加するかを選びます。
    どの言語にスニペットを登録するか選択

  4. スニペットが追加されたと思います。スニペットの名前と、prefixdescriptionをわかりやすいものに変更します。また、必要に応じてbody${1:label}などを追加します。くわしい文法は、公式ドキュメントの Snippet Syntax を読めばすぐに理解できると思います。

スニペットの登録は完了したので,登録した言語のファイルを編集中にprefixで登録した文字を入力すれば、コードが反映されると思います。

おわりに

これでもう、1行1行"",で囲む作業とはおさらばです。

初めてのzennへの投稿でしたが、お気づきの点があればご連絡お願いします。
拡張機能の改善点などがありましたら、下のリポジトリにぜひともお願いします。
https://github.com/knttnk/snippet-utilities

(もしSnippet Utilitiesを気に入っていただけましたら、バッジを送っていただけますと今後の開発の励みになります。)
最後まで読んでいただきありがとうございました。

Discussion