VsCode快速生成Vue.js代码片段

最新推荐文章于 2024-08-30 01:40:33 发布

iku_ki

最新推荐文章于 2024-08-30 01:40:33 发布

阅读量598

点赞数

分类专栏： IT 学习前端vue 文章标签： vue.js html 开发工具

本文链接：https://blog.csdn.net/weixin_46435234/article/details/116376362

版权

IT 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

学习

28 篇文章 0 订阅

订阅专栏

前端vue

5 篇文章 0 订阅

订阅专栏

文件----> 首选项 ----> 用户代码片段
prefix：生成模板代码的快捷键
scope：只有在html页面中使用这个快捷键才能生成模板
description：快捷键描述

选择vue.code-snippets文件将下面的模板粘贴进去即可
在这里插入图片描述

{
    "vue htm": {
        "scope": "html",
        "prefix": "vue",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"UTF-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "    <title>Document</title>",
            "</head>",
            "",
            "<body>",
            "    <div id=\"app\">",
            "",
            "    </div>",
            "    <script src=\"js/vue.js\"></script>",
            "    <script>",
            "        var vm = new Vue({",
            "            el: '#app',",
            "            data: {",
            "                $1",
            "            }",
            "        })",
            "    </script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "快速创建Vue模板"
    }
}

“Print to console”：快捷选项的名称
"prefix"：前缀，在 JS 文件中输入前缀 + Tab 键就会自动拓展出"body" 中的内容
“body”：正文，即拓展内容， body 是一个数组，即可以通过一个小小的前缀拓展出一个很大的代码段
“description”：描述，当你在 JS 输入前缀的时候，这时候会出现代码提示框，这时候框中就会出现"description"的内容
$0,$1,$2：这些符号不会最终出现在拓展代码中，你可以将它们理解为占位符
$0 是最后光标的位置，默认代码拓展后，光标在语句的尾部，但是在 “body” 中插入 $0 ，会改变光标的位置，在上面的例子中，“console.log($0);”，最后光标会直接出现在小括号中，我们就可以直接在其中编辑我们要打印的语句了
$1,$2用法其实类似 $0 ，你可以理解为 Tab 占位符，如果是这样的正文："$2cons$1ole.log($0);"。那么代码拓展后光标会出现在$1 的位置($1 光标占位优先级比 $0，$2 高)，然后你按下 Tab 键会跳到 $2 的位置，再按下 Tab 键，会跳到 $0 的位置
就是这么神奇，其实我觉得一般的拓展会使用 $0 就够了