VSCode DOCTYPE html のスニペットを作ってみた。

2023年05月27日2024年01月23日

タップで読みたいところにジャンプします

毎回同じ head を書くのが面倒

これからjQueryのファイルを沢山作ろうと思っている。

なので、HTMLファイルの head 部分を沢山書かないといけないのだが、それも面倒くさい。

とういう事で、VSCode のユーザースニペットに登録してみた。

ユーザースニペット登録の仕方

VSCode の左下の歯車マーク(管理)を左クリック

下から3段目あたりの「ユーザースニペット」を押下

今後スニペットが増えてくることを予想し、「html.json」を選択。

以下のコードを追加する。

"make start html file ": { // スニペットの名前
    "prefix": "!!", // 呼び出すために入力する文字
    "body": [ // 以下は呼び出すコード(配列形式)
      "<!DOCTYPE html>",
      "<html lang=\"ja\">", //  [\"] で ["]を入力
      "<head>",
      "\t<meta charset=\"UTF-8\">", //  [\t] で Tabを入力
      "\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
      "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "\t<title>$1title</title>", //  [$1] で カーソルをセット
      "\t<!-- 読込 css  -->",
      "\t<link rel=\"stylesheet\" href=\"./$2css/style.css\">", //  [$2] で Tab移動でカーソルをセット
      "\t<!-- 読込 jQueryライブラリー -->",
      "\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js\"></script>",
      "\t<script src=\"./js/jquery-3.7.0.min.js\"></script>",
      "\t<!-- 読込 自作jQueryファイル-->",
      "\t<script src=\"./js/script.js\"></script>",
      "\t<!-- 読込 フォントオーサム-->",
      "\t<link href=\"./fontawesome/css/all.css\" rel=\"stylesheet\">",
      "\t<!-- 不可 index -->",
      "\t<meta name=\"robots\" content=\"noindex,nofollow\">",
      "</head>",
      "<body>",
      "\n\n", //  [/n] で 改行を入力
      "</body>",
      "</html>"
    ],
    "description": "htmlの出だしの部分"
  }