【爆速入力】VSCodeでスニペットを登録して作業効率アップ

スニペットとは？
入力途中でワードを補完してくれるあの機能です。

VSCodeでスニペットを登録して入力効率をアップさせましょう。

例えば「f」って入れたら

php

foreach($ as $value){
}

が入力候補に出てきてくれたら便利ですよね。

登録方法

1.「ファイル」→「ユーザー設定」→「ユーザースニペットの構成」

2.言語を選択

今回はPHPを選択しました。

2.スニペットを登録

入力例

php.json

{
	"foreach": { 		//スニペット名
		"prefix": "f", 	//入力
		"body": [ 		//補完
		  "foreach($${1:} as $${2:value}){",
		  "}",
		],
	  },
}

・＄+スーペースor＄　＝　「＄」
・＄+{数字:初期値}　＝　数字の順番にカーソルが当たる。tabで次の数字へ。
・＄+初期値　＝　＄+{数字:初期値}の省略形。

テスト

「f」と入力すると候補で出てきます。
右側出てくるスニペット名で確認できます。

enterでスニペットが入力されます。

これは便利😀

自分が登録しているスニペット

php.json

{
	"foreach": {
		"prefix": "f",
		"body": [
		  "foreach($${1:} as $${2:}){",
		  "}",
		],
	  },

	"key=>": { //foreachにkeyを足す
	  "prefix": "k",
	  "body": [
		"key =>",
	  ],
	},

	"dd=>": {
		"prefix": "d",
		"body": [
		  "dd(${1:});",
		],
	  },
  
	"for=>": {
		"prefix": "fo",
		"body": [
		  "for($$i; $$i<${1:}; $$i++){",
		  "}",
		],
	  },
  
	"if=>": {
		"prefix": "i",
		"body": [
		  "if(${1:})",
		],
	  },

	  "return=>": {
		"prefix": "r",
		"body": [
		  "return ",
		],
	  },

	  "arrrow=>": {
		"prefix": "a",
		"body": [
		  "->",
		],
	  },
  }

あと便利なのがbladeのスニペットです。
「新しいスニペット」でblade.phpと入力すると
bladeで適用されるスニペットを作成できます。

blade.php.code-snippets

{
	"@if=>": {
		"prefix": "i",
		"body": [
			"@if(${1:})",
			"@endif",
		],
	},

	"@elseif=>": {
		"prefix": "e",
		"body": [
			"@elseif(${1:})",
		],
	},

	"@foreach=>": {
		"prefix": "f",
		"body": [
			"@foreach(${1:} as $ )",
			"@endforeach",
		],
	},

	"key=>": { //foreachにkeyを足す
	  "prefix": "k",
	  "body": [
		"key =>",
	  ],
	},
}

一回登録してしまえばずっと便利に使えるオススメ機能です。
スニペット登録で是非快適なコーディングライフを☺