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

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

この記事では、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

最新情報は以下のURLを参照ください。

https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers

項目「scope」は省略することが可能です。省略すると、「global.code-snippets」に書かれたコードは、すべてのプログラム言語が対象になります。

prefix

prefixとは、スニペットコードを呼び出す文字列です。

上記の例では「litedb」としましたので、「litedb」と入力することで、スニペットコードを呼び出すことができます。

body

bodyには、スニペットコードそのものを記述します。

注意事項としては、ダブルクォーテーション(“)をエスケープする必要があることです。

ダブルクォーテーションをスニペットコードに含めたい場合は、バックスラッシュでエスケープしましょう。

description

descriptionは、スニペットコードの説明文です。

Visual Studio Codeでprefixにあたる文字列を打ち込んだときに、descriptionにあたる文章が説明文として表示されます。

この説明文をたよりに、スニペットコードを選択していくことになります。

 Pacode.netでスニペットコードを探そう

Pacode.netは、技術系ブログに記載されているコードをブックマークできるウェブアプリです。

ブックマークしたコードをコメントと共に呼び出したり、コピペすることもできます。

Pacode.netにコードをブックマークすると、以下のとおり、ブックマーク元のページと共に表示します。

Visual Studio Code のスニペットコードを生成することもできますので、自力で作成する手間を省くことができます。

利用は完全無料ですので、ぜひ使ってみてください。

pacode.net – Code Search & Paste

Visual Studio Codeは機能ありすぎ!

Visual Studio Codeはオープンソースのコードエディタです。

コードエディタと言いつつも、デバッグもできますし簡易Webサーバも立てられますし、ソースコード中のTODOを検索してツリー表示することもできます。

インストール可能な拡張機能の数は30,000以上と言われており、とても便利な機能が数多くあります。

そのため、Visual Studio Codeを使いこなすには、それなりの情報収集が必要です。

「Visual Studio Code実践ガイド」は、

  • Visual Studio Codeの基本的な使い方
  • TypeScriptやPythonなど、実際の開発を通した Visual Studio Code機能の紹介
  • Visual Studio Code拡張機能の開発方法の紹介

などが収録されており、Visual Studio Codeの機能を体系的に理解するのに最適な書籍です。

電子書籍化されていますので、まずは kindleなどで試し読みしてみてはいかがでしょうか。

コメントを残す

メールアドレスが公開されることはありません。