VSCode Snippets 魔改专属的 vue 代码片段

Selicens2025-04-09 11:48

代码片段在实际开发中很有用，可以减少一些重复工作，一些插件比如ES7+ React/Redux/React-Native snippets可以通过快捷指令rfc快速搭建一个函数组件基础内容，我们也可以通过vscode的snippets diy自己的专属代码段，自己diy的片段肯定是更满足自己各种各样的需求的，vscode的代码段以json形式编写，包含代码段名称、prefix、body、description四个组成部分

标题	含义
prefix	定义一个或多个触发词，也可以理解为快捷指令
body	插入的代码段，可以使用换行符、制表符进行格式设置
description	可选的关于代码段的描述

假设我们要在vue2、3的项目间切换，他们的大致主体是一致的，但是script中有些许区别，vue2需要name和data，vue3需要setup和definOptions编译宏，并且v2的主流顺序是template-script-style，而v3的主流顺序是script-tempalte-style，当然这并不影响代码执行，取决于个人习惯，这样他们的初始功能就大致相同了，TM_FILENAME_BASE是vscode内置的变量，是获取当前文件名但不包含扩展名，假如文件是UserAuth.vue那么获取的就是UseAuth，不包含.vue，这样就可以省去为name敲键盘的几下了，vscode还有很多有用的内置变量可以在文档中翻阅Snippets in Visual Studio Code

json 复制代码

{
    "Vue2CodeSnippets": {
        "prefix": "vue2",
        "body": [
            "<template>${1}</template>\n",
            "<script>",
            "\texport default({",
            "\t\tname: '${TM_FILENAME_BASE}',",
            "\t\tdata() {",
            "\t\t\treturn {\n",
            "\t\t\t}",
            "\t\t},",
            "})",
            "</script>\n",
            "<style scoped></style>"
        ],
        "description": "Vue2CodeSnippets"
    }
}

json 复制代码

{
    "Vue3CodeSnippets": {
        "prefix": "vue3",
        "body": [
            "<script setup lang=\"ts\">",
            "\tdefineOptions({ name: '${TM_FILENAME_BASE})",
            "</script>\n",
            "<template></template>\n",
            "<style scoped></style>"
        ],
        "description": "Vue3CodeSnippets"
    }
}

这样我们就可以通过vue2、vue3的快捷指令插入一段基础主体的代码段