効率的なコーディングのためのVS Codeスニペットのマスター – techsyncer

最新のコードをVisual Studio Code（VS Code）で書く際に、同じことを何度も繰り返し入力していることはありませんか？たとえば、今日10回関数の宣言を入力したり、同じパラメータを20回コマンドで定義したりしたことはありませんか。それを知っていますか？Visual Studio Codeスニペットを使えば、時間と気力を節約することができます。

Visual Studio Codeスニペットは、VS Codeに保存された小さなテキストの塊です。これらのスニペットはメニューまたはキーのシーケンスを介して呼び出すことができ、各出現ごとにわずかな違いがあるテキストブロックを繰り返し入力する場合に大いに時間を節約することができます。

たとえば、以下の例では、VS Codeでwvbと入力するだけで、Write-Verboseというテキストが表示されることがわかります。これがスニペットの力です！

この記事では、デフォルトのスニペット、拡張機能のスニペット、さらには独自のスニペットの使い方について学びます。

前提条件

この記事では、実際に手を動かして学習するための手順を説明します。VS Codeスニペットの使い方を学ぶには、バージョン1.17以上のVS Codeが必要です。完全な開示のために、私はWindowsでVS Code 1.38.1を使用しています。

特定のプラットフォーム向けの最新バージョンのVS Codeをこちらからダウンロードできます。

VS Codeスニペットの検索

自分自身のスニペットを作成する前に（すぐに作成します）、利用可能な組み込みスニペットの検索方法を学ぶことが重要です。

すべてのスニペットはメニューインターフェイスで見つけることができます。メニューインターフェイスではスニペットを確認し使用することができます。メニューにアクセスするには、F1またはCtrl-Shift-Pを押して「スニペット」と入力し、Enterキーを押します。以下のようなメニューが表示されます。

「スニペットの挿入」を選択すると、以下に示すような利用可能なスニペットのドロップダウンが表示されます。デフォルトでかなり多くのスニペットが利用可能であり、スクロールすることでさらに表示することができます。

利用可能なスニペットのドロップダウンでは、VS Codeで言語拡張を追加することで利用可能な組み込みスニペットを確認することができます。

言語拡張機能

VS Codeを使用してさまざまな言語で作業することができます。各言語には独自のニュアンスがあります。これらの違いをサポートするために、VS Codeは言語拡張機能をサポートしています。

言語拡張機能は、さまざまなプログラミング言語に対してVS Codeにスマートな編集機能を提供します。言語拡張機能により、プログラミング言語に以下のような追加のサポートが与えられます：

シンタックスハイライト
インテリセンス
書式設定
エラーチェック
スニペット補完

拡張機能はVS Codeの拡張機能メニューからインストールします。

C:\Users<ユーザー名>.vscode\extensions\ms-code.-\snippetsにあるWindowsのJSONファイルを開いて、これらのスニペットの定義を確認できます。

拡張機能自体はスニペットとは関係ありませんが、多くの拡張機能には組み込みのスニペットが付属していることに注意してください。

スニペットの展開

メニューインターフェイスからスニペットを選択すると、スニペットの内容がファイルに表示されます。このスニペット定義を有用なコードに変換するプロセスを展開と呼びます。

プレフィックスを呼び出すと、VS Codeはその特定のプレフィックスを読み取り、スニペットで定義された命令を実行します。これらの命令はスニペットごとに異なる場合があります。スニペットの呼び出し、変換、挿入の全体的なプロセスを展開と呼びます。

VS Code拡張機能のスニペットの使用

一部のスニペットは、VS Codeにデフォルトで組み込まれていますが、拡張機能をインストールすると、それら独自のスニペットも付属する場合があります。組み込みスニペットが含まれる拡張機能の例として、MicrosoftのPython拡張機能、MicrosoftのPowerShell拡張機能、およびMicrosoftのC#拡張機能があります。

拡張機能のスニペットの保存先

これらの拡張機能は、通常、WindowsのC:\Users<UserName>.vscode\extensionsディレクトリにインストールされます。

拡張機能のフォルダは、ms-vscode.-という命名規則に従います。これらのフォルダのそれぞれには、拡張機能に含まれるスニペットが含まれています。

Contents of *C:\Users<UserName>.vscode\extensions*

