sublime text 是我现在用过最好用的前端编辑器,没有之一。
现在已经版本已经更新到:sublime text 3
下载网址:http://www.sublimetext.com/3
要安装插件,有2种方式。
一、直接安装
可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages)
二、使用Package Control组件安装
1、安装Package Control
(1)按Ctrl+`调出console
(2)粘贴网页上的代码到底部命令行并回车(网址:https://sublime.wbond.net/installation#st2)
(3)重启Sublime Text 3
(4)如果在Perferences->package settings中看到package control这一项,则安装成功。
2、安装插件
(1)按下Ctrl+Shift+P调出命令面板
(2)输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。
插件推荐:
1、Emmet(以前也叫Zen Coding)
不同的同学可以看:《Zen Coding: 一种快速编写HTML/CSS代码的方法》
2、jQuery Package for sublime Text
使用jquery自动提示
Prefixr,CSS3 私有前缀自动补全插件,显然也很有用哇
一个JavaScript代码格式化插件,快捷键“ Ctrl+Alt+F”
一个支持lint语法的插件,可以高亮linter认为有错误的代码行,也支持高亮一些特别的注释,比如“TODO”,这样就可以被快速定位。(IntelliJ IDEA的TODO功能很赞,这个插件虽然比不上,但是也够用了吧)
故名思意,占位用,包括一些占位文字和HTML代码片段,实用。
安装好插件后,选中文本同时按住“Ctrl + Alt + A”,就可以对齐操作了
有了这个插件,便可方便使用sublime text 3里的粘贴板历史记录内容,快捷键Ctrl+Shift+V可调出该历史记录面板,按方向键选择想要粘贴的历史记录。不过这是sublime text 2下的插件,Ctrl+Shift+D清除粘贴板历史记录好像不能生效,不过重启sublime也可清除粘贴板的历史记录。
代码自动提示
类似于代码匹配,可以匹配括号,引号等符号内的范围。
11、Hex to HSL
在用CSS3的一些属性时会用到HSL颜色模式,用软件转来转去确实麻烦,用Hex-to-HSL-Color这个插件便可轻松解决,鼠标选中一个或多个十六进制颜色代码,按下Shift+Ctrl+U立马转换为HSL颜色模式。
12、 GBK to UTF8
将文件编码从GBK转黄成UTF8,快捷键Ctrl+Shift+C
13、Git
该插件基本上实现了git的所有功能。
14、Js Minifier
一款基于Google Closure compiler压缩Js文件插件,快捷键“ Ctrl+Alt+M”压缩Js代码、“ Ctrl+Alt+Shift+M”压缩Js并生成压缩文件 *.min.js
15、less
LESS语法高亮插件,安装成功重启Sublime Text 2即生效
16、Pretty JSON
格式化JSON插件,让你完全摆脱那些所谓的在线格式化JSON工具
17.ConvertToUTF8支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件
18、DocBlockr DocBlockr可以自动生成PHPDoc风格的注释。它支持的语言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++
19、SideBar Enhancements这个插件改进了侧边栏,增加了许多功能
20、TrailingSpacer
有时候在代码结尾打多了几个空格或Tab,一般不会察觉,TrailingSpacer这款插件能高亮显示多余的空格和Tab,并可以一键删除它们,有代码洁癖的朋友应该会喜欢这个插件。
在编辑CSS样式的时候,要加个自己喜欢颜色或改改颜色啥的,要到PS里去调色?ColorPicker可以让sublime text 3内置一个调色盘,调好颜色,点击OK就会在光标处生成十六进制颜色代码。
22、CSScomb CSS属性排序(需要PHP环境)
有时候看看自己写的CSS文件,会不会觉得属性很乱查找不易维护难?CSScomb可以按照一定的CSS属性排序规则,将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码,按C trl +S hift + C,即可对CSS属性重新排序了,代码从此简洁有序易维护,如果不款选代码则插件将排序文件中所有的CSS属性。当然,可以自己自定义CSS属性排序规则,打开插件目录里的CSScomb.sublime-settings文件,更改里面的CSS属性顺序就行了。
23、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
如果想要新建其他类型的文件模板的话,先自定义文件模板方在templates文件夹里,再分别打开Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型,这里就详细介绍了,请各位自己折腾哈~