vscode创建vue代码片段（通用）

2021-02-14 本文已影响0人踏莎行

初次接触前端之后，我们使用vscode的“！+ tab”就快速的创建了HTML基本骨架，这其实是在vscode中提前预设好的用户代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

其实我们自己也可以自定义模板：打开设置>用户代码片段

template
之后我们选择：“html.json”

html.json

打开json文件，注释中vscode给我们提供了一个实例

uhfue.PNG

注释的意思就是：把你的html代码片段放在这里。每个代码段都在代码段名称下定义，并具有前缀、正文和描述。前缀是用来触发代码段的，正文将被展开和插入，以原有的“！”生成HTML片段为例，这个叹号就是前缀。

基本的框架：

"template_name": {
    "prefix": "",
    "body": [],
    "description": "" 
}

template_name:自定义你所设置的模板名称
prefix：前缀，简单说就是你设置的快捷键
body：模板内容
description：对模板的描述

以生成简单的vue模板为例：将下一段代码放在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=\"../js/vue.js\"></script>",
"</head>\n",
"<body>",
"\t<div id =\"app\"></div>\n",
"\t<script>",
"\t //创建Vue实例,得到 ViewModel",
"\t var vm = new Vue({",
"\t\tel: '#app',",
"\t\tdata: {},",
"\t\tmethods: {}",
"\t });",
"\t</script>",
"</body>\n",
"</html>"

每行代码都需要使用双引号引起来，若里面还需要加引号，就需要使用转义字符“\”
\t: 表示缩进，一个“tab”
\n: 换行

基本

{
    
    "vue_template": {
        "prefix": "vl",
        "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=\"../js/vue.js\"></script>",
            "</head>\n",
            "<body>",
            "\t<div id =\"app\"></div>\n",
            "\t<script>",
            "\t //创建Vue实例,得到 ViewModel",
            "\t var vm = new Vue({",
            "\t\tel: '#app',",
            "\t\tdata: {},",
            "\t\tmethods: {}",
            "\t });",
            "\t</script>",
            "</body>\n",
            "</html>"
        ],
        "description": "vue学习时创建文件的模板" 
    }
}

其他配置：添加占位符，就是在打开模板之后光标所定位的位置，使用'$'

单纯的光变定位：在开发时为了方便，需要光标多个地方定位，按照顺序在要定位的地方加上 $1, $2, $3······，使用tab键进行切换
定位以及加上注释：${1:注释}，${2:注释}······
如：

"\t<div id =\"app\">${1:name}</div>\n",

是不是很麻烦？哈哈哈，这里给大家提供一个简单的方法
https://snippet-generator.app/，这个网站可以自动为我们做上面的操作

Snipaste_2022-04-23_11-11-51.png

vscode创建vue代码片段（通用）

猜你喜欢

热点阅读