Loading

在vscode中快速生成vue模板

场景

有的时候有些代码经常写,我们希望通过快捷键快速生成对应的代码结构,可以使用到vscode的代码片段

示例:根据html代码快速生成vue模版

步骤1:复制要快速生成的代码结构

<!DOCTYPE html>
<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="my-app"></div>

    <template id="tpl">
      <h3>{{msg}}</h3>
    </template>
    <script src="../lib/vue.js"></script>
    <script>
      Vue.createApp({
        template: "#tpl",
        data() {
          return {
            msg: "hello vue",
          };
        },
      }).mount("#my-app");
    </script>
  </body>
</html>

步骤2:在下面的网站中快速生成代码片段

https://snippet-generator.app/

  • description:填写对应的描述
  • tab tigger:根据哪些关键字触发生成代码结构

步骤3: 在vscode中进行配置

然后输入"html.json"

如果有其他的代码片段则在往后追加

posted @ 2021-10-30 15:54  ^Mao^  阅读(479)  评论(0编辑  收藏  举报