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

webデザイン

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

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

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

登録の仕方

↓がわかりやすいです。

VSCodeで自作したスニペットを登録する方法【作業効率アップにおすすめ!】
コーディングを速くする方法の1つがよく使うコードをスニペットとして自作する事になります。今回はVSCodeでスニペットを登録する方法について解説しています。

基本のスニペット

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

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",
		"}"
	]
},

便利!

どこかからコピー→ペーストは1から書くよりは楽ですが、ずっとやってると面倒くさくなりますよね。スニペットを登録すれば短い単語を入力するだけで済むのでとっても楽ちんです。

↑で紹介したスニペット以外にもbackgroundやflexなど登録するともっと捗るので、ぜひ自分だけの使いやすいスニペットを探してみてください。

コメント

タイトルとURLをコピーしました