VSCodeに独自のコードスニペットを登録する


Web制作からWebアプリケーション開発、またその他の開発でプログラムを書いていくのに、コードエディタは使いやすくないといけません。
コードを書いていく中で、よく利用するコードや長いコードは、毎回書くのも大変だったりします。
そこで、よく利用するソースコードについては、スニペットを用意しておくと良いでしょう。

スニペットとは一般的に「断片」という意味になりますが、IT用語としてはプログラミングなどで再利用可能なソースコードを表します。
スニペットを用意しておくと、必要な時に必要なソースコードを簡単に呼び出して展開することが可能となりますので、作業効率を上げることができます。

ここでは、Visual Studio Codeに独自のコードスニペットを登録する方法をご紹介します。


独自のコードスニペットを登録


WindowsのVSCodeで説明していきます。
Macも流れは同じです。

コードエディタのメニューの「ファイル」から「ユーザー設定」と進み、「ユーザースニペット」を選択します。

VSCodeのユーザースニペットの登録



Macの場合は「Code」から「Preferences(環境設定)」と進み、「User Snippets(ユーザースニペット)」を選択します。

VSCodeのユーザースニペットの登録 (Mac)



スニペットファイルを検索します。
ここではサンプルとして、HTMLのスニペットを登録してみます。

html」と検索すると、「html.json(HTML)」が候補で表示されます。
こちらを選択します。

VSCodeでHTMLのスニペットを登録



コードスニペットはJSONファイルに記述していきます。
html.jsonを開くと、コメントで説明と記述のサンプルが書かれています。

HTMLのスニペットを登録するhtml.jsonファイル



コードスニペットの登録は、「{}」内に記述していきます。


基本的な書き方


ユーザースニペットの登録の構成は以下のようになります。

Markup01:スニペット名
prefix:短縮語
body:展開するコード
description:スニペットの説明



jsonコードの書き方

"スニペット名": {
  "prefix": "短縮語",
  "body": [
      "展開するコード",
      "展開するコード",
      "展開するコード"
  ],
  "description": "スニペットの説明"
}



波カッコ「{}」や角カッコ「[]」などでブロックを作り、ダブルクォーテーションで囲ったりカンマ「,」で繋ぎながら改行して記述していきます。
descriptionは無くても大丈夫です。
基本的には、「スニペット名」「短縮語」「展開するコード」の3つの構成で登録していきます。

ではここから、簡単な実装サンプルをご紹介します。
section要素はコンテンツの構成でよく利用する要素でしょう。
よく構築するような構造として、section要素の構造を手軽に記述できるよう、スニペットを登録して素早く構築できるようにしてみます。

以下、サンプルコードです。

html.json

"Markup01": {
  "prefix": "sectionBlock",
  "body": [
      "<section id=\"$1\">",
      "\t<div class=\"$2\">",
      "\t\t$3",
      "\t</div>",
      "</section>"
  ]
},
HTMLのコードスニペットを登録



ここでは、スニペット名を「Markup01」としました。
短縮語は「sectionBlock」として、bodyにsection要素の構造を展開するコードとして記述しています。
最後の閉じカッコの後のカンマ(,)は、複数のスニペット登録をする場合には必要になります。

「$1」は入力するためにフォーカスされる箇所の記述になります。
連番で数字を増やしていくことで、「$2」「$3」とtabキーを押してフォーカスを移動できます。
「\」はエスケープシーケンスで、ネスト(入れ子)のダブルクォーテーションなどを問題なく認識させるようにします。
「\t」はタブの挿入となります。

html.jsonファイルを保存しましたら、コードスニペットの登録完了です。
htmlファイルで「s」と打ち込むと、候補にjsonファイルに登録したスニペットの短縮語「sectionBlock」が表示されますので、こちらを選択してコードを展開します。

登録したコードスニペットを選択



スニペットで登録したコードが一瞬で展開されます。
「$1」などでフォーカス箇所を指定していますので、idを記述してtabキーで次「$2」へ移動し、classを入力してまたtabキーで次「$3」へ移動し、div要素内にコードを書いていきます。

登録したコードスニペットの展開



よく構築する構造をスニペットとして登録しておけば、タグ書いて属性書いてまたタグ書いてと、無駄な作業をなくすことができます。

VSCodeでは、HTMLやCSSの他にもPHP、Python、C、C++などなど、多くのスニペットファイルが用意されています。
扱う言語ごとでスニペットファイルを開いて、スニペットを登録していきます。

各言語のコードスニペットの登録をするjsonファイル



スニペットの書き方は、初めは難しく感じるかもしれませんが、だんだん慣れてきます。


HTML、CSSのベースのスニペットサンプル


せっかくスニペットの登録方法を見てきましたので、ここからはあったらいいなと思う、HTMLとCSSのベースとなる記述のスニペットをご紹介します。

例えば、htmlファイルを新規で作成して構築していくことがある場合、参考となるコードをコピーしてきてもいいですが、そんな作業は必要ありません。スニペットに登録しておけば、一瞬で記述できます。
htmlと一緒にCSSのベースも登録しておくといいでしょう。