拡張機能のコードスニペットの例

拡張機能のスニペットを使用するためのデモンストレーションとして、PowerShell拡張機能を例に挙げましょう。この拡張機能には、regionとforという便利なスニペットがいくつか付属しており、PowerShellのregionブロックとforループの作成を迅速化します。

たとえば、PowerShellスクリプト内にforループを作成し、それをregionブロックで囲む必要があるとします。これを行うコードは以下の通りです。スクリーンショットに表示されているコードは50文字で、1から10までの数値を反復処理するforループを作成します。

この例では、すべての文字を入力する代わりに、Microsoftから提供されるPowerShell拡張機能に付属しているregionとforという2つのスニペットを使用できます。

以下をご覧ください。これらのスニペットを使用することで、大量の入力を節約できるかどうかがわかります！

Visual Studio Codeのカスタムコードスニペットの作成

あなたは、VS Code自体に付属するスニペットや拡張機能に付属するスニペットに制限する必要はありません。既存の拡張機能に必要なコードレイアウトが含まれていない場合や、自分でこれらのスニペットをフォーマットしたい場合があります。幸運なことに、独自のスニペットを作成できます！このセクションでは、それを行う方法を見ていきます。

カスタムスニペットを作成するには、VS Codeのユーザースニペットを開きます。これは、ファイル → 基本設定 → ユーザースニペットをクリックして行います。これにより、スニペットの言語選択範囲が表示されます。ここで、スニペットを作成したい言語を指定できます。下のスクリーンショットでこれがどのように見えるかの例を見ることができます。

言語を選択すると、VS CodeはWindowsのC:\Users\<ユーザー名>\AppData\Roaming\Code\User\snippetsにlanguage.jsonファイルを作成します。異なる言語のために作成されたすべてのユーザースニペットは、このディレクトリにファイルがあります。

利用可能な言語は、上記のものと異なる場合があります。上記のVS Codeのインストールでは、多くの言語拡張機能がすでにインストールされています。

スニペットを作成する言語を見つけ、Enterキーを押して言語のJSONファイルを開きます。このファイルには、カスタムスニペットが保存され、ここでカスタムスニペットを作成できます。

カスタムスニペットには、4つのデータ項目を指定する必要があります。

A snippet name (line 9 below)
A prefix, which is what you’ll use to call your snippet (line 8 below)
A body, which is your snippet code that is loaded into your scripts (lines 7 to 3 below)
A description, which will show up in your IntelliSense (line 2 below)

*Example snippet definition of the For statement*

カスタムPythonスニペットの作成

カスタムスニペットを作成するために必要なものを見てみましょう。この例では、dtプレフィックスを使用してカスタムPythonスニペットを呼び出します。このスニペットは、現在の時刻が事前に入力されたメッセージを表示します。

JSONファイルの作成

まず、スニペットの言語セレクタを開き、Pythonと入力してEnterキーを押してpython.jsonファイルを作成します。これにより、WindowsのC:\Users<UserName>\AppData\Roaming\Code\User\snippetsフォルダにpython.jsonファイルが表示されます。

下の画像でデフォルトの状態が表示されます。

名前とプレフィックスの割り当て

JSONファイルの編集を開始する時間です。まず、名前とプレフィックス（dt）を定義します。スニペットのプレフィックスは短くて明確であり、スニペットを呼び出すために入力する値です。スニペットのプレフィックスが短いほど、呼び出すときに入力する文字数が少なくなります。

下の例では、これがどのように見えるかが示されています。

本文の定義

本文には、スニペットが呼び出されたときに展開されるコードが含まれます。このコードには、単純なテキストやコメントが含まれる場合もあります。後のセクションで見るように、他の関数も含むことができます。本文が多くの行を持つ場合、注意が必要です。

各行はダブルクォートで囲む必要があります
各行はカンマで終わる必要があります
すべての行は角括弧（“[”と“]”）で囲む必要があります

下の例では、この例のスニペット本文がどのように見えるかが示されています。

説明の定義

以下のように、プレフィックスを説明するメッセージがあります。

説明はスニペットリストのプレフィックスの下に表示され、スニペットが行う操作についての詳細情報を提供します。同様のスニペットとの違いを明確にするのにも役立ちます。

