2018.5.2

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

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

スニペットとは

スニペットとは、よく使うコードを予めスニペットに登録しておくことで、短いコードで簡単に呼び出せる機能です。

厳密には違いますが、Emmetをイメージをするとわかりやすいかと思います。

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

<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>

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

スニペットを設定する

設定ファイルを開く

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

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

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

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

スニペットを登録する

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

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

以下編集する箇所の説明です。

変数名
prefix呼び出すためのコード
body呼び出されるコード
descriptionスニペットの説明(省略可)

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

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

覚えておきたいこと

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

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

$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; // $が表示される

 まとめ

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

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

シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア