Home
CSS
【コーディング効率化】VSCodeにコードスニペットを登録しよう

【コーディング効率化】VSCodeにコードスニペットを登録しよう

公開日
2021.07.31
更新日
2022.04.02
【コーディング効率化】VSCodeにコードスニペットを登録しよう

どうも!かけちまるです!

Webサイトをコーディングするとき、何度も何度も同じ記述を1から手書きしていて嫌になっていませんか?

VSCodeでは、キーを設定してコードを登録することで、少ない記述で使い回しができるスニペットという機能があります。

プログラミングをしていて「何度も書いてるなぁ」というコードは、スニペット登録して効率化していきましょう。

この記事をでは、

  • ・スニペットを登録する方法
  • ・よく使うCSSのスニペット

を解説していきます。

スニペットを登録する方法

この記事では、VSCode(Visual Studio Code)でスニペットを登録する方法を解説します。
たくさんのテキストエディタを使ってきたわけではありませんがVSCodeは使いやすいのでオススメです。

では、スニペットを登録する方法を順を追って解説していきます。

大まかには、

  • ①メニューバーからCode > 基本設定 > ユーザースニペットへ
  • ②スニペットを登録したい拡張子を検索
  • ③jsonを編集し、スニペットを登録

で完了になります。

1

メニューバーからCode > 基本設定 > ユーザースニペットへ

2

スニペットを登録したい拡張子を検索

例えば、HTMLであれば「html」で検索するとhtml.jsonを開くことができます。

VSCodeでは拡張子ごとにjsonファイルがあり、別々に登録します。

3

jsonを編集し、スニペットを登録

今回は仮に僕がよく使う以下のHTMLを登録します。

HTML
コピー
<picture> <source srcset="" media="(max-width:500px)" type="image/webp"> <source srcset="" media="(max-width:500px)"> <source srcset="" type="image/webp"> <img class="" src="" alt="" width="" height=""> </picture>

それでhtml.jsonへの書き方は以下です。
html.jsonに元々書いてあるコメントはそのままで{}の中に書いていきます。

JSON
コピー
"img_tag”: { "prefix": "img", "body": [ "<picture>", "\t<source srcset=\"$1\" media=\"(max-width:500px)\" type=\"image/webp\">", "\t<source srcset=\"$2\" media=\"(max-width:500px)\">", "\t<source srcset=\"$3\" type=\"image/webp\">", "\t<img class=\"$4\" src=\"$5\" alt=\"$6\" width=\"$7\" height=\"$8\">", "</picture>", ], },
4

スニペット登録完了

この状態になっていればOKです。

スニペットコードの解説

コードだけ紹介されてもなんのこっちゃわからない人に向けてコードの意味を解説していきます。

JSON
コピー
"img_tag”: { "prefix": "img", "body": [ "<picture>", "\t<source srcset=\"$1\" media=\"(max-width:500px)\" type=\"image/webp\">", "\t<source srcset=\"$2\" media=\"(max-width:500px)\">", "\t<source srcset=\"$3\" type=\"image/webp\">", "\t<img class=\"$4\" src=\"$5\" alt=\"$6\" width=\"$7\" height=\"$8\">", "</picture>", ], },

各項目がどんな働きをするのかは以下で確認できます。

IE
img_tag スニペット名(基本使うことはない)
prefix 短縮コード(ここの設定値を入力するとbodyに登録したコードが展開される)
body prefixに設定した値を入力したら展開されるコード
$1~$8 スニペットが展開されたときに最初にカーソルが合う場所。
tabキーを押すと$2,$3,$4と順番にフォーカスする。
\t タブを入れる。
コードを整形して登録した方が使いやすいです。

初期値を設定しておきたい

例えがclassidの付け方が決まっている人は初期値を設定できたら便利ですよね?
初期値を設定するには${1:初期値}を設定してあげればOKです。

具体的には以下のコードです。

JSON
コピー
"section_tag": { "prefix": "section", "body": [ "<section class=\"${1:section_}\" id=\"${2:section_}\">", "\t<div class=\"$3\">", "\t\t", "\t</div>", "</section>", ], },

${1:section_}の部分です。
こうすることでスニペットが展開されたときにclassの値にsection_が最初から設定されます。
あとは続きを書くだけということです。

複数のスニペットを登録したい

スニペットを複数登録する方法は簡単でスニペット1ブロックを繋げていくだけです。

気をつけることは、スニペット名が重複しないことと1ブロック最後のカンマを忘れないことでしょうか。
まぁなんか間違ってたらVSCodeが教えてくれると思いますが。

JSON
コピー
"img_tag": { "prefix": "img", "body": [ "<picture>", "\t<source srcset=\"$1\" media=\"(max-width:500px)\" type=\"image/webp\">", "\t<source srcset=\"$2\" media=\"(max-width:500px)\">", "\t<source srcset=\"$3\" type=\"image/webp\">", "\t<img class=\"$4\" src=\"$5\" alt=\"$6\" width=\"$7\" height=\"$8\">", "</picture>", ], }, "section_tag": { "prefix": "section", "body": [ "<section class=\"${1:section_}\" id=\"${2:section_}\">", "\t<div class=\"$3\">", "\t\t", "\t</div>", "</section>", ], },

これでOK!!

よく使うCSSのスニペット

ここでは、僕がよく使うCSSのスニペットを紹介します。
個人的なものなので参考程度に活用してください。

marginで要素を左右中央にする

JSON
コピー
"margin center": { "prefix": "mar", "body": [ "margin-left: auto;", "margin-right: auto;", "width: 90%;" ] },

flexで要素を横並べにする

JSON
コピー
"flex side": { "prefix": "fle", "body": [ "display: flex;", "align-items: center;", "justify-content: space-between;" ] },

positionで縦横中央にする

JSON
コピー
"position center": { "prefix": "pos", "body": [ "position: absolute;", "top: 50%;", "left: 50%;", "transform: translate(-50%, -50%);", ] },

imgタグにあてるCSS

JSON
コピー
"img": { "prefix": "img", "body": [ "display: block;", "width: 100%;", "height: auto;" ] },

セクションごとの大枠にあてるCSS

JSON
コピー
"section": { "prefix": "section", "body": [ "background-color: $1;", "padding-top: $2;", "padding-bottom: $3;", "width: 100%;" ] },

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。
Xserver

関連記事

positionで要素を中央寄せにする方法【CSS】

positionで要素を中央寄せにする方法【CSS】

【CSSのみ】ボタンのホバーアニメーションまとめ

【CSSのみ】ボタンのホバーアニメーションまとめ

pictureタグで画像を出し分けてWebP非対応ブラウザ対策をする方法

pictureタグで画像を出し分けてWebP非対応ブラウザ対策をする方法

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

floatで失った要素の高さを取り戻す2つの方法

floatで失った要素の高さを取り戻す2つの方法

【公式あり】jQueryでスクロール量に連動してアニメーションを実装する

【公式あり】jQueryでスクロール量に連動してアニメーションを実装する