以下は、プレフィックスと説明を識別するスニペットの例のスクリーンショットです。

作成が完了した時点で、カスタムのPythonスニペットが定義されていない場合、以下のコードスニペットが含まれるpython.jsonファイルが作成されます。

{
    "DateTime Snippet": {
        "prefix": "dt",
        "body": [
            "import datetime",
            "dt = datetime.datetime.now()",
            "print(f\"The time is {dt} and this is a message\")"
        ],
        "description": "Prints a message with current time"
    }
}

このJSONファイルを保存すると、VS Codeの任意のPythonファイルでカスタムスニペットを使用することができます。

Pythonタブを開き、プレフィックスdtを入力すると、カスタムスニペットが表示されます。Enterキーを押すと、スニペット本体がPythonタブに展開されます。

含まれているテキストを使用してカスタムJavaScriptスニペットを作成する

スニペットは、スニペット本体で定義した単語に限定されません。スニペットは呼び出されるファイルからテキストも含めることができます。

VS Codeには、使用できる内部変数があります。これらは、現在ハイライトされているテキストを取得し、スニペットに挿入するプレースホルダーです。たとえば、スニペットに変数$TM_SELECTED_TEXTを配置することで、選択したテキストを表示することができます。すべての内部VS Code変数の詳細については、VS Code Variables Reference pageを参照してください。

デモンストレーションのために、単に選択したテキストをコンソールに出力する行を作成するスニペットを作成しましょう。log-itと呼ばれます。

スニペットの言語セレクタを開き、JavaScriptと入力してEnterを押すと、javascript.jsonというファイルが作成されます。このファイルは、前のセクションで作成されたpython.jsonファイルと似ています。ただし、今回はPythonコードではなく、サンプルのJavaScriptコードが含まれています。以下のスクリーンショットでデフォルトの状態を確認できます。

次に、次のJSONを使用してスニペットを作成します：

{
	"Print selected line to console": {
		"prefix": "log-it",
		"body": [
			"console.log('$TM_SELECTED_TEXT');"
		],
		"description": "Log highlighted text output to console"
	}
}

このJSONファイルを保存すると、JavaScriptファイルでこのスニペットを使用できるようになります。

このスニペットをハイライトされたテキストと共に呼び出すと、$TM_SELECTED_TEXTがハイライトされたテキストで置き換えられます。ハイライトされたテキストがない場合、$TM_SELECTED_TEXTは空になります。以下のスクリーンショットでこれが動作する様子を確認できます。

*JavaScript `$TM_SELECTED_TEXT`Snippet in Action*

タブストップを使用したカスタムPowerShellスニペットの作成

これまで見てきた例は、呼び出された時点で完全なものでした。JavaScriptの場合でも、事前にテキストをハイライトすることを前提としています。しかし、呼び出した後にスニペットに値を入力する必要がある場合はどうでしょうか？

例えば、console.log()に値を入力したい場合や、スニペットのさまざまな場所に値を入力したい場合はどうでしょうか？

このセクションでは、タブストップを使用して、スニペットが展開されたコードにテキストを入力する方法を学びます。タブストップは、カーソルが移動する設定された場所です。これらの場所は、タブキーを押すたびに順番に訪れます。これらのタブストップを使用すると、スニペットが展開された後に値を入力することができます。

スニペットの変数$0、$1、$2などを使用して定義されるタブストップは、スニペットを呼び出してタブキーを押したときに、カーソルが次に移動する場所を指定します。

タブストップは正常な順序に従います（1、2、3のように順番に移動します）、ただし1つ例外があります。タブストップ0は、他のすべてのタブストップの後のカーソル位置です。これを示すために、以下のスニペットは、現在の日付と追加のテキスト用のWrite-Outputメッセージに展開されます。

この本文には2つのタブストップがあります

Write-Outputメッセージの最後に$1
$0は次の行にあるため、スニペットは空行で終了します。

{
    "DateTime Snippet PS": {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message "The time is $((Get-Date).ToLocalTime()) and $1"","$0"
        ]
        "description": "PSCustomObject with 3 lines"
    }
}

このスニペットを保存し、PowerShellファイルでプレフィックスdtPSを入力して呼び出します。

