作为一个开发者你不可能没听说过SublimeText。不过你没听说过也没关系,下面让你明白。 SublimeText是一款非常精巧的文本编辑器,适合编写代码、做笔记、写文章。它用户界面十分整洁,功能非同凡响,性能快得出奇。这些非常棒的特性 包括任意跳转(Goto Anything)、多重选择(multiple selections)、指令面板(command palette)、免打扰模式(distraction free mode)、分区编辑(split editing)、快速项目切换(instant project switch),你还可以随意地自定义更多功能。还有,这款编辑器支持Mac、Windows和Linux平台。但这些并不是本文所要讨论的内容。
SublimeText本身已经非常强大,但是更棒的是有一长串的插件支持它,给它带来更强大的功能,这就是本文要讨论的内容。不多废话,让我们看 看常用的SublimeText插件。如果你已经在使用他们,请告诉我们,并告诉我们你认为其中那款最出色。像往常一样,你的意见也很重要。
Package control 插件管理
通俗易懂地说,这个是你在完成安装SublimeText后必须安装的东西。你问为什么?因为有了这个特殊的“插件包”,你可以很容易地安装、升 级、删除,甚至非常方便地查看您已经安装在SublimeText中的包或插件的列表。它通过菜单和对应的行为使这些过程变得非常容易和有组织。
简单的安装方法:
从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console。将以下 Python 代码粘贴进去并 enter 执行,不出意外即完成安装。以下提供 ST3 和 ST2 的安装代码:
Sublime Text 3:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
Sublime Text 2:
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
手动安装:
可能由于各种原因,无法使用代码安装,那可以通过以下步骤手动安装Package Control:
1.点击Preferences > Browse Packages菜单
2.进入打开的目录的上层目录,然后再进入Installed Packages/目录
3.下载 Package Control.sublime-package 并复制到Installed Packages/目录
4.重启Sublime Text。
Package Control 主文件下载地址:Package Control
Emmet html/CSS快速编辑(原名Zen Coding)
Zen Coding估计大家都不会陌生,前不久改名为Emmet了,虽然用Emmet编辑html很快,但是要用好用快它需要付出不小的学习成本,学习的曲线有点陡峭,以至于让新手好奇而畏惧,我看看热闹就行了,感觉编辑得再快思维跟不上也是白搭,对我来说sublime text 3自带的代码提示够用了。
具体使用技巧教程(全):Cheat Sheet
插件下载:Emmet
FTPSync 具备FTP的功能
默认情况下SublimeText不具备FTP的功能,如果你正在寻找能在您的SublimeText应用程序中使用的免费和易用的FTP工具,你可以考虑FTPSync。这是一个非常简单的FTP同步工具,它可以控制上传目标的多重命名。让我们知道您的想法。
![这里写图片描述](http://cache.cnsecer.com/wp-content/uploads/2014/03/128467fc4715b8169a672877bca8e320.gif?watermark/1/image/aHR0cDovL2NhY2hlLmNuc2VjZXIuY29tL2ltYWdlcy93YXRlci5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10)
具体使用方法: 连接FTP, 安装及使用 FTPSync 图文步驟
BracketHighlighter 高亮显示匹配的括号、引号和标签
BracketHighlighter这个插件能在左侧高亮显示匹配的括号、引号和标签,能匹配的 [] , () , {} , “” , ” , 等甚至是自定义的标签,当看到密密麻麻的代码分不清标签之间包容嵌套的关系时,这款插件就能很好地帮你理清楚代码结构,快速定位括号,引号和标签内的范围。
插件下载:BracketHighlighter
TrailingSpacer 高亮显示多余的空格和Tab
有时候在代码结尾打多了几个空格或Tab,一般不会察觉,TrailingSpacer这款插件能高亮显示多余的空格和Tab,并可以一键删除它们,有代码洁癖的朋友应该会喜欢这个插件。
![这里写图片描述](http://image.dengo.org/image/2013/07/sublimeplug2.jpg)
插件下载: TrailingSpacer
注意,在github上下载的插件缺少了一个设置快捷键的文件,可以新建一个名字和后缀为Default (Windows).sublime-keymap的文件,添加以下代码,即可设置“删除多余空格”和“是否开启TrailingSpacer ”的快捷键了。
[
{ "keys": ["ctrl+alt+d"], "command": "delete_trailing_spaces" },
{ "keys": ["ctrl+alt+o"], "command": "toggle_trailing_spaces" }
]
Sublime Prefixr私有前缀自动补全
Prefixr,CSS3 私有前缀自动补全插件,显然也很有用哇
![这里写图片描述](http://www.qianduan.net/wp-content/uploads/2012/02/pr.png)
插件下载: Sublime Prefixr
Alignment 等号对齐
按Ctrl+Alt+A,可以将凌乱的代码以等号为准左右对其,适合有代码洁癖的朋友。
![这里写图片描述](http://image.dengo.org/image/2013/07/sublimeplug4.gif)
插件下载: Alignment
Clipboard-history 粘贴板历史记录
有了这个插件,便可方便使用sublime text 3里的粘贴板历史记录内容,快捷键Ctrl+Shift+V可调出该历史记录面板,按方向键选择想要粘贴的历史记录。不过这是sublime text 2下的插件,Ctrl+Shift+D清除粘贴板历史记录好像不能生效,不过重启sublime也可清除粘贴板的历史记录。
使用:
Ctrl+alt+v:显示历史记录
Ctrl+alt+d:清空历史记录
Ctrl+shift+v:粘贴上一条记录(最旧)
Ctrl+shift+alt+v:粘贴下一条记录(最新)
插件下载:Clipboard-history
SideBarEnhancements 侧边栏增强
SideBarEnhancements本是增强侧边栏的插件,这里将教大家如何用来做sublime text 3浏览器预览插件,并可自定义浏览器预览的快捷键。
![这里写图片描述](http://image.dengo.org/image/2013/07/sublimeplug5.gif)
安装此插件,点击工具栏的preferences > package setting > side bar > Key Building-User,键入以下代码,这里设置按Ctrl+Shift+C复制文件路径,按F1~F5分别在firefox,chrome,IE,safari,opera浏览器预览效果,当然你也可以自己定义喜欢的快捷键,最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。
[
{ "keys": ["ctrl+shift+c"], "command": "copy_path" },
//firefox
{ "keys": ["f1"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\software\\Browser\\Mozilla Firefox\\firefox.exe",
"extensions":".*" //匹配任何文件类型
}
},
//chrome
{ "keys": ["f2"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Users\\Mr.DenGo\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
"extensions":".*"
}
},
//ie
{ "keys": ["f3"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
"extensions":".*"
}
},
//safari
{ "keys": ["f4"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\software\\Browser\\Safari\\safari.exe",
"extensions":".*"
}
},
//opera
{ "keys": ["f5"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\software\\Browser\\opera\\opera.exe",
"extensions":".*"
}
}
]
ColorPicker 调色盘
在编辑CSS样式的时候,要加个自己喜欢颜色或改改颜色啥的,要到PS里去调色?ColorPicker可以让sublime text 3内置一个调色盘,调好颜色,点击OK就会在光标处生成十六进制颜色代码。
使用快捷键:ctrl+shift+c就可以调用凋色盘了。
![这里写图片描述](http://image.dengo.org/image/2013/07/sublimeplug6.png)
插件下载: ColorPicker
注意:convertToUTF8和ColorPicker快捷键会产生冲突,convertoUTF8的默认转换GBK的快捷键 和 ColorPicker打开调色板的快捷键都是ctrl+shift+c 。如果你两个插件都安装了的话,就需要进行自定义了,例如:
解决方法:打开Sublime Text –> Preferences –> Browse Packages,找到ConvertToUTF8文件夹并进入,找到对应操作系统的Default.sublime-keymap文件,直接修改成 如下就行!
[
{ "keys": ["ctrl+shift++alt+c"], "command": "convert_to_utf8", "args": {"encoding": "GBK", "stamp": "0" } }
]
Hex-to-HSL-Color Hex颜色模式转HSL颜色模式
在用CSS3的一些属性时会用到HSL颜色模式,用软件转来转去确实麻烦,用Hex-to-HSL-Color这个插件便可轻松解决,鼠标选中一个或多个十六进制颜色代码,按下Shift+Ctrl+U立马转换为HSL颜色模式。
![这里写图片描述](http://img2.tuicool.com/vUFR7f.jpg)
CSS Compact Expand CSS属性展开收缩
每个人写CSS都有不同的风格,有些人喜欢写成一行,有些人喜欢写成多行,各有各的好处,我倒喜欢将CSS写成一行,这样能减少CSS文件大小,且屏幕能显示更多的Class方便查找。如果阅读别人的代码不符合自己的习惯,可以用CSS Compact Expand这个插件将CSS格式化一下,按 Ctrl+Alt+[ 收缩CSS代码为一行显示,按 Ctrl+Alt+] 展开CSS代码为多行显示。
![这里写图片描述](http://image.dengo.org/image/2013/07/sublimeplug9.jpg)
插件下载: CSS Compact Expand
JsFormat javascript格式化
功能:Javascript的代码格式化插件
简介:很多网站的JS代码都进行了压缩,一行式的甚至混淆压缩,这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理,包括换行和缩进等等,是代码一目了然,更快读懂~
使用:在已压缩的JS文件中,右键选择jsFormat或者使用默认快捷键(Ctrl+Alt+F)
插件下载:JsFormat javascript
javascript-API-Completions
支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件,是少数支持sublime text 3的后缀提示的插件,HTML5标签提示sublime text 3自带,不过JQuery提示还是很有用处的,也可设置要提示的语言。
![这里写图片描述](http://image.dengo.org/image/2013/07/sublimeplug12.gif)
插件下载: javascript-API-Completions
jQ函数提示
功能:jQ函数提示
简介:快捷输入jQ函数,是偷懒的好方法
插件下载:jQuery
DocBlockr
功能:生成优美注释
简介:标准的注释,包括函数名、参数、返回值等,并以多行显示,手动写比较麻烦
使用:输入/、/*然后回车
插件下载:DocBlockr
SublimeTmpl 快速生成文件模板
一直都很奇怪为什么sublime text 3没有新建文件模板的功能,像html头部的DTD声明每次都要复制粘贴。用SublimeTmpl这款插件终于可以解脱了,SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板,所有的文件模板都在插件目录的templates文件夹里,可以自定义编辑文件模板。
SublimeTmpl默认的快捷键
ctrl+alt+h html
ctrl+alt+j javascript
ctrl+alt+c css
ctrl+alt+p php
ctrl+alt+r ruby
ctrl+alt+shift+p python
快捷键在这里\Packages\SublimeTmpl\Default (Windows).sublime-keymap, 模板文件在这里\Packages\SublimeTmpl\templates,可修改。
如果想要新建其他类型的文件模板的话,先自定义文件模板方在templates文件夹里,再分别打开Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型,这里就详细介绍了,请各位自己折腾哈~
插件下载:SublimeTmpl
sublimeLinter 代码错误提示
好话写在前面:sublimeLinter是少数几个能在sublime text 3工作的代码检查插件,sublimeLinter能检查html、css、javascript、php等众多语言的错误代码并给出提示,前提是需要配置相应语言的环境,要检查js代码需要安装node.js,检查php代码需要安装php并配置环境等,用这个插件能及时帮我们纠正代码的错误,并培养我们良好的编码习惯和风格。
丑话说在后面:对这货“强制性”的代码风格检查有点不爽,有意义无意义的代码提示经常打乱我敲代码的节奏,并且在后台运行检查机制造成sublime text 3有点小卡顿,虽然部分问题可以设置sublimeLinter来解决,用了sublimeLinter一小段时间后还是放弃了,觉得代码提示对我应该没必要了。
插件下载:sublimeLinter
SASS Build
SASS Build 是一个编写CSS的预处理器。这个特别的插件将帮助你妥善构建包括压缩选项在内的SASS文件。一旦你安装了这个插件,你可以很容易地通过按Ctrl+ B(MAC系统是 Command +B)来启动它。
LESS高亮插件
简介:用LESS的同学都知道,sublime没有支持less的语法高亮,所以这个插件可以帮上我们
使用:打开.less文件或者设置为less格式
插件下载:LESS
Git
在工作中,版本控制软件最常用的软件之一,而最流行的 VCS 是 Git。你是否厌倦了保存文本文件,并切换回终端运行一些 Git 命令。如果你能从文本编辑器本身执行 Git 命令,岂不是很好?
![Git](http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/07/1404716473gitsublime.png)
插件下载: Git
GitGutter
ublime Text 有了 Git 插件之后,GitGutter 更好的帮助开发者查看文件之前的改动和差异,提升开发效率。这些插件可以高亮相对于上次提交有所变动的行,换句话说是实时的diff工具。
![这里写图片描述](http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/07/1404716519Gitgutter.png)
插件下载: GitGutter
AllAutocomplete搜索所有打开的文件匹配提示词
传统的Sublime Text自动补全插件仅仅在当前文件下工作。AllAutocomplete 可以搜索全部打开的标签页,这将极大的简化开发进程。当然,还有一个插件叫 CodeIntel,实现了一些IDE的功能并且为一些语言提供了“代码情报”: JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.
![这里写图片描述](http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/07/1404716612AllAutocomplete-demo.png)
插件下载: AllAutocomplete
MarkdownPreview本地编写 Markdown 文件
虽然许多开发人员更喜欢在云端(GitHub Gists,StackEdit,Markable)创建 Markdown 文件 。不过另外一些喜欢在本地编写 Markdown 文件的开发者, MarkdownPreview 很有用,可以预览文件,还有颜色高亮显示。
![这里写图片描述](http://images.cnitblog.com/blog/36987/201411/171311441139253.png)
GBK to UTF8
功能:文件转码成utf-8
Install Package->CovertToUTF8
简介:通过本插件,您可以编辑并保存目前编码不被 Sublime Text 支持的文件,特别是中日韩用户使用的 GB2312,GBK,BIG5,EUC-KR,EUC-JP ,ANSI等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。
使用:安装插件后自动转换为utf-8格式。
插件下载:这里写链接内容
AutoFileName
功能:快捷输入文件名
简介:自动完成文件名的输入,如图片选取
使用:输入”/”即可看到相对于本项目文件夹的其他文件
Autoprefixe
功能:CSS添加私有前缀
简介:CSS还未标准化,所以要给各大浏览器一个前缀以解决兼容问题
使用:Ctrl+Shift+P,选择autoprefixer即可。需要安装node.js。
插件下载:Autoprefixe