html.json(baseHTML)

"baseHTML": {
  "prefix": "baseHTML",
  "body": [
      "<!doctype html>",
      "<html lang=\"ja\">",
      "<head>",
      "  <meta charset=\"utf-8\">",
      "  <title>Base HTML</title>",
      "  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0\">",
      "  <meta name=\"keywords\" content=\"\">",
      "  <meta name=\"description\" content=\"\">",
      "  <meta http-equiv=\"content-language\" content=\"ja\" />",
      "  <link rel=\"stylesheet\" href=\"css/style.css?v=1.0\">",
      "  <!--[if lt IE 9]>",
      "    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js\"></script>",
      "  <![endif]-->",
      "</head>",
      "<body>",
      "",
      "  <header>",
      "  </header>",
      "",
      "  <nav>",
      "  </nav>",
      "",
      "  <main>",
      "  </main>",
      "",
      "  <footer>",
      "  </footer>",
      "",
      "  <script src=\"js/jquery-3.6.0.min.js\"></script>",
      "  <script src=\"js/scripts.js\"></script>",
      "",
      "</body>",
      "</html>",
  ]
},



スニペット名と短縮語は同じでも大丈夫です。
「\t」のタブは利用しなくても、半角スペースとしてもOKです。
1行空ける場合は、ダブルクォーテーションの中は空にします。
titleタグあたりは、入力フォーカスを設定してもらってもいいです。


続いてはCSSです。
スニペットファイルは、「css.json(CSS)」になります。

css.json(baseCSS)

"baseCSS": {
  "prefix": "baseCSS",
  "body": [
      "/* stylesheet */",
      "@charset \"UTF-8\";",
      "",
      "/* A Modern CSS Reset */",
      "*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=\"list\"],ol[role=\"list\"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}",
      "",
      "",
      "/*------------------------------------------------------",
      " Base (Mobile First)",
      "------------------------------------------------------*/",
      "body{",
      "  color: #333;",
      "  width: 100%;",
      "  line-height: 1.6;",
      "  -webkit-text-size-adjust: 100%;",
      "  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;",
      "}",
      "",
      "h1 {",
      "  font-size: 2em;",
      "}",
      "",
      "h2 {",
      "  font-size: 1.5em;",
      "}",
      "",
      "h3 {",
      "  font-size: 1.17em;",
      "}",
      "",
      "h4 {",
      "  font-size: 1.12em;",
      "}",
      "",
      "h5 {",
      "  font-size: .83em;",
      "}",
      "",
      "h6 {",
      "  font-size: .75em;",
      "}",
      "",
      "h1, h2, h3, h4, h5, h6 {",
      "  font-weight: bold;",
      "  line-height: 1.4;",
      "}",
      "",
      "img{",
      "  width: 100%;",
      "  height: auto;",
      "  vertical-align: bottom;",
      "}",
      "",
      "/* clearfix */",
      ".clearfix::before,",
      ".clearfix::after {",
      "  content: \" \";",
      "  display: table;",
      "}",
      "",
      ".clearfix::after {",
      "  clear: both;",
      "}",
      "",
      "/**",
      " * For IE 6/7 only",
      " * Include this rule to trigger hasLayout and contain floats.",
      " */",
      ".clearfix {",
      "  *zoom: 1;",
      "}",
      "",
      "/* header",
      "================================================ */",
      "",
      "",
      "/* contents",
      "================================================ */",
      "",
      "",
      "/* footer",
      "================================================ */",
      "",
      "",
      "/*------------------------------------------------------",
      " Mobile",
      "------------------------------------------------------*/",
      "@media screen and (max-width:767px) {",
      "",
      "  /* contents",
      "  ================================================ */",
      "",
      "}",
      "",
      "",
      "/*------------------------------------------------------",
      " Tablet ~",
      "------------------------------------------------------*/",
      "@media screen and (min-width:768px) {",
      "",
      "  /* contents",
      "  ================================================ */",
      "",
      "}",
      "",
      "",
      "/*------------------------------------------------------",
      " PC",
      "------------------------------------------------------*/",
      "@media screen and (min-width:920px) {",
      "",
      "  /* contents",
      "  ================================================ */",
      "",
      "}",
  ]
},



CSSはリセットCSSから最低限必要なスタイル、あとはレスポンシブWebデザインでスタイルを描くので、メディアクエリを用意しています。
モバイルベースのCSSです。

以下、HTMLとCSSのスニペットを利用した動きです。
動画(3分ほど)はMacでの動作になります。



HTMLとCSSの他、Web制作やWebアプリケーション開発でよく利用するJavaScriptやPHP、Javaなども、必要であればjsonファイルに登録しておくといいでしょう。

スニペットを使いこなすと、普段の4、5倍の速さでコードを書いていくことができます。
よく利用するコードがあったらスニペットに登録しておきましょう。