在vscode中通过快捷键`vh`将vue初始化代码结构自动输出

通过快捷键vh将vue结构快速输出，类似!将html结构快速输出一样
效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
  </div>
  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
      },
      methods:{
      }
     });
  </script>
</body>
</html>

原文链接：https://blog.csdn.net/qq_40576178/article/details/1112

操作步骤：

vscode中左下角-设置-用户代码片段-html.json
打开html.json后将下面代码复制在最外层的{}里面即可（如果不生效的话重启vscode）

"Print to Vue&html base code": {
        "prefix": "vh",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "<head>",
            "  <meta charset=\"UTF-8\">",
            "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "  <title>Document</title>",

            "</head>",
            "<body>",
            "  <div id=\"app\">",
            "  </div>",
            "  <script src=\"./vue.js\"></script>",
            "  <script>",
            "    var vm = new Vue({",
            "      el:'#app',",
            "      data:{",
            "      },",
            "      methods:{",
            "      }",
            "     });",
            "  </script>",
            "</body>",
            "</html>",

            "",
        ],
        "description": "Vue&html base code"
    }
————————————————
原文链接：https://blog.csdn.net/qq_40576178/article/details/111272930
posted @ 2021-08-03 16:27  技术白菜  阅读(587)  评论(0)    收藏  举报