上个文章已经讲了快速生成代码块的原理,但是随着学习的深入,前一个代码块已经不能满足我们的需求,因此,我们可以编写一个更加方便的代码块:
首先还是找到设置中的用户代码片段:
然后搜索html,进入html.json文件:
html.json基本内容与javascript.json中相同,这次选择html.json的原因是,这次我想创建的快速代码片段不是在<script></script>中书写的,而是创建了.html文件之后就可以立即使用的。
为什么要创建这样一个快速代码块呢?每当我们创建.html文件后使用"!"来生成代码,都只能生成部分代码,我们还需要改标题、引入vue.js文件、创建容器、创建Vue实例,一系列工作完成之后才能接着写代码,既然可以编写属于自己的快速生成的快捷方式,并且以上流程前期学习时使用过于频繁,何乐而不为呢?
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
},
"Print to html-vue": {
"prefix": "html-vue",
"body": [
"<!DOCTYPE html>",
"<html lang='en'>",
"<head>",
" <meta charset='UTF-8'>",
" <meta name='viewport' content='width=device-width, initial-scale=1.0'>",
" <title>$1</title>",
" <script src='$2'></script>",
"</head>",
"<body>",
" <div id='app'>",
" $3",
" </div>",
" <script>",
" const vm = new Vue({",
" el : '#app',",
" data : {",
" $4",
" },",
" methods : {",
" $5",
" },",
" computed : {",
" $6",
" },",
" watch : {",
" $7",
" }",
" })",
" </script>",
"</body>",
"</html>"
]
}
}
有了以上的准备,当创建一个.html文件时,不必再使用"!"来生成,然后慢慢改,直接敲击"html-vue"就可以生成大量代码,并且通过光标定位使用tab键可以快速填充动态的内容。
注:上述代码块中,vm中有很多配置项,即使不用放着也不会报错,全部生成也无伤大雅。