关于sublime text这个编辑器,大家多少也有所耳闻了,甚至正在使用,而我从editplus转向sublime text已经有一段时间了,经过一段时间学习与使用,也有点个人的心得,下面跟大家分享下常用的一些插件。
1、插件的安装方法
第一种:用package control
这个是用来管理插件的,必备啊,安装package control的步骤:
- 按Ctrl+`调出console
- 在底部代码行贴上以下代码并回车:
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,如果在Perferences->package settings中看到package control这一项,则安装成功。如果不成功,那就只好自己手动安装喽:http://wbond.net/sublime_packages/package_control/installation
package control安装完之后,以后我们要安装插件直接Ctrl+Shift+P调出命令面板,输入install package这个命令,然后输入我们需要安装的插件回车或者在下面的列表中选择就ok了,一般安装完毕都会自动打开该插件的readme文档。
第二种:手动安装,如果上面的那个能搞定,这个手动的不了解也罢哈哈
在菜单栏中找到 preferences > packages,点击打开就是sublime text插件的地址了,把你下载的插件直接丢进来就ok了(以后你要是忘了哪个插件的快捷键,也可以这样找到你的那个插件文件包,阅读下readme)
2、常用插件
以下所有插件,都是通过package control来安装的,Ctrl+Shift+P调出命令面板,输入install package命令,你就可以看到sublime text的所有插件了,另外如果要卸载一个插件的命令是remove package。强烈建议大家安装完每个插件后都看下它readme,那里面有使用方法。所有的插件文件夹都可以通过菜单栏的Preferences》Browse packages找到,如果你忘记了某个插件的使用方法,也可以从这里进去找到该插件的readme看看
Emmet
Emmet作为zen coding的升级版,对于前端来说,可是必备插件,如果你对它还不太熟悉,可以在其官网(http://docs.emmet.io/)上看下具体的视频教程。当然在sublime text中emmet的快捷键有些改变,按tab或ctrl+e都可以扩展,具体的其他快捷键改变请参看emmet sublime
另:安装emmet升级版本之后,会弹出一个package control message里面有一些它升级的信息,建议大家读下。里面有一条说是升级后tab键太强大了,把自定义的一些代码片段都给覆盖了,所以如果你自定义了一些自己的代码片段,你就得处理下了。原文如下“By default, Emmet allows you to expand abbreviations with Tab key in HTML, XML, HAML and CSS/SASS/LESS/Stylus documents. As a side effect, you can’t use some of your ST2 snippets.”。我目前的处理方法是在Emmet.sublime-settings文件中直接禁用了tab键,设置disable_completions为true。关于emmet的第二点经验就是如何更改emmet里面的代码,在emmet插件里面找到snippets.json这个文件,打开看看,找到你想修改的,如"d:ib": "display:inline-block;"这条我们把后面修改成"display:inline-block;*display:inline;*zoom:1;"
liveReload
顾名思义,就是自动更新,而不需要我们编辑一次就手动刷新一下。
安装好liveReload插件之后,就是给浏览器安装相应的插件了,在readme中可以找到谷歌和火狐的插件地址分别为:Google Chrome extensionFirefox 4 extension
yui compressor
yui压缩,可以压缩js和css文件,运行于java环境,安装之后,同样可以参考readme文件,就知道它是怎么用的了
Search in Browser
这个就是直接在编辑器中直接快捷键“ctrl+alt+g”,打开谷歌搜索,当然还有其他的,可以参考readme文件,同样还有一个插件stackoverflow search,可以直接在stackoverflow里面搜索你的问题。
nettuts fetch
这个插件能让你快速的取得远程文件或文件夹,而不用再去翻找。使用方法很简单,总共有三个命令,分别是fetch:file,fetch:manage和fetch:package如下图:
先使用fetch:magnage管理我们以后需要获取的文件或文件夹,如下图:
最后我们就可以使用fetch:file获取文件,fetch:package获取文件夹
详细教程:nettuts fetch使用教程
代码版本控制等
TortoiseSVN
git
gist(线上代码片段)
格式化代码
cssFormat
jsFormat
Tag(可以格式化html,有注释的时候表现不是很理想)
其他插件
bracket highlighter(括弧高亮显示)
Goto-CSS-Declaration(跳转到css文件该class的声明处,注意对应的css文件要同时打开才行)
jquery package,scss(支持scss的语法高亮)
Clipboard History(剪切板历史,可以保存多个复制信息,按下ctrl+alt+v,可以选择历史剪切板)
3、不建议再用的插件
prefixr(css3前缀)
placeholders(填充一些文本内容)。
之所以不建议使用上面两个是因为用emmet就可以解决了,所以说emmet是多么的强大啊