submile-snippet 自定义代码片段

来源:互联网 发布:学数据库需要学编程吗 编辑:程序博客网 时间:2024/05/17 00:49

在做项目时,我们经常发现有些代码是一模一样的,比如html的基本框架,比如某个项目的共同部分,不断的复制粘贴很烦躁,submile的snippet可以解放我们的双手,比如可以自定义pc页面的html基本框架,自定义moblie页面的基本html框架。现在我就以自定义mobile页面的基本html骨架为demo.

自定义代码片段:

<snippet>
    <content><![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <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, email=no" />
    <title>${1}</title>
</head>
<body>
    ${2}
</body>
</html>
]]></content>
    <tabTrigger>html:mobile</tabTrigger>
    <description>Mobile Frame</description>
    <scope>text.html</scope>
</snippet>

  • <content><![CDATA[ ]]></content> 定义了补全的内容
  • ${1:elem name} 中: 1是输入点的序号,1表示的是第一个输入点,elem name表示的是输入点的默认值。
  • ${2:content} 中:2表示第二个输入点。
  • <tabTrigger> : 定义了触发补全的字符串
  • <description> :对snippet描述

打开任意一个文件,通过输入<tabTrigger>这里定义的内容</tabTrigger>,然后按Tab键,就可以补全内容。再按Tab进入下一个输入点。

上面的是snippet在任意类型的文件中都能触发。如果要限定文件类型,可以用
<scope>source.文件类型</scope>

注意:文件的后缀名必须保持为.submile-snippet格式

最后一步:打开sublime存放snippet文件夹。打开方式是:打开 Preferences>Browse Package,在打开的文件夹中,打开 User文件夹,然后把代码片段放进里面去,完事。

测试:打开一个空白的html文件,输入:html:mobile + tab键    =》 就会出现自定义的代码片段了


0 0
原创粉丝点击