VS Code自作スニペットの使い方【コーディングの効率化におすすめ】

SHARE

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

皆さんコーディング作業を少しでも効率化したいですよね。

スニペットを使ったら何度も書くコードを長いコードを短い記述で入力することができます。

今回はVS Code（Visual Studio Code）で自作スニペットを作成する方法を紹介します。

この記事を読んでコーディングの効率化をしましょう。

それでは始めます！

目次 表示

目次へ

スニペットとは

スニペットとは、スマホやパソコンでユーザー辞書機能の同じようなものをイメージしてください。

メールを送るときに、おと入力したらお世話になっております。と入力できるようにする、あの機能です。

コーディングに使うスニペットとは何かというと、よく使うコードを、短いワードでの入力やショートカットで挿入できる機能のことです。

VS Code（Visual Studio Code）のコードスニペット

VS Codeのコードスニペットは、ユーザー辞書機能よりできることが増えています。

詳しくは後述しますが、言語ごとに使用するスニペットをカスタマイズできたり（CSS、PHPなど）、スニペットの入力をしやすくする機能もあります。

VS Codeのコードスニペット機能を使うと、コーディング作業の時間短縮・効率化をすることができます。

スニペットの登録方法

MacのVS Codeを使用して説明します。

  1. VS Codeを開き、codeを選択する
  2. 基本設定を選択する
  3. スニペットの構成
  1. 出てきた画面をスクロールして、登録したい言語を選ぶ。もしくは、上の方にある新しいグローバルスニペットファイル（全ての言語に使えるスニペット）を選択する。
  2. 開いたjsonファイルにコードを記述する。
  1. {と}間にスニペットを書きます。

実際にスニペットのコードを見てみましょう。

以下は開いたscss.jsonのコードです。

scss.json
{
	// Place your snippets for scss here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

下記は、編集していくコードを抜粋しています。

scss.json
// "Print to console": {
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }

まず、上記コードをコピーして、すぐ下にペーストします。

scss.json
{
	// Place your snippets for scss here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

上記のように複製できたら、複製した部分だけのコメントアウトを解除します。

コメントアウトの解除は、// を1行ずつ削除するのでも大丈夫ですが、行を選択してショートカット（Mac:Cmd + /　windows:CTRL + /）を使うと早いです。

scss.json
"Print to console": {
 	"prefix": "log",
 	"body": [
 		"console.log('$1');",
 		"$2"
 	],
 	"description": "Log output to console"
}

上記のコードをカスタマイズしていきます。

どの部分を編集するかを説明します。

１行ずつ解説しています。

スニペットの編集箇所

scss.json
"Print to console": {
 	"prefix": "log",
 	"body": [
 		"console.log('$1');",
 		"$2"
 	],
 	"description": "Log output to console"
}

1行目：”Print to console”: {

1行目は、スニペット名を入れます。

“と”の間に入れます。

日本語（全角）を入れることもできます。

2行目： “prefix”: “log”,

2行目は、入力するトリガーワードを入れます。

“と”の間に入れます。”prefix”: は触らないでおきます。

例

例えば以下のコードを見てください。

scss.json
"breakpoint": {
	"prefix": "bre",
	"body": ["@include mq(\\$breakpoint) {",
	"  $1",
	"}"
	],
	"description": "breakpoint"
},

下記画像はbreと入力したときの画面です。

今回の例では、SCSSファイルのjsonを編集しているので、.scss以外にファイルでは、入力候補はでません。

breが先頭に出ているので、tabキーを押せばスニペットのbody部分が表示されます。

3行目： “body”: [

もう一度最初のコードを貼ります。

scss.json
"Print to console": {
 	"prefix": "log",
 	"body": [
 		"console.log('$1');",
 		"$2"
 	],
 	"description": "Log output to console"
}

3行目は触る必要はないです。

ちなみに “body”: [と ],（6行目）の間のコードがスニペットの中身として表示されます。

4行目： “console.log(‘$1’);”,

4行目の“と”の間にスニペットとして表示したいコードを入れます。

最後のカンマ（,）は削除しないでください。1行目と2行目の区切りです。

2行も必要なければ、1行だけの記述でも大丈夫です。

5行目：”$2″

スニペットに入れたいコードの2行目です。

最後にカンマ（,）を入れて、3行目、4行目以降を追加することもできます。

6行目： ],

6行目は触る必要はないです。

7行目： “description”: “Log output to console”

7行目の“と”の間のスニペットの説明の箇所にスニペットの説明として表示したいコードを入れます。

以下は先ほどのコード例を用いた画像です。以下のようにスニペットの説明が表示されます。

8行目：}

8行目は触る必要はないです。

jsonファイルを忘れずに保存しておく

jsonファイルは編集したら忘れずに保存しておきます。

$や”などをエスケープ処理する

以下のコードの3行目では、\\$breakpointと記載があります。

scss.json
"breakpoint": {
	"prefix": "bre",
	"body": ["@include mq(\\$breakpoint) {",
	"  $1",
	"}"
	],
	"description": "breakpoint"
},

私が実際に経験したのですが、この$などの文字を普通に記載してもスニペットが表示されません。

$などの表示されない文字を表示するには以下のエスケープ処理を行う必要があります。

バックスラッシュや¥を前につけます。

エスケープ処理の詳細は今回は割愛しますが、よく使う$と”（ダブルクォーテーション）、シングルクォーテーション (‘)について説明します。

以下のバックスラッシュが入力できない方（Winodwosの方）は、¥を入力してみてください。

Macの場合はキーボードのoptionキー押しながら¥キーを押すと入力できます。（英数入力時）

エスケープ処理は以下のように書きます。

  • $の場合は、\\$
  • “（ダブルクォーテーション）の場合は、\”
  • シングルクォーテーション (‘)の場合は、\’

スニペットを複数作成したい場合

スニペットを複数作成する場合は、以下のコードのように、それぞれのスニペットをカンマで区切ります。

scss.json
"breakpoint": {
	"prefix": "bre",
	"body": ["@include mq(\\$breakpoint) {",
	"  $1",
	"}"
	],
	"description": "breakpoint"
},
"pc_rem": {
	"prefix": "pc",
	"body": ["pc_rem()"
	],
	"description": "pc_rem()"
},
"時刻サンプル": {
	"prefix": "time",
	"body": [
	"$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
	],
	"description": "時刻サンプル"
}

便利機能

タブストップ

タブストップとは、スニペット内でエディター カーソルを移動することができる機能です。

例えば、先ほどのコードを見てください。

scss.json
"breakpoint": {
	"prefix": "bre",
	"body": ["@include mq(\\$breakpoint) {",
	"  $1",
	"}"
	],
	"description": "breakpoint"
},

こちらのbody部分の場合では、下記のコードが表示されます。

スニペット表示後は{と}の間にコードを記述したいのですが、通常はスニペットの表示後は、}の後にカーソルが移動されます。

