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如何新建css

vsCode如何配置go语言开发环境

vsCode如何修改python运行路径

vsCode todo如何使用

vsCode怎么自动格式化代码

如何完全卸载vsCode

vsCode如何关闭语法错误提示

vsCode theme主题怎么改

关于vsCode中vim插件的使用教程

如何设置vsCode缩进

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



标签：

打赏

取消

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

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

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

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

相关推荐

评论

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