比如我们经常使用固定的代码格式来生成代码片段。
第一步,编写需要生成代码片段的代码,代码示例如下:
<!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/[email protected]"></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/[email protected]\"></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键就可以快速生成刚才定义的代码片段,如图所示:
标签:片段,code,app,VS,生成,html,代码,vue3app From: https://www.cnblogs.com/moqiutao/p/18409773