VSCode で簡単にスニペットを追加できる拡張機能

(欲しかったので)作りました。VSCodeの拡張機能サイドバーで「Snippet Generator」と検索すると出てくると思います。

もしくは、Visual Studio Marketplaceからどうぞ。

Snippet Generatorの使い方

(このGifは英語ですが、言語設定が日本語であれば日本語で使うことができます)

使い方

使い方は非常に簡単です。

  1. スニペット化したいコードを選択する
  2. 右クリックメニューから「スニペットを作成」を選択するか、Ctrl+Alt+S(⌘⌥S)を押す
  3. スニペット名を入力(既に存在する名前は使用できない)
  4. トリガーを入力
  5. 説明を入力(任意)

これだけで、スニペットを追加することができます。

注意点

  • WSL(Windows Subsystem for Linux)
  • VSCode Insiders
  • VSCodium

などを使用している場合、デフォルトの設定ではスニペットを登録することができません

「generateSnippet.snippetFilePath」にsnippetsディレクトリのパスを設定してください。

設定例

// settings.json
{
	"generateSnippet.snippetFilePath": "/mnt/c/Users/(ユーザー名)/Appdata/Roaming/Code/User/snippets/",
}

スニペットの編集・削除を簡単にしたい場合

この拡張機能では、追加したスニペットを編集したり削除したりすることができません(JSONファイルを開いて編集・削除する必要があります)。

スニペットの編集・削除も簡単に行いたいのであれば、easy-snippetという拡張機能をおすすめします。滅茶苦茶便利です。私も使っています。

Snippet Generatorとeasy-snippetを両方入れると便利ですよ!(露骨な宣伝)

以下駄文

拡張機能を作成した経緯

VSCodeには、スニペット機能がはじめから搭載されています。

補足:スニペットとは 直訳すると「かけら」や「断片」。よく使う構文や定型文などを「トリガー」とともに「スニペット」として登録することで、「トリガー」を入力したときに「スニペット」が自動的に入力されるという機能。

例えば、上のGifでは「hw」というトリガーでhello worldのプログラムを登録している。

長いコードでも、少ないタイプ数で入力することができるようになる。(補足終わり)

これは非常に便利な機能なのですが、VSCodeのスニペットは、「スニペットの登録が面倒」というデメリットがあります。

VSCodeでは、スニペットをJSONファイルで管理しています(コメントを含めることができるので、厳密にはJSONではないかもしれませんが)。そのため、スニペットとして登録したい文章は、すべてダブルクォーテーションで囲まなければなりません。

{
	"スニペット名": {
		"prefix": "トリガー",
		"body": [
			"呼び出したいコード",
			"複数行書く場合は、",
			"毎行ダブルクォートで",
			"囲む必要がある",
			"(改行をエスケープしても良い)"
		],
		"description": "説明(任意)"
	}
}

この作業が非常に面倒なので、Web上でコードをスニペットに変換できる「snippet generator」というWebアプリが存在したりします。(同じ名前……)

ただ、毎回ブラウザにコピペしてスニペットを作成するのも面倒なので、VSCode上だけで簡単にスニペットが作成できるような拡張機能を作りました。

開発した感想

機能は少ないですが、欲しかった物が作れて満足しています。

VSCodeの設計がかなり工夫されており、比較的簡単に拡張機能を作ることができて驚きました。開発→配布の流れも整備されていて、VSCodeの拡張機能開発が活発になる理由がよくわかりますね。

まとめ

不具合や要望がございましたら、GithubにIssueを立ててください。PRも歓迎です。(もちろん、この記事のコメント欄でも構いません)

Avatar
fiore

自称C++er。

comments powered by Disqus