【VSCodeスニペット】個人的に重宝しているもの

2023-11-132023-11-16

URLをコピーしました！

ここに少しずつまとめていこうと思います！

スニペットの登録方法は👇をご参照ください！
（以下は外部サイトです。詳しく書かれていて分かりやすいです！そのうちここにもまとめます！）

Sass

ここで紹介するスニペットは「scss.json」に登録してね！

IMGタグにwidth: 100%, height: 100%, object-fit: cover;

入力されるコード

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

スニペット

👇これを「scss.json」にコピペしてね！

"img-set": {
	"prefix": "imgset",
	"body": ["img{", "\twidth: 100%;", "\theight: 100%;", "\tobject-fit: cover;", "}"],
	"description": "imgタグに width: 100%, height: 100%, object-fit: cover; を設定"
},

💡「imgset」入力（途中まででもOK）→タブキー押下で入力されます。

フォント設定を時短！font-size、font-weight、line-height、letter-spacing

入力されるコード

font-size: ;
font-weight: ;
line-height: calc( / );
letter-spacing: calc( / 1000 * 1em);

スニペット

👇これを「scss.json」にコピペしてね！

"font-set": {
	"prefix": "fontset",
	"body": ["font-size: $1;", "font-weight: $2;", "line-height: calc( $3/$4 );", "letter-spacing: calc( $5/ 1000 * 1em);"],
	"description": "フォント指定用：font-size、font-weight、line-height、letter-spacing"
}

💡「fontset」入力（途中まででもOK）→タブキー押下で入力されます。
💡続けてタブキーを押下すると、次の入力箇所に移動できます。
　（スニペットの中で、$1、$2、$3～の順番で移動します！）

width: 100%;、height: 100%;、height: auto;＋次の行にカーソル

入力されるコード

※一度に入力されるわけではありません。
　3つのスニペットに分かれています。

width: 100%;
height: 100%;
height: auto;

スニペット

👇これを「scss.json」にコピペしてね！

"width-100%": {
	"prefix": "w100",
	"body": ["width: 100%;", "$1"]
},
"height-100%": {
	"prefix": "h100",
	"body": ["height: 100%;", "$1"]
},
"height-auto": {
	"prefix": "hauto",
	"body": ["height: auto;", "$1"]
},

💡「w100」入力 → タブキー押下で「width: 100%;」が入力され、カーソルが次の行に当たります。

💡「h100」入力 → タブキー押下で「height: 100%;」が入力され、カーソルが次の行に当たります。

💡「hauto」入力 → タブキー押下で「height: auto;」が入力され、カーソルが次の行に当たります。
　　※「ha」でVSCode標準スニペットが起動されるので、そちらでもOK！
　　　この場合、カーソルは行末に当たります。お好みで。