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