vscode怎么设置vue模板代码

PHP中文网 软件应用

本文摘自PHP中文网，作者V，侵删。

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

8c407baa0389658f5063b56f6623255.png

在扩展插件搜索框中找到如下 Vetur 和 VueHelper 两个插件，注意看图标。

81a579f3003418fc9621b23a8ec601e.png

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

73fc73462496321cb3fa11449558c1e.png

选中 vue 项

3d27651501f02e8b2ab11a9ce3ad7f7.png

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

{

    "vue": {

    "prefix": "vue",

    "body": [

        "<template>",

        "  <div>",

        "  </div>",

        "</template>",

        "<script>",

        "</script>",

        "<style scoped>",

        "</style>",

    ],

    "description": "generate a vue file"}

}

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

dbd4eeeb7c48e8fc035e9653c3cb46f.png

相关推荐：vscode教程

以上就是vscode怎么设置vue模板代码的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

vsCode和vs2017区别

vsCode不受支持怎么办

vsCode怎么调字体大小

vsCode如何更换主题

vsCode实战之开发一个五脏俱全的翻译插件

如何使用vsCode配置启动vue项目

vsCode扩展放哪了？

vsCode在哪里改中文

vsCode如何更改文件默认保存路径

vsCode如何定位文件位置

更多相关阅读请进入《vsCode》频道 >>



标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...