我们知道,在VScode中编辑HTML代码时,使用!+Tab组合键快速生成一个HTML框架。而在VScode中,提供了一种方式,可以让我们自定义代码片段,以便我们通过组合键+Tab快速输入常用的代码框架(例如Vue框架)。这样就避免了反复输入代码框架问题,从而提高代码效率。
1.准备一段你想要快速输入的代码
此处以Vue代码框架举例,说明两点:
- 需要把title标签中的内容替换成${TM_FILENAME_BASE},这样可以自动填充Title名。
- $1为快捷键光标停留位置,若不存在标签,则光标默认停留在最后。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>${TM_FILENAME_BASE}</title>
<!-- 导入vue包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<script>
var app=new Vue({
el:"#app",
data:{
$1 //此处为光标停留的位置
},
})
</script>
</body>
</html>
2.使用代码生成器生成VScode代码片段。
- 1.输入名称和简写(不要填写中文名!),简写就是最终自定义的快捷键。
- tips:名称建议避开html,python,Java此类常用名,以免发生未知错误

- 2.此时右侧会生成代码片段,点击复制

3.打开VScode创建代码片段
- 1.打开VScode点击左下角设置,选择配置用户代码片段

- 2.文件名自定义(不要写中文名!),然后回车。(默认为全局使用,可选择在特定的文件中使用)
- tips:名称建议避开html,python,Java此类常用名,以免发生未知错误

- 3.将刚才代码生成器右侧的片段复制到该文件里面。(复制到花括号内部!)

- 4.保存文件。
4.使用方法
新建一个文档,使用自定义的名称+Tab即可实现快速输入!

