1. TOP
  2. App's
  3. Visual Studio Code ユーザースニペットの使い方まとめ
詳しくはこちら
App's
 | 

Visual Studio Code ユーザースニペットの使い方まとめ

Visual Studio Code（以下vscode）には、デフォルトでスニペットを登録する機能が付いています。今回は、このスニペットの基本的な使い方と、便利な小技や知識を中心に紹介していきます。

目次

スニペットとは

よく使うコードをあらかじめ登録しておき、ショートカットキーで簡単に呼び出せる機能のことです。

例えば、以下のコードをスニペットに登録しているとします。呼び出すコードはlistとします。

<ul>
	<li><a href="#"><span></span></a></li>
	<li><a href="#"><span></span></a></li>
	<li><a href="#"><span></span></a></li>
	<li><a href="#"><span></span></a></li>
	<li><a href="#"><span></span></a></li>
</ul>

この場合、listと入力してTabキーを押すと上記のコードが展開されます。

スニペットを設定する

設定ファイルを開く

以下からスニペットの設定ファイルを開きます。

メニューバー > Code > 基本設定 > ユーザー スニペット

その後、登録したい言語を選択します。

初期のスニペットのファイルは以下のようになっています。

スニペットを登録する

7行目の"Print to console": {から、14行目の}までのコメントアウトを解除します。これらがひとつのスニペットの塊となります。

Print to consoleにはスニペットを識別するための名前を入力します。

こちらは編集する箇所の解説です。基本的には、prefixとbodyを入力すればOKです。

項目名 値
prefix 呼び出すためのコード
body 呼び出されるコード
description スニペットの説明（省略可）

スニペットを複数登録する場合は、グループごとにカンマで区切ります。

"Print to console": {
	"prefix": "log",
	"body": [
		"console.log('$1');",
		"$2"
	]
}, // ← カンマを付ける
"Print to console": {
	"prefix": "log",
	"body": [
		"console.log('$1');",
		"$2"
	]
} // ← 最後にはカンマを付けない

HTMLを登録する例

一行のHTMLの場合

"text": {
  "prefix": "text",
  "body": [
    "<p>text text text</p>",
  ],
},

複数行の場合

"multiple-lines": {
  "prefix": "multiple-lines",
  "body": [
    "<div>",
    "  <p>text</p>",
    "</div>",
  ],
},

classを付ける場合

"class": {
  "prefix": "class",
  "body": [
    "<p class='text'>class</p>", // class=' ←はシングルクォーテーション！もしくはエスケープする（後述）
  ],
},

複数行やclassを付ける場合の注意点や細かい解説は、この後で解説しています。

覚えておきたいこと

カーソルの出現箇所を任意の位置に設定する

スニペットを展開した時に、カーソルを任意の位置に設定することが出来ます。

$1を記述した箇所にカーソルが出現し、$2、$3と記述を追加した場合は、［ Tab ］キーを押すことで、それらの位置にカーソルが移動します。

"body": [
	"console.log('$1');",
	"$2"
]

上記の場合は、console.log()の括弧の中がカーソルの出現箇所になります。そして、括弧の中で入力を終えて［ Tab ］キーを押したら2行目に移動します。

シングル、ダブルクオーテーションの使い分け

シングルクォーテーション、ダブルクオーテーションどちらも基本的には使えますが、以下のようにシングルクォーテーションの中でシングルクォーテーションを、また、ダブルクオーテーションの中でダブルクオーテーションを使うとエラーが出てしまいます。

// シングルクォーテーションの中でシングルクォーテーション
'console.log('');'

// ダブルクォーテーションの中でダブルクォーテーション
"console.log("");"

 

引用符（シングルクォーテーションとダブルクオーテーションのこと）の中で引用符を使うには、以下2つの方法があります。

 

■ 2種類の引用符を使う

シングルクォーテーションの中ではダブルクオーテーションを、ダブルクオーテーションの中ではシングルクォーテーションを使うのが一番シンプルな方法です。

// シングルクォーテーションの中でダブルクォーテーション
'console.log("");'

// ダブルクォーテーションの中でシングルクォーテーション
"console.log('');"

しかし、一種類の引用符しか使いたくない方もいるかと思います。そのような方は、次の方法でスニペットを登録してみて下さい。

 

■ 引用符をエスケープする

引用符はプログラム上意味のある文字列です。なので、引用符の中の引用符をエスケープして、ただの文字列として扱えば、シングルクォーテーションの中でもシングルクォーテーションを、ダブルクオーテーションの中でもダブルクォーテーションを使うことが出来ます。

引用符をエスケープするには、引用符の手前にバックスラッシュ\を付けます。

// シングルクォーテーションの中でシングルクォーテーションを使う
'console.log(\'\');'

// ダブルクォーテーションの中でダブルクォーテーションを使う
"console.log(\"\");"

改行やタブについて

改行やタブを展開後に表示させるには、2つの方法があります。

 

■ 一行ごとに値を増やして改行をする

行が増えるごとに値を増やしていく方法です。引用符の中のタブはそのまま展開されます。

// スニペット
"body": [
	"\\$(function(){",
	"	", // ← タブがひとつある
	"});"
]

// 展開後
$(function(){
	// ← タブがひとつある
});

 

■ エスケープ文字を使う

改行やタブには特別な文字コードがあり、それらを使うことで、改行やタブを展開後に表示させることが出来ます。

  • 改行：\n
  • タブ：\t
// スニペット
"body": [
	"\\$(function(){\n\t\n});"
]

// 展開後
$(function(){
	// ← タブがひとつある
});

「$」の文字列を展開させる

$はsassの変数名やjQueryなどで使いますが、$はエスケープ文字なのでコンピュータにとって意味のある文字列として処理されてしまい、スニペットに$の文字列を登録しても展開後には表示されません。

$を展開後にも表示させるには、スニペットに登録する際に文字列として扱わせてあげます。以下のようにバックスラッシュを2回連続で入力することで、文字列として扱われるようになります。

重要なのはバックスラッシュ\を2回連続で記述することです。2回連続です。

// バックスラッシュ無し
"body": [
	"$BASE-COLOR: #333;"
]
// 展開後
BASE-COLOR: #333; // $が表示されない

// バックスラッシュ有り
"body": [
	"\\$BASE-COLOR: #333;"
]
// 展開後
$BASE-COLOR: #333; // $が表示される

 まとめ

スニペットを登録しておけばコーディングがとても楽になるので、どんどん追加していきましょう。

登録する際の注意点としては、引用符の扱い、使ってみた文字がエスケープされて変な動きをしてしまうくらいだと思います。スニペットが展開されなかったら、最初にこれらを疑ってみるといいでしょう。

関連記事