【VScode】「！」でVue.js用のデフォルト設定・スニペット【Vue.js】 #Vue.js

HTMLファイル上で「!」を打った際に表示させたいコードスニペット

VScodeエディタ上でHTMLファイル上でvue.jsのCDNを読み込んでコーディングすることを想定した環境です。

操作手順

shift+command+pで検索窓を表示⇨「基本設定：ユーザースニペットの構成」⇨「html」で検索⇨「html.json」を選択

html.json

{
    "html5": {
        "prefix": "!",
        "body": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <title>${1:Document}</title>\n  <link rel=\"stylesheet\" href=\"${2:./css/style.css}\">\n</head>\n<body>\n  <div id=\"app\">\n\n  </div>\n  <script src=\"https://unpkg.com/vue@next\"></script>  \n  <script src=\"app.js\"></script>\n$0</body>\n</html>"
  }
}

出力されるコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document</title>
  <link rel="stylesheet" href="../style.css">
</head>
<body>
  <div id="app">

  </div>
  <script src="https://unpkg.com/vue@next"></script>  
  <script src="app.js"></script>
</body>
</html>