【技巧】一个命令让VS code快速生成固定的代码片段

比如我们经常使用固定的代码格式来生成代码片段。

第一步，编写需要生成代码片段的代码，代码示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>

  <template id="my-app">
    <div>{{message}}</div>
  </template>

  <script src="js/vue@3.4.18.js"></script>
  <script>
    const App = {
      template: '#my-app',
      data: function () {
        return {
          message: 'Hello Vue3!'
        }
      },
      methods: {

      }
    }

    Vue.createApp(App).mount('#app');
  </script>
</body>

</html>

第二步，将需要生成的代码片段复制到链接https://snippet-generator.app/中的左侧面板中，示例截图如下：

取一个模板名称例如叫：“vue3app”。

第三步，在VScode中打开User Snippets，不同的操作系统对应的步骤如下。

Windows/Linux：File→Preferences→Configure User Snippets.
masOs：Code→Preferences→User Snippets

第四步，打开User Snippets面板后，在输入框中输入“html”,并选择html模板，如图所示：

选择html模板后，会打开一个名为html.json文件。接下来，我们将刚才在一个在线网站生成的代码片段代码放到html.json文件中的{}中,如下示例代码：

"create vue3 app": {
  "prefix": "vue3app",
  "body": [
    "<!DOCTYPE html>",
    "<html lang=\"en\">",
    "",
    "<head>",
    "  <meta charset=\"UTF-8\">",
    "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    "  <title>Document</title>",
    "</head>",
    "",
    "<body>",
    "  <div id=\"app\"></div>",
    "",
    "  <template id=\"my-app\">",
    "    <div>{{message}}</div>",
    "  </template>",
    "",
    "  <script src=\"js/vue@3.4.18.js\"></script>",
    "  <script>",
    "    const App = {",
    "      template: '#my-app',",
    "      data: function () {",
    "        return {",
    "          message: 'Hello Vue3!'",
    "        }",
    "      },",
    "      methods: {",
    "",
    "      }",
    "    }",
    "",
    "    Vue.createApp(App).mount('#app');",
    "  </script>",
    "</body>",
    "",
    "</html>"
  ],
  "description": "create vue3 app"
}