vscode 设置代码片段 Vue设置代码模板（霸霸看了都说好）

最新推荐文章于 2024-04-09 14:28:21 发布

原创最新推荐文章于 2024-04-09 14:28:21 发布 · 526 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vscode

开发工具专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Visual Studio Code(VSCode)中自定义Vue代码模板，通过编辑配置文件，定义了一个包括模板、样式和脚本的Vue组件快捷生成器。用户可以设置自己的快捷键（prefix），例如“vue”，在新建.vue文件时快速输入基础结构，提高开发效率。

1、经常用到的 vue代码模板可以通过设置 vscode 进行设置

2、找到vue配置文件

微信截图_20200226115905.png

3、替换模板格式代码

{
	"Print to console": {
		"prefix": "vue",  
		"body": [
		  "<!-- $1 -->",
		  "<template>",
		  "<div class=\"\">",
		  "",
		  "</div>",
		  "</template>",
		  "",
		  "<script>",
		  "export default {",
			"    name:\"\",",
			"    data() {",
			"        return {",
					"",
			"        }",
			"    },",
			"    //生命周期 - 创建完成（访问当前this实例）",
			"    created() {",
			"",
			"    },",
			"    //生命周期 - 挂载完成（访问DOM元素）",
			"    mounted() {",
			"",
			"    }",
		  "}",
		  "</script>",
		  "<style lang=\"less\" scoped>",
		  "/* @import url(); 引入css类 */",
		  "$4",
		  "</style>"
		],
		"description": "生成vue模板"
	}
}

注意：prefix 这个字段是快捷键匹配（可以自己定义）