VSCode配置代码模板

最新推荐文章于 2024-05-26 20:36:18 发布

Coder-michael

最新推荐文章于 2024-05-26 20:36:18 发布

阅读量2.1k

点赞数

分类专栏： Vue进阶文章标签： vscode javascript 前端 vscode代码块生成 snippet

本文链接：https://blog.csdn.net/weixin_46036165/article/details/125758359

版权

Vue进阶专栏收录该内容

15 篇文章 4 订阅

订阅专栏

1. 开发需要配置的代码

"create vue app": {
  "prefix": "vueapp",
  "body": [
    "<html lang=\"en\">",
    "<head>",
    "  <meta charset=\"UTF-8\">",
    "  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
    "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    "  <title>Document</title>",
    "</head>",
    "<body>",
    "",
    "  <div id=\"app\">",
    "  </div>",
    "  ",
    "  <script src=\"../lib/vue.js\"></script>",
    "  <script>",
    "    // 1. create an app",
    "    const app = Vue.createApp({",
    "      // data: option api",
    "      data: function() {",
    "        return {",
    "          message: \"Hello Vue\"",
    "        }",
    "      }",
    "    })",
    "",
    "    // 2. mount app",
    "    app.mount(\"#app\")",
    "  </script>",
    "</body>",
    "</html>"
  ],
  "description": "create vue app"
}

2. 使用片段生成器生成代码snippet

https://snippet-generator.app/

2.1 输入描述/关键字/代码块

在这里插入图片描述

2.2. 赋值生成的json

"create vue app": {
  "prefix": "vueapp",
  "body": [
    "<html lang=\"en\">",
    "<head>",
    "  <meta charset=\"UTF-8\">",
    "  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
    "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    "  <title>Document</title>",
    "</head>",
    "<body>",
    "",
    "  <div id=\"app\">",
    "  </div>",
    "  ",
    "  <script src=\"../lib/vue.js\"></script>",
    "  <script>",
    "    // 1. create an app",
    "    const app = Vue.createApp({",
    "      // data: option api",
    "      data: function() {",
    "        return {",
    "          message: \"Hello Vue\"",
    "        }",
    "      }",
    "    })",
    "",
    "    // 2. mount app",
    "    app.mount(\"#app\")",
    "  </script>",
    "</body>",
    "</html>"
  ],
  "description": "create vue app"
}