Vue VSCode Snippets

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 的理解和记忆。