vs code中创建代码片段

客官°小女子只卖身不卖艺 2022-11-11 13:14 163阅读 0赞

文件 =>  首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

> 注意：后缀名需要命名为.code-snippets

比如下面是一段快速创建vue模板的代码片段，拷贝之后需要自行修改vue包的路径

{
        "vue htm": {
            "scope": "html",
            "prefix": "vuehtml",
            "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=\"vue.min.js\"></script>",
                "    <script>",
                "        new Vue({",
                "            el: '#app',",
                "            data: {",
                "                $1",
                "            }",
                "        })",
                "    </script>",
                "</body>",
                "",
                "</html>",
            ],
            "description": "my vue template in html"
        }
    }

使用：

![20210320142800951.png][]

[20210320142800951.png]: /images/20221022/534f6f6d55034ad3a20ca93c27a4449b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 VS Code配置snippets代码片段快速生成html模板，提高前端编写效率

先看下示例，在输入 ! 号回车后自动生成一段代码片段。这样我们就可以更便捷的进行代码编写了。 ![请添加图片描述][09cae84e829c4d98bc038cd59

朱雀/ 2024年04月07日 14:03/ 0 赞/ 48 阅读

相关 VS Code中如何自定义代码片段

VS Code中如何自定义代码片段 1.为了避免在学习vuejs的过程中重复写框架，所以我们先写好一个模版，如下： <!DOCTYPE html>

刺骨的言语ヽ痛彻心扉/ 2022年12月07日 12:50/ 0 赞/ 151 阅读

相关 vs code中创建代码片段

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets > 注意：后缀名需要命名为.code-sni

客官°小女子只卖身不卖艺/ 2022年11月11日 13:14/ 0 赞/ 164 阅读

相关 vs code 调试远程代码

简介 Visual Studio Code Remote - SSH 可以打开远程计算机或容器中的文件(计算机或容器中需要运行 `SSH Server`),而且可已充分利

野性酷女/ 2022年10月02日 14:56/ 0 赞/ 177 阅读

相关 vs code 代码格式化整理

vs code格式化代码的快捷键如下：[（来源于这里）][Link 1] On Windows Shift + Alt + F On Mac Shift + Op

末蓝、/ 2022年05月24日 06:47/ 0 赞/ 226 阅读

相关使用 VS Code 创建 Angular 项目

使用 VS Code 创建 Angular 项目 ![使用 VS Code 创建 Angular 项目][VS Code _ Angular] [VS Code _

朱雀/ 2022年05月22日 11:55/ 0 赞/ 228 阅读

相关 vs code 快速创建html

第一步：新建一个文件： index.html ![70][] 第二步：在文件中输入 ! ![70 1][] 第三步：按下 tab键。 ![70 2][

分手后的思念是犯贱/ 2022年05月06日 07:21/ 0 赞/ 160 阅读

相关 vscode创建vue快捷代码片段

（1）打开文件首选项 —> 用户代码片段 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

迷南。/ 2022年02月03日 00:55/ 0 赞/ 455 阅读

相关教你用VS code 生成vue-cli代码片段

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

爱被打了一巴掌/ 2021年09月19日 16:00/ 0 赞/ 294 阅读

相关 VS Code 设置全局用户代码片段

一. 进入用户片段搜索界面文件 ==> 首选项 ==> 用户片段 ![在这里插入图片描述][20200717155303808.png] ![在这里插入图片

灰太狼/ 2021年07月25日 14:57/ 0 赞/ 634 阅读