【VS Code】テンプレート・定型文（スニペット）を登録して呼び出す方法

saru@文系コーダー

2024年12月24日 21:37

Visual Studio Codeによく使うテンプレートを登録しておくと、作業が楽になります。

ページトップへ戻るボタンの例です。

1.スニペット登録画面を表示する

ファイル→ユーザー設定→スニペット構成

2.htmlのスニペットを登録

「html」と入力すると「html (HTML)」が候補で出てくるので、選んでエンター。
次回以降は「html.json (HTML)」

登録したい定型文を入力。下記は2つ登録した例

{
	"html1":{
		"prefix": "basehtml",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"ja\">",
			"<head>",
			"  <meta charset=\"UTF-8\">",
			"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"  <meta name=\"description\" content=\"$1\">",
			"  <link href=\"/favicon.ico\" rel=\"icon\">",
			"  <title>samp</title>",
			"  <link rel=\"stylesheet\" href=\"css/style.css\">",
			"  <script src=\"js/samp.js\"></script>",
			"</head>",
			"<body>",
			"  <header></header>",
			"  <div class=\"container\">",
			"  </div><!--container end-->",
			"  <footer>",
			"    <a id=\"pagetop\" aria-label=\"ページのトップへ\"><span></span></a>",
			"  </footer>",
			"</body>",
			"</html>"
		]
	},
	"html2":{
		"prefix": "pagetop",
		"body": [
			"  <footer>",
			"    <a id=\"pagetop\" aria-label=\"ページのトップへ\"><span></span></a>",
			"  </footer>",
		]
	}
}

html1、html2は、何でもOK。
prefixは、定型文を呼び出すときに使用するので、あとで分かりやすい名前が良い。
ダブルクォーテーションを使用する際はバックスラッシュ（￥）でエスケープする。

3.CSSのスニペットを登録する

ファイル→ユーザー設定→スニペット構成→「css」
リセットcssを登録しておくと楽になります。

{
	"css":{
		"prefix": "pagetop",
		"body": [
			"@charset \"utf-8\";",
			"footer{",
			"  height: 80px;",
			"}",
			"#pagetop {",
			"  position: fixed;",
			"  right: 40px;",
			"  bottom: 20px;",
			"  z-index: 5500;",
			"  display: block;",
			"  width: 42px;",
			"  height:42px;",
			"  cursor: pointer;",
			"  background: rgba(0, 0, 0, .5);",
			"  border: 1px solid #ffffff;",
			"  border-radius: 4px;",
			"  opacity: 0;",
			"  transition: .5s;",
			"}",
			"#pagetop.visible {",
			"  opacity: 1;",
			"  pointer-events: auto;",
			"}",
			"@media (max-width:479px) {",
			"  #pagetop {",
			"    bottom: 10px;",
			"  }",
			"}",
			"",
			"#pagetop span {",
			"  position: absolute;",
			"  top: 16px;",
			"  left: 11px;",
			"  display: block;",
			"  width:18px;",
			"  height:18px;",
			"  content:\"\";",
			"  border-top:3px solid #ffffff;",
			"  border-right:3px solid #ffffff;",
			"  -webkit-transform: rotate(315deg);",
			"  transform: rotate(315deg);",
			"}",

		]
	}
}

4.javascriptのスニペットを登録する

ファイル→ユーザー設定→スニペット構成→「javascript」

{
	"javascript":{
		"prefix": "pagetop",
		"body": [
			"document.addEventListener('DOMContentLoaded', function () {",
			"  const pagetop = document.getElementById('pagetop');",
			"",
			"  window.addEventListener('scroll', function () {",
			"    if (window.scrollY > 100) {",
			"      pagetop.classList.add('visible');//縦方向のスクロール量が100以上の場合はclassを追加",
			"    } else {",
			"      pagetop.classList.remove('visible');//縦方向のスクロール量が100以下の場合はclassを削除",
			"    }",
			"  });",
			"",
			"  pagetop.addEventListener('click', function () {",
			"    window.scrollTo({",
			"      top: 0,",
			"    });",
			"  });",
			"});"
		]
	}
}

5.登録したスニペットを呼び出す

htmlファイル上で「basehtml」もしくは「pagetop」と入力して、タブ。
「ba」で候補で出てくると思います。

cssファイル上で「pagetop」と入力して、タブ。

javascriptファイル「pagetop」と入力して、タブ。