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

最新推荐文章于 2023-09-12 21:06:52 发布

风向北吹i

最新推荐文章于 2023-09-12 21:06:52 发布

阅读量1.2k

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_40576178/article/details/111272930

版权

通过快捷键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>

操作步骤：

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"
    }

风向北吹i

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在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
复制链接

扫一扫