首页 > 代码库 > Sublime

Sublime

  把自己比作剑客,那么Sublime对于我来说,就是一把锋利的宝剑!关于软件本身我就不多做介绍了,有兴趣请百度,高端看客请百度谷歌,然后谷歌Sublime(— —!若你侥幸没撞死在“长城墙”上,访问成功了的话)。废话不多说,请听下文:

  (PS:Sublime 3还是beta版,而且就个人感觉目前还是Sublime 2好使,所以本文的主角儿为Sublime 2)

一:界面

  看到顶部的UNREGISTERED没,未注册,不妨,Sublime的使用完全免费,只是有时候会有个概率比紫装的爆率会高那么一点点的弹框,提示你购买注册,取消就得,不用管它,若你为高富帅,点个确定很值得表扬。

  

  Preferences -> Color Scheme可以改变整体的色调风格,调一个你喜欢的。反正我是非常喜欢默认的这个花花绿绿的,挺好看。

  

  右下角可以选择当前文档的格式:

  

二:插件安装

  Sublime非常轻量,那么它强大的功能就依托于各式各样的插件,已经拥有的插件部分可以通过Preferences -> Package Settings查看。

  

  Sublime的插件安装有两种方式:

  一种是直接将插件下载解压后放到插件的Packages文件夹里,文件夹位置可以通过Preference -> Browse Packages查看;

  

  另一种就是通过线上的包管理器Package Control进行管理,这也是方便且常用的那种。   

  通过下图的选项,打开控制台(CTRL + `)输入以下代码:

  import urllib2,os;pf=‘Package Control.sublime-package‘;ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),‘wb‘).write(urllib2.urlopen(‘http://sublime.wbond.net/‘+pf.replace(‘ ‘,‘%20‘)).read())

  

  回车,重启Sublime Text 2,你就会发现多了一个Package Control。

  

  打开之后点击Install Package或上下键选择然后回车(或者 CTRL + SHIFT + P,输入 install package,回车),

  

  左下角会有一个状态,Loading repositories,之后界面上会弹出插件列表,然后选择你需要的插件即可,当然这一切的前提是你的电脑是在联网状态。

   

  方向键选择回车确定或者直接鼠标点击,就会进入安装状态,同样左下角也会出现[=]的符号,安装成功后,有的插件能直接用,但保险起见关闭Sublime然后重新打开就OK了。

三、插件推荐 

  1.Emmet

  此插件的前身叫做Zen Coding。用了Sublime而没装Emmet的话,就好比你的绝世好剑,没有开锋,此言毫不夸张!

  下面一段代码可以让你领略到Emmet的强大之处:

1 div.main>ul.nav>li#li${标题$}*3

   然后Tab,代码就会变为

1 <div class=‘main‘>2     <ul class=‘nav‘>3         <li id=‘li1‘>标题1</li>4         <li id=‘li2‘>标题2</li>5         <li id=‘li3‘>标题3</li>6     </ul>7 </div>

  在此,本文对Emmet做详细的使用说明了,因为网络里有更好的,请移驾 http://www.iteye.com/news/27580 ,这里简单明了,清楚详尽,绝对让您食欲大开。

  2.jQuery

  此jQuery插件可以让已经将jQuery代替JS的同学在使用jQuery编写代码时得心应手。此插件无他,就是代码提示以及自动补全。不信,安装之后,输入‘aj‘,然后Tab试试。平常要到其它地方复制的老长的ajax代码是不是一下就蹦出来了。

$.ajax({    url: ‘/path/to/file‘,    type: ‘default GET (Other values: POST)‘,    dataType: ‘default: Intelligent Guess (Other values: xml, json, script, or html)‘,    data: {        param1: ‘value1‘    },}).done(function() {    console.log("success");}).fail(function() {    console.log("error");}).always(function() {    console.log("complete");});

  什么,没用的信息多,还要删除?有这种需求的同学请移驾本篇第四大标题,自定义让你完美。

  3.HTML/CSS/JS Prettify

  这个插件是用来来格式化代码的,但依赖于Node.js,所以要使用本插件的同学一定要记得先安装Node.js。默认格式化快捷键CTRL + SHITF + H,也可以到Preferences -> Package Settings找到本插件然后到设置快捷键里修改。

  如果在使用快捷键时,提示“Node.js was not found in the default path..”云云,请一:确保点击确定之后弹出的文档里的node_path的路径设置正确,二:确保你的html或css或js文件所在的目录以及上层目录中没有中文,三:没有三!

  4.TortoiseSVN

  SVN,想必合作完成项目的同学少不了吧。这个插件就可以将SVN的提交、更新等常用功能集成在Sublime里,便宜实惠。默认提交快捷键Alt + C,更新快捷键Alt + U,也可以在左侧Side Bar里右键文件夹或文件进行操作,同样快捷键也可以在Preferences -> Package Settings里修改。

  5.ConvertToUTF8

  对于一个人来说,看你看不懂的语言文字,是没有感觉或是很头疼的。但当你打开一份代码,发现里边的汉字是乱码的,你就不仅仅是头疼了,还会连带的让你产生看不懂代码的错觉,相当痛苦。这时,本插件就起大作用了,他可以让其它编码的文档以UTF8的格式在Sublime里打开,并且在保存时还是原来的编码。Sublime到是自带的有Reload with Encoding..功能,但是貌似不太好使。

  6.IMESupport

  如果Sublime中的中文输入法的输入框的位置困扰到你的话,装了它就没事了。

四、自定义Sublime

  诚然,Sublime漂亮,强大,甚至有些人第一眼就会爱上它(我就是)。但是对其来个“私人定制”,就会从好使变得完美。

  1.快捷键定制,主题定制,View里边的Hide Or Show定制,略...

  2.插件定制

  (1)Emmet定制

  依次点击Preferences -> Browse Packages...,在众多的插件文件夹里找到Emmet,进去,里边有个Emmet.sublime-settings,真奇怪,我们发现这个文件没有后缀名,管他吶,打开它,把滚动条拉倒最下面,然后你会看大一个配置参数“syntaxProfiles”,把里边的“html”的值改为“xhtml”,然后再在逗号后加上“html”:{“attr_quotes”:“single”},示例如下:

1 "syntaxProfiles": {2     "html": "xhtml",3     "html": {4         "attr_quotes": "single"5     }6 }

  这样做可以解决两个问题,其一:Emmet自动产生的HTML单标签是不闭合的问题(例如input、img等是没有闭合的"/"的),其二:Emmet自动产生的HTML标签里的属性的值用的是双引号的问题(这个看个人习惯,我是比较喜欢用单引号); 

  (2)jQuery定制

  同样在打开的Packages文件夹里找到jQuery,里边都是一些自动生成的代码的模板,以ajax.sublime-snippet为例:

 1 <snippet> 2     <content><![CDATA[\$.ajax({ 3     url: ‘${1:/path/to/file}‘, 4     ${2:type: ‘${3:default GET (Other values: POST)}‘,} 5     ${4:dataType: ‘${5:default: Intelligent Guess (Other values: xml, json, script, or html)}‘,} 6     ${6:data: {param1: ‘value1‘\},} 7 }) 8 ${7:.done(function() { 9     console.log("success");10 \})}11 ${8:.fail(function() {12     console.log("error");13 \})}14 ${9:.always(function() {15     console.log("complete");16 \})};17 $0]]></content>18     <tabTrigger>ajax</tabTrigger>19     <description>$.ajax()</description>20     <scope>source.js</scope>21 </snippet>

  跟之前‘aj‘回车产生的代码比较一下,删掉自己不想要的:

 1 <snippet> 2     <content><![CDATA[\$.ajax({ 3     url: ‘${1:/path/to/file}‘, 4     ${2:type: ‘${3:GET}‘,} 5     ${4:dataType: ‘${5:json}‘,} 6     ${6:data: {param1: ‘value1‘\},} 7 })${7:.done(function(data) { 8     console.log("success"); 9 \})}${8:.fail(function() {10     console.log("error");11 \})};12 $0]]></content>13     <tabTrigger>ajax</tabTrigger>14     <description>$.ajax()</description>15     <scope>source.js</scope>16 </snippet>

  修改保存,回到代码页,‘aj‘回车:

$.ajax({    url: ‘/path/to/file‘,    type: ‘GET‘,    dataType: ‘json‘,    data: {param1: ‘value1‘},}).done(function(data) {    console.log("success");}).fail(function() {    console.log("error");});

  (3)Javascript以及其它的让你看着不顺眼的插件里的代码模板都可以这样改,如果你要问我这些模板里的代码什么意思,Sorry,I don‘t know。

五、好使的操作

  1.快捷键

  CTRL + R:查找关键字

  CTRL + G:跳到相应行

  CTRL + T:交换选中的内容(CTRL,选中内容,CTRL不松,选中另外的内容)

  CTRL + C:复制光标所在行

  CTRL + X:剪切光标所在行

  CTRL + SHIFT + K:删除光标所在行

  CTRL + P:查找文件(文件或包含文件的项目文件夹已拖入右侧的Side bar中)

  2.批量查找替换

  右侧Side Bar中文件夹右键,Find in Folder...,Find批量查找,Replace批量替换。

  3.标签栏(Tabs)操作

  双击标签栏空地:产生新的空白文档

  点击标签栏拖动:拖动标签栏

  4.格式化JSON

  双击标签栏空地,把乱数据贴进去,右下角Plain Text -> Javascript -> JSON,然后CTRL + SHIFT + H(前提是已经装了上面提到的格式化的工具)

  5.多栏

  View -> Layout

六、不足

  我没有找到自动补全插入文件路径的插件,引入js、css、图片等的路径都得手敲,望哪位神通广大的知晓此种插件的同学予以告知,Over。 

Sublime