sublime text3自定义代码补全模板

模拟案例

拟实现在 HTML 文件中输入cmt 再按TAB键即可自动补全注释代码块，如下：

解决方案

首先在 Sublime Text 中安装以下插件（已装请略）：

• Package Control
• Emmet
• Package Resource Viewer （可编辑压缩包内部文件）

参考 Sublime Text 的 Package 目录规则：...\安装路径\Packages\HTML.sublime-package\Snippets\...

打开：Sublime Text3 -> references -> Browse Packages...

在当前目录新建文件夹路径: HTML\Snippets\

在 Snippets 目录下新建文件，例如：comments-(cmt).sublime-snippet ，这里的文件后缀必须是 .sublime-snippet，文件名可以自己定义，但不要和 Sublime Text 的内置文件重合，文件内容参考如下：

<snippet>
	<content><![CDATA[<!-- ${1:} -->]]></content>
	<tabTrigger>cmt</tabTrigger>
	<scope>text.html</scope>
	<description>comments</description>
</snippet>

• content：这个标签是自定义的补全代码，注意要使用 <![CDATA[ ]]> 标签包裹。${1:str1} 作用是按TAB键补全后将光标跳转至字符串 str1 的位置，${2:str2} 则代表第二次按TAB键后跳转的位置，以此类推。
• tabTrigger：自定义的补全提示代码（不能包含特殊字符）
• scope：生效的范围，例如本例中使用 text.html 表示只在 HTML 文件中生效
• description：功能描述，在补全提示框中显示

最后重启 Sublime Text 测试补全代码是否生效，以后可以使用 Package Resource Viewer 插件进行调整：

• 在Sublime Text界面按快捷键 ctrl + shift + p 打开Package Control，
• 输入 ope 并回车，打开插件 PackageResourceViewer: Open Resource
• 输入 HTML 并回车，即可打开 HTML 语言的压缩包
• 编辑 Snippets 目录下刚才新建的补全文件 comments-(cmt).sublime-snippet

用以上方式同样可以修改 Sublime Text 默认的补全代码，例如修改 JavaScript 中 function 函数的补全代码，在上面步骤中输入 js 即可打开相应的压缩包，找到 function-(fun).sublime-snippet 文件进行修改。

参考资料

• 修改sublime默认的补全代码_阳水平的博客-CSDN博客
• sublime text3 如何快速启动自定义html模板？ - SegmentFault 思否
• How to change the format of autocomplete in Sublime text 3 - Stack Overflow