Vue / 其他 · 2022年7月21日 0

VScode使用用户代码片段快速生成自定义代码

我们知道,在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即可实现快速输入!