vscode使用user snippet(用户代码片段) 快速生成vue模板

写vue组件碰到的第一个问题,就是每次都要写template,script,style标签,这种重复性高的工作,我们一般会想办法进行优化。像我之前就会复制app.vue的内容。复制的操作,要打开文件,切换文件也是有点麻烦的。

其实vscode 的vetur插件就内置了vue模板的代码,只要打出vue三个字母就会出现在列表里面,但是这个模板只有3个标签,因为我一般还要用到scss,所以决定自己写一个snippet

vscode里面ctrl+shift+p调出命令面板,然后输入snippet就能找到设置项,在里面找到vue

修改vue.json,加入下面的内容即可

    "generate vue template": {
        "prefix": "vue",
        "body": [
            "",
            "",
            "",
            "",
            ""
        ]

    }

其中$1是初始光标的位置,$2就是按tap键之后光标会跳转到的位置,后面你也可以添加$3,$4继续往后面添加。。。

所以这个添加的snippet就是先添加template的内容,然后tap键跳转到style编辑样式,符合实际使用

你可能感兴趣的:(vscode使用user snippet(用户代码片段) 快速生成vue模板)