用Snippets创建自己喜欢的注释格式

事出有因

是这样的，我觉得Sublime Text 3对CSS和JS的注释太简陋了，于是想自己修改下默认设置，没发现哪里能改，然后发现了Snippets这个神器，历经曲曲折折曲曲后顺利解决了问题。（Snippets官方介绍点我）

Snippets能作甚？

功能：输入定义过的字符串，再摁Tab，字符串会变成与它对应的内容（类似于你用Ctrl+V实现粘贴这个过程）

举栗：我设置了一个字符串name，它对应的内容设为xxxHolic，于是我在Sublime Text 3里想输入xxxHolic时，我可以输入name然后摁Tab来搞定。

比如某段代码你经常使用，那你可以给它想个名字，用Snippets设置下，你就可以直接按名字来快捷输出这段代码。

Snippets怎么上手？

新建： 菜单栏Tools → Developer → New Snippet...

新建的文件会显示如下代码。保存文件的时候后缀名务必为.sublime-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>

1.<content>

在CDATA[]中插入你想方便输出的大段内容。

光标默认出现在内容末尾。也可以设置光标初始位置以及占位符。$1表示光标首次出现的位置，$2就表示你摁Tab后光标跳到的位置，依次还可设置$3，$4等等。要设置占位符的话，要这样，${1:占位符内容}，同理可设置${2:占位符内容}等。$0表示最后光标跳的位置，默认是内容末尾，你也可以修改。

允许有两个或多个$1，$2等，这样就有两个或多个光标，你可以在不同的位置同时输入同样的内容。

允许使用已有的变量或者自己新建变量。比如$TM_FILENAME表示当前文件名（带后缀）。（点这里看更多）

高级玩法是Substitutions，用到了正则表达式，看着很高级，我还不会玩，sign...

2.<tabTrigger>

<tabTrigger></tabTrigger>中间插入你为内容设置的字符串就行了。

3.<scope>

<scope></scope>中间填你希望指令生效的文件。text.html指HTML文件，source.css指CSS文件，source.js指JS文件。多个文件的话用逗号分开。

可以不要这项，则所有地方指令都有效。

4.<description>

其实还有<description></description>这项的，可不设置，默认值是你保存的文件名字。当你输入进行触发的字符串的前几个字母后，如果有代码提示，会在右侧显示<description></description>中的内容。

5.举栗举栗

<snippet>
     <content>
<![CDATA[
----------------------------
CONTACT ME
----------------------------
Name: ${1:my name}
Tel: ${2:123456}
WeChat: ${2:123456}
Address: ${4:my address}
----------------------------
]]>
     </content>
     <tabTrigger>con</tabTrigger>
     <description>contact-me</description>
     <scope>text.html,source.js,source.css</scope>
</snippet>

做了个动图来展示哈哈。（图片怎么调大小啊...怎么都没试出来...+_+）
图片描述

发现了吗，我输入c，就会有代码提示，左边是字符串全名con，右边是描述contact-me，然后我直接按Enter就行了，并不需要输全字符串后按Tab。不过这只在JS文件中有效。因为啊，在HTML中代码提示总要现有<，在CCS中需要先有{。多输入一个符号也无所谓啦，但是每次多输的符号还是要删掉，好麻烦的，还是解决掉好了。

在HTML中开启代码提示

解决方法：菜单栏Preferences→ Settings。在弹出的Preferences.sublime-settings — User 文件中加入下面的代码就好了。

"auto_complete_triggers":
[
  {
    "characters": "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.<",
    "selector": "text.html"
  }
],

而默认的是设置是下面这样的。对比下进行意会，正则我知其然不知其所以然，待填坑。

"auto_complete_triggers": [ {"selector": "text.html", "characters": "<"} ],

在CSS中开启代码提示

去掉CSS只有输入{才能代码提示这个规则麻烦点。因为对HTML的设置对CSS无效-.-，我想了想，肯定是别的啥地方给设了规则。

网上浪啊浪，发现了解决方案。你要修改一个文件，在你安装Sublime Text 3的文件夹里有个Packages，里面有个CSS.sublime-package，这货是个压缩文件，你需要修改里面Completion Rules.tmPreferences这个文件里的<string>.*</string>，把.*去掉就OK了。

然鹅直接在快压里面修改改不了，用快压解压了是可以改，但是我无法再把文件压缩成.sublime-package这种类型的压缩文件。

于是我又继续在网上浪啊浪。

恩，发现装个插件就可以修改了，就是它 → PackageResourceViewer。

如果你还没装过插件，你需要先装一个Package Control，用来管理插件的好像，菜单栏Tools→ Command Palette...，输入install，选择Install Package Control,它会自动安装，装好了会弹窗告诉你。如果软件提示你没安装成功，让你去网站手动安装，然后那个网页又怎么都打不开，那可能是你网络问题。我在学校图书馆怎么都装不好，回家就好了。你只是需要换个网络-.-

然后我们安装PackageResourceViewer这个插件。还是菜单栏Tools→ Command Palette...，输入install，选择Package Control: Install Package，然后输入packagereso，选择PackageResourceViewer，OK，软件页面底部会显示正在安装，静静等它装好。

装好后，还是打开命令行，输入packagere，选择PackageResourceViewer: Open Resource，再选择CSS，再选择Completion Rules.tmPreferences，好了，这个文件打开了，我们把里面的<string>.*</string>注释掉，然后加上<string></string>就好了。（也就是去掉.*）。

这时候在CSS里面你可以直接输入首字母根据代码提示选择Snippets了。

恩，浑身舒畅。

用Completions管理Snippets

噢，还有一个问题，Snippets是一个文件只能写一个，所以如果你需要很多Snippets的话，文件多了管理起来会很麻烦。这时候我们用Completions来解决这个问题。（点我看官方介绍）

直接看我写的一个栗子吧。记住保存文件时后缀名为.sublime-completions。

{
  "scope": "source.js",
  "completions":
  [
    { "trigger": "q\tnote", "contents": "//---- ${1} ------" },
    { "trigger": "con\tcontact-me", "contents": "----------------------------\nCONTACT ME\n----------------------------\nName: ${1:my name}\nTel: ${2:123456}\nWeChat: ${2:123456}\nAddress: ${4:my address}\n----------------------------\n" },
  ]
}

在"completions"里可添加多对"trigger"与 "contents"。"trigger"中 \t 之前是触发的字符串，之后是描述；可省略 \t 与描述。

"contents"好像只能把代码写在一行，不能换行，痛苦，不方便排版，还没找到解决办法。有知道怎么整的交流下啊，感激.jpg