【效率IDE】vscode 使用 snippets 为 .vue 生成模板

版权声明:本文为博主原创文章,转载请带上出处,谢谢。 https://blog.csdn.net/Pumpkinman/article/details/83418039

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等

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页