Sublime Text自定义snippet

本文介绍如何使用 Sublime Text 的 snippet 功能提高编码效率。通过自定义 snippet,可快速生成常用的代码片段,如 HTML5 文档结构等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

个人环境:
win7 64位专业版 + Sublime Text3(以下简称ST)

snippet可以理解为代码片段, 在自定义好snippet后就可以快带生成相应的代码片段.

先来感受下效果:

sublime text自定义snippet


如何编写自己的snippet呢?
在ST中: 依次选择tools -> Developer -> New Snippet, 就打开默认的snippet了:

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

其中的content中的CDATA就是实际的snippet的内容.
tabTrigger就是触发snippet的字符串, 比如上图中的html5.
scope就是说在哪里会触发, 可以简单理解为文件类型.

下面是上图中的snippet写法:

<snippet>
    <content><![CDATA[
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta  name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta  name="apple-mobile-web-app-capable" content="yes">
<meta  name="apple-mobile-web-app-status-bar-style" content="black">
<meta  name="format-detection" content="telephone=no">
<meta  name="format-detection" content="email=no">
<title>${1}</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
    ${2}
</body>

</html>
]]></content>
    <tabTrigger>html5</tabTrigger>
    <scope>text.html</scope>
</snippet>

可以看到上面有个${1}, ${2}, 很容易猜到, 这就是按tab键时,光标依次停留的位置.


注意事项:

  • 保存snippet时, 文件扩展名要是sublime-snippet.

参考:

欢迎补充指正!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值