【技巧】一个命令让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"
}
第五步，使用vue3app快速生成模板代码。
在任意html文件中输入“vue3app”，按enter键就可以快速生成刚才定义的代码片段，如图所示：
