Sublime Text 3-snippet菜鸟教程（动态图演示

2016-09-03 本文已影响586人小东十七

介绍

经常在码代码的时候，为了减少代码的输入，会创建代码的片段，在需要的时候直接呼出即可。这种方法往往能够提高我们的效率，同时也大大降低我们代码的出错几率！在 Sublime Text 中，就提供了创建代码片段的功能，接下来我们就来看看如何自定义 snippet 。

1、创建片段-Snippet

在 Sublime Text 3 中，点击 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>

位于 CDATA[] 中的内容就是你需要替换的内容，本例中我们将其替换为 Welcome to Tom's blog. ；
`` 是激活 snippet 的 trigger，本例中我们取消注释后将其改成 <tabTrigger>welcome</tabTrigger> ；
`` 激活的环境（具体参考附录的列表），默认是在python语言下激活，本例中我们将其改成 <scope>source.js</scope>；

修改后的 snippet 就是这样了：

<snippet>
    <content><![CDATA[
Welcome to Tom's blog.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>welcome</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.js</scope>
</snippet>

这样就算完成了一个简单的 snippet 的定义，取个名字保存到 Sublime Text 3\Packages\User\MySnippets 下， MySnippets 是自己建的，便于管理自定义的 snippet 。保存文件的后缀名必须是 .sublime-snippet ，本例中我们保存的是 welcome.sublime-snippet 。
因为我们定义的 scope 是 source.js ，所以要在 JavaScript 文件中才能执行。

演示：

demo1.gif

2、创建占位符-Placeholders

接下来有个问题了，我不想每次都输出 Welcome to Tom's blog. ，我想每次由我自定义名字，那好，看见模板替换内容里面的 ${1:this} 了吧，这就是占位符。基本格式是 $ ，自动补全之后光标会出现在该位置处。 1 是序号，表示光标第一次出现的地方， this 是默认占位值，本例中我们将其修改为 ${1:Name} ，并将内容修改为 Welcome to ${1:Name}'s blog. 修改后的内容就是这样了：

<snippet>
    <content><![CDATA[
Welcome to ${1:Name}'s blog.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>welcome</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.js</scope>
</snippet>

演示：

demo2.gif

如果有多个占位符，用 tab 键进行切换，回切用 shift+tab 。

<snippet>
    <content><![CDATA[
Welcome to ${1:Name}'s blog.
I'm ${2:Age} years old.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>welcome</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.js</scope>
</snippet>

演示：

demo3.gif

如果有多个序号一样的占位符，光标会同时出现在多个地方。

<snippet>
    <content><![CDATA[
Welcome to ${1:Name}'s blog.
My name is ${1:Name}.
I'm ${2:Age} years old.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>welcome</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.js</scope>
</snippet>

演示：

demo4.gif

其实还有叫 Fields 和 Mirrored Fields 的两个概念，只是将 Placeholders 中的 ${1:this} 换成了 $1 ，个人觉得有个占位值会让人更容易明白需要输入的内容，所以就不介绍了，可以参考文档 Sublime Text Documentation for Snippets #Filds

3、一个文件下创建片段-Completions

上述方式可以建立 snippet ，但是如果建立的 snippet 比较多，修改起来就稍微有些麻烦，那么你可以试试用一个文件来创建这些 snippet。
我们要用的技术就是 Sublime 的 Completions ，首先新建一个文件，后缀为 .sublime-completions ,本例中我们命名为 welcome.sublime-completions ，也放在 MySnippets 文件夹下，基本格式是这样的：

{
    "scope": "source.js",

    "completions":
    [
      { "trigger": "welcome", "contents": "Welcome to ${1:Name}'s blog."},
    ]
}

scope和 trigger 与之前讲的一样，只是格式不同;
contents 后面跟的和之前 CDATA[] 里的内容一样。

我创建的一个Completions文件:

{
    "scope": "source.js",

    "completions":
    [
      { "trigger": "mdh1", "contents": "# ${1:Heading1} #\n${2:Next Line}"},
      { "trigger": "mdh2", "contents": "## ${1:Heading2} ##\n${2:Next Line}"},
      { "trigger": "mdh3", "contents": "### ${1:Heading3} ###\n${2:Next Line}"},
      { "trigger": "mdh4", "contents": "#### ${1:Heading4} ####\n${2:Next Line}"},
      { "trigger": "mdh5", "contents": "##### ${1:Heading5} #####\n${2:Next Line}"},
      { "trigger": "mdh6", "contents": "###### ${1:Heading6} ######\n${2:Next Line}"},
      { "trigger": "mdb", "contents": "**${1:Bold Text}**${2:}"},
      { "trigger": "mdi", "contents": "*${1:Italic Text}*${2:}"},
      { "trigger": "mdbq", "contents": "> ${1:Blockquote Text}\n\n${2:Next Line}"},
      { "trigger": "mdhr", "contents": "***\n${1:Next Line}"},
      { "trigger": "mdic", "contents": "`${1:Code}`"},
      { "trigger": "mdbc", "contents": "```\n${1:Code}\n```\n${2:Next Line}"},
      { "trigger": "mda", "contents": "[${1:Website}](http://${2:URL})"},
      { "trigger": "mdimg", "contents": "![${1:Alternate Text}](http://${2:URL})"},
      { "trigger": "mdol", "contents": "1. ${1:Ordered List}"},
      { "trigger": "mdul", "contents": "- ${1:Unordered List}"},
    ]
}

注意：

这是 JSON 格式的文件，键值都要在 "" 内，

每行的 , 不能少

为了统一格式，换行我用的 \n 转义字符。

附录-scope

ActionScript: source.actionscript.2
AppleScript: source.applescript
ASP: source.asp
Batch FIle: source.dosbatch
C#: source.cs
C++: source.c++
Clojure: source.clojure
CoffeeScript: source.coffee
CSS: source.css
D: source.d
Diff: source.diff
Erlang: source.erlang
Go: source.go
GraphViz: source.dot
Groovy: source.groovy
Haskell: source.haskell
HTML: text.html(.basic)
JSP: text.html.jsp
Java: source.java
Java Properties: source.java-props
Java Doc: text.html.javadoc
JSON: source.json
JavaScript: source.js
BibTex: source.bibtex
Latex Log: text.log.latex
Latex Memoir: text.tex.latex.memoir
Latex: text.tex.latex
LESS: source.css.less
TeX: text.tex
Lisp: source.lisp
Lua: source.lua
MakeFile: source.makefile
Markdown: text.html.markdown
Multi Markdown: text.html.markdown.multimarkdown
Matlab: source.matlab
Objective-C: source.objc
Objective-C++: source.objc++
OCaml campl4: source.camlp4.ocaml
OCaml: source.ocaml
OCamllex: source.ocamllex
Perl: source.perl
PHP: source.php
Regular Expression(python): source.regexp.python
Python: source.python
R Console: source.r-console
R: source.r
Ruby on Rails: source.ruby.rails
Ruby HAML: text.haml
SQL(Ruby): source.sql.ruby
Regular Expression: source.regexp
RestructuredText: text.restructuredtext
Ruby: source.ruby
SASS: source.sass
Scala: source.scala
Shell Script: source.shell
SQL: source.sql
Stylus: source.stylus
TCL: source.tcl
HTML(TCL): text.html.tcl
Plain text: text.plain
Textile: text.html.textile
XML: text.xml
XSL: text.xml.xsl
YAML: source.yaml

还有未涉及的概念没有介绍，可以参考 Sublime Text Documentation for Snippets

Sublime Text 3-snippet菜鸟教程（动态图演示

介绍

1、创建片段-Snippet

2、创建占位符-Placeholders

3、一个文件下创建片段-Completions

附录-scope

猜你喜欢

热点阅读