Visual Studio code 添加多个vue代码片段或JavaScript方法片段

最新推荐文章于 2025-07-28 21:09:35 发布

原创最新推荐文章于 2025-07-28 21:09:35 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#visual studio #vs 编辑器自定义添加代码片段

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

2 篇文章

订阅专栏

本文详细介绍了如何在VSCode中添加Vue代码片段，包括创建自定义模板、编写模板内容及如何触发使用。适用于希望提高Vue开发效率的前端开发者。

vue代码片段和JavaScript片段添加方法类似；vue代码片段在vue.json下添加，JavaScript方法片段在javascript.json文件下添加（在用户代码片段内搜索此文件）；以添加vue代码片段为例：

一.添加vue模板代码片段：

1.找到VS code编辑器文件下的首选项里面用户代码片段，如图：
在这里插入图片描述

2.选择vue.json，进入此文件下创建自己的模板，如下：
在这里插入图片描述
在vue.json文件下，编写模板：

{
	// Place your snippets for vue 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:
	"vue1": {//vue1:模板标识一（不可重复）
        "prefix": "vue",//自定义模板名称；
        "body": [
            "<template>",
			"\t<el-row  class=\"mainTableBox\">\n",
            "\t</el-row>",
            "</template>\n",
            "<script>",
            "\texport default {",
            "\t\tdata () {",
			"\t\t\treturn {",
			"\t\t\t\trow:[],",
			"\t\t\t\tloading:false,",
			"\t\t\t\tpageIndex:1,//当前页码",
			"\t\t\t\ttotalCounts:1,//总页数",
            "\t\t\t}",
            "\t\t},",
			"\t\tmounted() {",
			"\t\t\tthis.init();",
            "\t\t}",
			"\t\tmethods: {\n",
			"\t\t\tinit(){\n",
			"\t\t\t},",
			"\t\t\tadd(){\n",
			"\t\t\t},",
			"\t\t\tedit(){\n",
			"\t\t\t},",
            "\t\t}",
            "\t\tcomputed: {\n",
            "\t\t}",
            "\t\twatch: {\n",
            "\t\t}",
            "\t}",
            "</script>\n",
            "<style>\n",
            " ",
            "</style>",
        ],
        "description": "vue基础代码片段"
	},
	"vue2": {//vue2：模板标识二（不可重复）
		 "prefix": "vue2",//自定义模板名称；
		 "body": [
			     "console.log('$1');",
	 		     "$2"
		 ],
	     "description": "Log output to console"
	}
}

3.使用：在.vue文件下输入vue时，按回车键或tab
在这里插入图片描述