VSCode 快捷创建用户代码片段
·
Yin灏
在使用 vscode 开发中,一些常用的代码片段或者页面模版,经常需要写,为了方便,可以配置代码片段,之后使用配置的语法命令快速生成,节省时间。
配置方式
- mac 中打开配置:Code -> 首选项 -> 用户片段
- 搜索 html,配置 html.json
代码片段有固定的格式,如果自己手写的话,肯定很慢,而且容易出错,可以直接借助现成的网站。
将写好的模版语法在 snippet-generator.app 网站生成代码片段,在 vscode 中配置,如下图所示:
- 配置后效果
- 使用时,直接输入配置的命令语言即可
// 通用模版
commonHtml;
// vue模版
vueapp;
html 模版
vue 模版页:create vue app(使用命令:vueapp
)
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keyword" content="测试页" />
<meta name="description" content="测试页" />
<title>vue3.x 使用html模版片段</title>
</head>
<body>
<div id="app"></div>
<template id="components">
<h2>{{ message }}</h2>
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: "#components",
data() {
return {
message: "Hello World!",
};
},
};
Vue.createApp(App).mount("#app");
</script>
</body>
</html>