【效率IDE】vscode 使用 snippets 为 .vue 生成模板
VSCODE是一款轻量级的IDE,打开速度快,快捷操作便捷,支持的语言多和插件多,社区大生态完善,很适合开发人员使用。0x1 具体实现1. ctrl + shift + p 打开vscode的快速导航命令栏2.输入 snippets 后,选择首选项:配置用户代码片段3.输入vue 后点击 vue.json后就可以在里面输入模板,具体格式如下:{"Print to cons...
·
VSCODE是一款轻量级的IDE,打开速度快,快捷操作便捷,支持的语言多和插件多,社区大生态完善,很适合开发人员使用。
0x1 具体实现
1. ctrl + shift + p 打开vscode的快速导航命令栏
2.输入 snippets 后,选择首选项:配置用户代码片段
3.输入vue 后点击 vue.json后就可以在里面输入模板,具体格式如下:
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div></div>",
"</template>",
"",
"<script type=\"text/ecmascript-6\">",
"export default {",
" data () {",
" return {",
" };",
" },",
"",
" components: {},",
"",
" computed: {},",
"",
" mounted: {},",
"",
" methods: {}",
"}",
"",
"</script>",
"<style lang=\"stylus\" rel=\"stylesheet/stylus\">",
"</style>"
],
"description": "Log output to console"
}
}
这样当我们新建一个.vue文件并输入vue后按tab键,就能够生成一套我们在vue.json里定义的模板,这里有几点需要注意:
- 我们可以在vue.json中定义多个snippets,随后我们根据 "prefix":"vue"里定义的值,就能够在.vue中引用到
- vue.json这个文件命表示能够在.vue的文件中使用snippets,同理如果我们想在 .html中使用,就需要在html.json里去定义我们的模板
- 知道了这个方式,我们就可以在大多数文件中使用snippets了
0X2 其他插件
得益于vs code 强大的第三方插件,我们能够在扩展中下载到很多vue代码补全的插件,人气比较高的有:
VueHelp, Vue 2 Snippets, Vetur等
更多推荐
已为社区贡献1条内容
所有评论(0)