VScode为Vue文件设置模板代码

￡神魔★判官ぃ 2021-11-22 13:02 337阅读 0赞

（1）安装 Vetur 和 VueHelper 插件，安装完成后需要重启 VScode。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70][]

在扩展插件搜索框中找到如下 Vetur 和 VueHelper 两个插件，注意看图标，千万别安装错插件了。

![2019072415573364.png][]

（2）为 vue 添加模板代码片段。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70 1][]

选中 vue 项。

![20190724155827238.png][]

在打开的 vue.json 中加入你的模板代码片段。

{
    	"vue": {
    	"prefix": "vue",
    	"body": [
    		"<template>",
    		"  <div>",
    		"  </div>",
    		"</template>",
    		"<script>",
    		"</script>",
    		"<style scoped>",
    		"</style>",
    	],
    	"description": "generate a vue file"}
    }

（3）在 vue 文件中，当你键入 vue 前缀时将自动联想出你在前面创建好的代码片段描述，此时按下 Tab 键或者选中它，模板代码片段将会被自动添加到你的 vue 文件中。

![20190724155940542.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70]: /images/20211122/1a97bc71da054b2a9746ad1d40ae541b.png
[2019072415573364.png]: /images/20211122/051221a3bda742d59ed3feca0aa2bf87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70 1]: /images/20211122/5d8c0ab6bd124592bd08a647da9ccacd.png
[20190724155827238.png]: /images/20211122/adb1f4fbddb14d19871ce6a3a4729f52.png
[20190724155940542.gif]: /images/20211122/c878d9f83ff443a9b7587f0ba65c93f2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，337人围观）

还没有评论，来说两句吧...

相关阅读

相关 VSCode自定义代码模板

1.首先选择文件-首选项-配置用户代码片段 ![25963b07239b4c3494b50aab07c16b78.png][] 2.可以选择默认的全局代码片段进行修改也可以

不念不忘少年蓝@/ 2024年04月01日 10:22/ 0 赞/ 34 阅读

相关 vscode代码模板（vue3模板）输入vue3显示代码提示

途径一：在vscode中依次打开：【文件】-->【首选项】-->【配置用户代码片段】-->【新代码片段】途径二：或者点击左下角的设置模样的按钮也可找到（如下图） ![26

朱雀/ 2024年03月23日 16:01/ 0 赞/ 46 阅读

相关 VScode创建Vue模板代码-自定义代码片段

前提：vscode中已安装vue 配置模块代码片段： 1. 依次选择 “ File（文件） -> preperences（首选项） -> User Snippets(用户

﹏ヽ暗。殇╰゛Y/ 2022年12月05日 01:35/ 0 赞/ 198 阅读

相关 vscode里使用 .vue 代码模板

vscode里面设置vue模板，使用快捷键可以快速生成vue的基础代码，节省时间效果： <template> <div class="conta

亦凉/ 2022年11月19日 01:29/ 0 赞/ 145 阅读

相关前端-在vscode 中设置 vue模板内容

参考链接 [https://blog.csdn.net/qq\_20667511/article/details/108308367][https_blog.csdn.net

港控/mmm°/ 2022年10月31日 13:40/ 0 赞/ 127 阅读

相关 vscode设置vue代码片段

一、如何设置？ 1. 打开用户片段 ![clipboard.png][] 2. 选择或创建`vue.json`代码片段 ![clipb

╰+攻爆jí腚メ/ 2022年10月27日 12:18/ 0 赞/ 255 阅读

相关 vsCode 快速生成vue 模板

1. 用快捷Ctrl + Shift + P唤出控制台 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

谁借莪１个温暖的怀抱￠/ 2022年10月06日 12:56/ 0 赞/ 315 阅读

相关基于vscode配置vue模板

1. ctrl+shift+p，选择首选项:配置用户代码片段。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

水深无声/ 2022年09月06日 00:22/ 0 赞/ 164 阅读

相关 VScode快速创建vue模板

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

﹏ヽ暗。殇╰゛Y/ 2021年12月23日 23:03/ 0 赞/ 352 阅读

相关 VScode为Vue文件设置模板代码

（1）安装 Vetur 和 VueHelper 插件，安装完成后需要重启 VScode。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shado

￡神魔★判官ぃ/ 2021年11月22日 13:02/ 0 赞/ 338 阅读