その際カーソル移動の一手間が発生します。

その手間を減らすことができるのが、タブストップ機能です。

下記コードの2行目の” $1″,の部分に注目してください。

“@include mq(\\$breakpoint) {“,
” $1″,
“}”

上記のコードではスニペットの表示後に$1の場所にカーソルが移動します。

カーソル移動の一手間がなくすことができました。

タブストップの書き方

タブストップの書き方は、始めにカーソル移動したい箇所に$1を書きます。

$1とありますので、$2と数字を続けることができます。

どういった動きになるかというと、

  1. $1にカーソルがあてられる
  2. tabキーを押すと、$2、$3と数字順にカーソルが移動する　

また、同じタブストップ複数書くと（$1を複数書くなど）、それらはリンクされて、同期して更新されます。別の場所に同じコードを書きたい時に便利ですね。

変数

クリップボードの内容や、現在の時刻など、その時により変わる値を挿入できます。

使える変数は様々なのですが、その中から便利な変数を紹介します。

現在の言語を尊重しながら行コメントを挿入する

コメントアウトの書き方は言語によって違う場合があります。

その時も以下のコードを使えば、それぞれのコードに適したコメントアウトができます。

そのときはスニペットを作成する際に、新しいグローバルスニペットファイルを作成してグローバルなスニペットファイルを作ると、全ての言語でスニペットを使うことができます。

global.code-snippets
"BLOCK_COMMENT": {
	"prefix": "com",
	"body": "$BLOCK_COMMENT_START $1 $BLOCK_COMMENT_END",
	"description": "BLOCK_COMMENT"
}

HTMLファイルでは以下のコードが表示されます。

HTML
<!--  -->

CSSファイルでは以下のコードが表示されます。

CSS
/*  */

言語ごとにスニペットのコードを複製する必要がないので便利です。

現在時刻を表示するスニペット

以下は現在時刻を表示するスニペットです。

timeと入力すると、現在時刻が表示されます。

scss.json
"時刻サンプル": {
		"prefix": "time",
		"body": [
			"$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
		],
		"description": "時刻サンプル"
	}

その他の変数は参考サイトを見てみてください。

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables

おすすめのスニペット

次におすすめのスニペットを紹介します。

SCSS

メディアクエリーをincludeするスニペット

先ほどから例としているコードですが、こちらはSCSSファイルにメディアクエリーのコードを書いておきそれをincludeするスニペットです。

Web制作でレスポンシブデザインコーディングをする際には何度も書くコードですので効率化したいです。

以下はSCSSファイルに書くコードです。

SCSS
$breakpoint: 768px;

@mixin mq($breakpoint) {
    @media screen and (min-width: $breakpoint) {
        @content;
    }
}

通常は上記のmixinを@include mq($breakpoint) {}と書いて使用するかと思います。

毎回になると、コピペするにしても何度も同じ作業を繰り返すことになります。それをスニペットに登録すると効率化できます。

以下はスニペットのコードです。

scss.json
"breakpoint": {
	"prefix": "bre",
	"body": ["@include mq(\\$breakpoint) {",
	"  $1",
	"}"
	],
	"description": "breakpoint"
},

以下はスニペットを使用した時に表示されるコードです。

SCSS
@include mq($breakpoint) {
  
}

これで効率化できました。

スニペットを作りすぎてもいいか

スニペットを作りすぎても、トリガーワードを覚えきれないという方もいるかと思います。

たしかにたくさん作りすぎても、トリガーワードを覚えていないと素早く表示はできません。

しかし、スニペットはコードの保管庫として使うこともできますので、使い回ししたいコードを記録する覚書としても有用です。

参考サイト

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets

まとめ

今回はVS Codeのコードスニペットの使い方について書きました。

それではまた〜ノシ

前の記事

【CSSのbox-shadowの使い方】ボックスに影をつける方…

次の記事

キス釣りは楽しい【キス釣りの魅力について語る】