スニペットが展開されると、カーソルはタブストップ1の位置に移動します。ここから、追加したい値やコードを入力し、タブキーを押して次のタブストップに移動します。これを指定したすべてのタブストップを経るまで続けます。

以下のスクリーンショットでそれが実際に見ることができます。

タブストップにデフォルト値を追加する

タブストップは素晴らしいですが、必要な場所に通常特定の値が必要で、必要に応じて変更したい場合はどうでしょうか？それでは、デフォルト値を含める時が来ました。

上記の例では、タブストップがありましたが、スニペットが展開されると、その場所にテキストが表示されませんでした。カーソルはタブストップの位置に移動し、ユーザーが引き継ぐ必要がありました。

もしも、タブストップがある場所に値がある方法があれば、スニペットが展開され、その値も展開されると良いでしょう。タブストップがその位置に到達すると、デフォルト値が上書きされたり、タブで移動されたりすることができます。

カスタムスニペットにデフォルト値を追加する方法を見てみましょう。これを行うには、上記のPowerShellスニペットJSONファイルを編集します。

まず、スニペット言語セレクターを開き、PowerShellを選択し、タブストップを$1から${1:this is my default message}に変更します。コロンの後の値がデフォルト値になります。この値はスニペットとともに展開されます。

そのタブストップに到達すると、2つのことが起こります。デフォルト値は上書きされるか、タブで移動されるかによって、デフォルト値を保持することができます。

以下では、本文の変更が確認できます。

{
	"DateTime Snippet PS" {
		"prefix": "dtPS",
		"body" : [
			"Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and $1{1:this is my default message}\"",
			"$0"
		],
		"description": "PSCustomObject with 3 lines"
	}
}

更新して保存すると、これらのデフォルト値が展開され、呼び出されたときにIntelliSenseウィンドウに表示されます。スクリーンショットで示されています。

デフォルトメッセージは、タブストップでできることの良い例です。タブストップは、選択肢を追加するオプションも提供します。

タブストップに選択肢を追加する

タブストップは、デフォルト値や値の設定に限定されません。VS Codeスニペット定義で定義することで、スニペットが展開される際にユーザーにオプションを提供することができます。

たとえば、スニペットで異なる値やコマンドを選択したい場合、異なる選択肢を持つ3つの異なるスニペットを作成する代わりに、スニペットを編集してタブストップで選択肢を表示することができます。以下のスクリーンショットに示すように、タブストップを使用して選択肢を表示します。

タブストップは、スニペットの本文に以下の構文が使用されている場合に選択肢を表示します：

${N|Choice1,Choice2,Choice3[,Choice]|}

上記のタブストップは、以下の選択肢を提供するように変更されています：

Write-Output
Write-Warning
Write-Error

これは、タブストップの後に2つのパイプ文字（|）を配置することで行われました。選択肢はパイプ文字で囲まれ、コンマで区切られます。以下のコードブロックで確認できます。

${1|
    Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- 選択肢1 
    Write-Warning -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- 選択肢2
    Write-Error -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\" // <-- 選択肢3
|}

以下に例のスニペットが表示されています。

{
    "DateTime Snippet PS" {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", Write-Warning -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\", Write-Error -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\"|}",
            "$0"
        ],
        "description": "PSCustomObject with 3 lines"
    }
}

カスタムスニペットが展開されると、選択オプションがIntelliSenseウィンドウに表示されます。スクリーンショットに示すように、どのオプションを選択するかの選択肢が表示されます。

ここから、ご希望の選択肢を選んで展開することができます。下の例のスクリーンショットでは、コードの全行が3つの異なるWriteコマンドの選択肢に置き換えられ、それぞれが問題なく呼び出されて実行されることが示されています。

概要

カスタムスニペットは、単純なテキストやコードにすることができます。メッセージ、デフォルト値、または選択肢を含めるためのタブストップがあることもあり、ハイライトされたテキストも表示されます。

すべてのコードブロックのすべての文字を手入力するという困難な作業ではありません。スニペットを使用すると、forループ、foreachループ、switchステートメントの正確な構文を毎回覚える必要はありません。スニペットはこのニーズにぴったりの選択肢です。

I’ve shown Python, JavaScript, and PowerShell snippets in this post. VS Code snippets are available for many, many more languages. Your limits are only what you use and what you can think of!

さらに読む

PowerShell関数の概要