VSCodeに登録できるおすすめスニペットまとめ【爆速コーディング】

この記事ではVSCodeに登録できるコーディングが楽になる自作スニペットを紹介します。

（スニペットをかんたんに説明すると、div.と打ってエンターを押すと<div class=””></div>とでるやつです。）

「おすすめスニペット vscode」で調べるとすでにたくさん便利なスニペットが紹介されているので、そちらのリンクと、ぱっと調べて載っていなかったスニペットを書きました。

登録の仕方
基本のスニペット
HTML（PHP）
CSS（SASS）
- コメント
- @mixinのメディアクエリすぐ出す
便利！

登録の仕方

↓がわかりやすいです。

VSCodeで自作したスニペットを登録する方法【作業効率アップにおすすめ！】

コーディング案件の単価と作業効率を上げる！ Brain総合ランキング1位獲得＆ 3日で500部突破累計690部突破クチコミ約380件（平均スコア）今だけ！5つの無料特典あり🎁

基本のスニペット

呼び出し名はちょこちょこ変えてますが↓かなり使ってます！

HTML・CSSコーディングでよく使うVScodeスニペット集

HTML（PHP）

pictureタグ

PCとスマホで画像を切替えたいときに使うタグです。

"picture": {
	"prefix": "pic",
	"body": [
		"<picture>",
		"<source srcset=\"$1\"media=\"(min-width: 768px)\">",
		"<img src=\"sp$2\"/>",
		"</picture>"
	]
},

セキュリティ対策済みaタグ

noopenerとnoreferrerを追加したaタグを出力します。

"securityLink": {
	"prefix": "alink",
	"body": [
		"<a href=\"$1\" target=\"_blank\" rel=\"noopener noreferrer\">$2</a>"
	]
},

自動キャッシュ

.css?や.js?のあとに日付を出力するPHPを書くことで、リロードするたびに自動でキャッシュを読み込まないようにしてくれます。

<link rel="stylesheet" href="style.css?<?php echo date("YmdHis"); ?>">

"autoCash": {
	"prefix": "acash",
	"body": [
		"<?php echo date(\"YmdHi\");?>"
	]
},

CSS（SASS）

小見出しと大見出しの2種類使ってます。地味に便利。

"comentA": {
	"prefix": "c/1",
	"body": [
		"/* $1 */"
	]
},

"comentB": {
	"prefix": "c/2",
	"body": [
		"/* $1",
		"___________________________*/",
	]
},

@mixinのメディアクエリすぐ出す

↓を.scssに書いた上で

$pc: 2000px; // PC
$tb: 1100px; // タブレット
$sp: 750px;  // スマホ

@mixin pc {
  @media (max-width: ($pc)) {
    @content;
  }
}
@mixin tb {
  @media (max-width: ($tab)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}

↓をスニペットとして登録してください。レスポンシブのコーディングが楽になります。

"includePc": {
	"prefix": "ip",
	"body": [
		"@include pc {",
		"\t$1",
		"}"
	]
},
"includeTb": {
	"prefix": "it",
	"body": [
		"@include tb {",
		"\t$1",
		"}"
	]
},
"includeSp": {
	"prefix": "is",
	"body": [
		"@include sp {",
		"\t$1",
		"}"
	]
},