BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

VSCodeカスタムhtml5テンプレート実装

2022-01-14 21:33:33

(a) 新しいhtmlショートカット

VSCodeで新規にhtmlコードを作成する場合、「！」を入力し、EnterまたはTabで以下のようなhtmlファイルのテンプレートが自動生成されます。

 (ii) カスタムhtml5テンプレート

しかし、毎回新しいhtmlテンプレートを作成するのは、いつも単調に感じてしまいます。例えば、Vueを自動的に導入して、毎回空のページテンプレートを作りたいのですが、これは完全に可能です。

(1) html.jsonファイルを探す：Settingsをクリックし、ユーザーコードスニペットを探す

 htmlを検索すると、html.jsonファイルが表示されるので、それをクリックします。

(2) html.json ファイルを開いて、H5 テンプレートをカスタマイズする

で元の中括弧に直接記入できるhtml.jsonファイルの設定を添付しています。 

"h5 template": {
        "prefix": "vh", // corresponds to a shortcut to use this template
        "body": [
         "<!DOCTYPE html>",
         "<html lang=\"en\">",
         "<head>",
         "\t<meta charset=\"UTF-8\">",
         "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
         "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
         "\t<title>Document</title>",
         "\t<script src=\". /lib/vue-2.4.0.js\"></script>",     
         "</head>\n",
         "<body>",
         "\t<div id =\"app\"> </div>\n",
         "\t<script>",
         "\t // Create Vue instance, get ViewModel",
         "\t var vm = new Vue({",
         "\t\tel: '#app',",
         "\t\tdata: {},",
         "\t\tmethods: {}",
         "\t });",
         "\t</script>",
         "</body>\n",
         "</html>"
        ],
        "description": "HT-H5" // description of the template
     }

エスケープ文字について説明します。

\を入力する際に入力できるようにするためのエスケープ文字で、"スペース "は単に "空白 "のことです。
\Ъは次のタブ位置まで水平方向にジャンプすることを意味し、Tabキーに相当する
\Ъはダブルクォーテーション
\キャリッジリターン、ラインフィードを意味します。

以上が今回の記事の内容ですが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します