Vue VSCode Snippets
今天不写代码了,分享个Vue VSCode Snippets的插件
在使用了Vscode编辑器(这插件不只是 VSCode,基本所有的主流编辑器都支持 snipeets)写Vue前端代码,是不是发现很坑,很多东西都不会提示,而且超级难找,不管是不是,往下看就对了。。。。
什么是Vue VSCode Snippets
简单说一下,Vue VSCode Snippets是一个针对Visual Studio Code(VSCode)的Vue代码片段集合。这个插件的目的是通过预定义一系列的快捷码,帮助开发者在编写Vue代码时,能够更快速、更高效地生成常见的模板代码结构。这些代码片段涵盖了Vue组件、指令、过滤器等各个方面,只需简单地输入几个缩写,就能自动填充相应的代码结构。
使用Vue VSCode Snippets,不仅可以减少手动输入,降低出错的可能性,还能提升代码的一致性和可读性。这对于提高开发效率,优化工作流程具有显著的效果。
直接上手,在扩展中搜索,会存在第一次安装完成之后,发现他的一些命令根本不生效,我重启了Vscode还是没啥反应。确保你当前打开的文件是一个 .vue
文件,这样 Vue VSCode Snippets 插件才能正常工作。不是.vue文件,你就不要捣鼓了,打死了也出不来。。。
选择vue的语法配置
这样应该就差不多了。还是没有效果,我就不清楚(已经摆烂了)
其实它的json格式是这样的,
{
"alpha": {
"prefix": ["a", "z"],
"body": [
"abcdefghijklmnopqrstuvwxyz"
],
"description": "吧啦吧啦",
"scope": "javascript"
}
}
- prefix 是触发的前缀,可以指定多个,根据你 的配置来。
- body 是插入到编辑器中的内容,它的语法可以支持多种。
- description 是具体描述。
- scope 是生效的语言,不指定的话也没有关系,默认就是所有语言都生效。
- body 部分就很厉害了,就是待插入的代码。它也支持很多语法。
目前所有的对象基本上都支持很多语法,不然生存不下去的。。。。。
在 .vue
文件的编辑区域中,键入 Vue 相关的缩写或命令,例如:
- 输入
vbase
并按下Tab
键,可以快速生成一个基础的 Vue 组件模板,包括template
、script
和style
部分。 - 输入
vcomp
并按下Tab
键,可以生成一个包含完整 Vue 组件结构的代码片段,包括 props、data、methods 等。 - 输入
vfor
并按下Tab
键,可以快速生成一个v-for
指令的模板。 - 等等,根据插件提供的不同缩写,可以生成不同类型的 Vue 代码片段。
它还有一个更高级的,就是可以自定义或扩展代码片段。当然这个就需要配置了。听到配置头就疼。。。
这通常涉及到修改 VSCode 的用户片段文件(通常位于 ~/.vscode/snippets
目录下)。你可以创建一个新的 Vue 相关的片段文件,并在其中定义你自己的代码片段。
这玩意对新手的帮助很大,确实是非常实用的工具,可以帮助你更快地熟悉和编写 Vue 代码。建议不要一开始就试图记住所有的缩写,这可能会让你感到困惑或者很懵*。
虽然 Vue VSCode Snippets 可以帮助你快速生成代码,但过度依赖它可能会限制你的思考和创造力。建议在使用代码片段的同时,也尝试手动编写代码,以加深对 Vue 的理解和记忆。