Visual Studio Codeにスニペットコードを登録する方法

スニペットコードを登録すると、コードを１文字ずつ書かなくても自動的に補完入力することができます。

この記事では、Visual Studio Codeにスニペットコードを登録して、使う方法を紹介します。

スニペットコードを利用するメリット
Visual Studio Codeのスニペットコードデータの具体例
スニペットコードを記述する方法
スニペットコードを呼び出す方法
スニペットコードに必要な情報項目
　Pacode.netでスニペットコードを探そう
Visual Studio Codeは機能ありすぎ！

スニペットコードを利用するメリット

スニペットコードを利用するメリットを箇条書きすると以下のようになります。

長いコードを自動補完できる
決まりきったコードを覚える必要がなくなる
テスト済みのコードであれば、テスト工程を一部省略できる

スニペットコードの1番のメリットは、コード入力が自動化されることによる、工数削減です。

また、そのコードがテスト済みであれば、単体テストなどテスト工程の一部省略ができる可能性があります（結合テストやシステムテストは必要になります）。

Visual Studio Codeのスニペットコードデータの具体例

Visual Studio Code のスニペットコードのデータ形式は、JSON形式になります。

Visual Studio Codeのユーザースニペットは、以下のように記述します。

"C# LiteDB でデータベースを作成してレコードをインサートするコード": {
    "scope": "csharp",
    "prefix": "litedb",
    "body": [
    "    public static void createLiteDB()",
"    {",
"        using (LiteDatabase litedb = new LiteDatabase(@\"C:\\jwork\\@Programming\\CoreConsole\\DataBase\\lite.db\"))",
"        {",
"            var col = litedb.GetCollection<customer>(\"customers\");",
"",
"            customer cus = new customer",
"            {",
"                name = \"John Doe123\",",
"                phones = new string[] { \"000-0000\", \"111-1111\" },",
"                isActive = true,",
"                additional = \"additional data\"",
"            };",
"",
"            col.Insert(cus);",
"        }",
"    }",
"",

    ],
"description": "C# LiteDB でデータベースを作成してレコードをインサートするコード"
}

scopeが「csharp」、prefixが「litedb」となっていますので、csharpファイル（*.cs）でこのスニペットコードが有効になり、「litedb」と入力すると、bodyに記述したコードが補完されます。

スニペットコードを記述する方法

スニペットコードを記述するファイルは、プロジェクトやプログラム言語ごとに記述するファイルや、グローバルに呼び出せるものがあります。

ここではグローバルスニペットコードファイルの呼び出し方を紹介します。

まず、左下のアカウントアイコンをクリックして、「User Snippets」をクリックします。

画面上部にメニューが表示されますので、「New global snippets file...」を選択します。

次にテキスト入力欄が表示されます。グローバルスニペットファイルのファイル名を入力してください。

ファイル名を入力すると、エディタエリアに表示されます。

今回は具体例として使用した以下のコードを入力してみます。

"C# LiteDB でデータベースを作成してレコードをインサートするコード": {
    "scope": "csharp",
    "prefix": "litedb",
    "body": [
    "    public static void createLiteDB()",
"    {",
"        using (LiteDatabase litedb = new LiteDatabase(@\"C:\\jwork\\@Programming\\CoreConsole\\DataBase\\lite.db\"))",
"        {",
"            var col = litedb.GetCollection<customer>(\"customers\");",
"",
"            customer cus = new customer",
"            {",
"                name = \"John Doe123\",",
"                phones = new string[] { \"000-0000\", \"111-1111\" },",
"                isActive = true,",
"                additional = \"additional data\"",
"            };",
"",
"            col.Insert(cus);",
"        }",
"    }",
"",

    ],
"description": "C# LiteDB でデータベースを作成してレコードをインサートするコード"
}

スニペットコードを呼び出す方法

実際に記述したスニペットコードを呼び出してみます。

上記の例では、"scope": "csharp" ですので、「*.cs」ファイルから呼び出します。

"prefix": "litedb" としていますので、「*.cs」ファイルに「litedb」と入力することで、コードが自動入力されます。

スニペットコードに必要な情報項目

Visual Studio Code のスニペットコードに必要な情報項目は以下のとおりです。

scope
prefix
body
description

scope

scopeは、スニペットコードを有効にするプログラム言語を指定します。

プログラム言語は、以下のLanguage Identifiersを指定できます。

以下は2022年5月の情報です。

プログラム言語	scope
ABAP	abap
Windows Bat	bat
BibTeX	bibtex
Clojure	clojure
Coffeescript	coffeescript
C	c
C++	cpp
C#	csharp
CUDA C++	cuda-cpp
CSS	css
Dockerfile	dockerfile
F#	fsharp
Git	git-commit, git-rebase
Go	go
Groovy	groovy
Handlebars	handlebars
Haml	haml
HTML	html
Ini	ini
Java	java
JavaScript	javascript
JavaScript React	javascriptreact
JSON	json
JSON with Comments	jsonc
LaTeX	latex
Less	less
Lua	lua
Makefile	makefile
Markdown	markdown
Objective-C	objective-c
Objective-C++	objective-cpp
Perl	perl, perl6
PHP	php
Plain Text	plaintext
PowerShell	powershell
Pug	jade, pug
Python	python
R	r
Razor (cshtml)	razor
Ruby	ruby
Rust	rust
SCSS	scss, sass
ShaderLab	shaderlab
Shell Script (Bash)	shellscript
Slim	slim
SQL	sql
Stylus	stylus
Swift	swift
TypeScript	typescript
TypeScript React	typescriptreact
TeX	tex
Visual Basic	vb
Vue	vue
Vue HTML	vue-html
XML	xml
XSL	xsl
YAML	yaml