Sublime Text 2是一个轻量、简洁、高效、跨平台的编辑器。博主之前一直用notepdd++写前端代码,用得也挺顺手了,早就听说sublime的大名,一直也懒得去试试看,认为都是工具用着顺手就好。这几天突然心血来潮,下了个试了下,结果。。。结果博主毫无节操的抛弃了notepad++。。。下面根据博主这几天的使用心得,来介绍下这款前端神器,介于使用时间很短,有些说的不妥的地方还望各位看官海涵。
Windows 的 Sublime 有两种版本:
普通版(Normal)
Sublime Text 相关的文件被放在了两个目录中,一个用于放置程序及其相关文件,一个用于放置数据
便携版(Portable)
所有的 Sublime Text 相关文件被放置在一个文件夹中(建议用这种,这样你换一台电脑,直接把文件拷过去,就可以了,不用再去安装插件,配置啥了,太爽了,有木有)
Sublime除了本身好用,个人感觉在于它强大的插件,下面介绍下插件安装的方法:
1.直接安装
安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(preferences->packages)。
2.使用Package Control组件安装(推荐)
按Ctrl+(
就是tab键上面那个,看了其他教程,害我找半天。。。)调出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 2。
如果在Perferences->package settings中看到package control这一项,则安装成功
然后按Ctrl+shift+p,输入install package,最后输入插件名字按回车即可。一切看起来都很美好,但在有代理的环境下这种安装方法可能会失败,我公司的环境就这样,怎么解决呢?解决方案如下:
1.下载proxifier,请google(proxifier的注册机会被安全软件当做木马,需要先放行)
2.设置代理服务器
配置文件=》代理服务器=》新增
代理地址:如xx.xx.com
端口:如8080
https
3.配置代理规则
将sublime的可以将对应的exe添加到代理规则中去
实用插件列表(以下插件经博主都已安装,确实爽歪歪):
Emmet(就是zencoding,这货改名了,网上很多还写着这名字)
快速写html代码,ctrl+alt+enter呼出,具体请参考:http://docs.emmet.io/abbreviations/syntax/
SublimeLinter
一个支持lint语法的插件,ctrl+alt+l呼出(与qq的锁定冲突,自己去改热键吧)可以高亮linter认为有错误的代码行
jQuery
用jquery的同学不容错过啊,写完后按tab键,有惊喜;
Alignment
代码对齐,如写几个变量,选中后,Ctrl+Alt+A,对代码有洁癖的人会喜欢的
Bracket Highlighter
高亮代码匹配,可以匹配括号,引号,标签等各种
DocBlockr
自动注释,完全符合jsdoc标准,按/**即可,再也不用为注释烦恼啦
Prefixr
写 CSS可自动添加 -webkit 等私有词缀,Ctrl+Alt+X触发
Tag
Html格式化,右键Auto-Format Tags on Ducument。
JS Format
一个JS代码格式化插件,ctrl+alt+f格式化代码,让代码分分钟变漂亮
Theme - soda
这个主题相当cool,在preferences->user setting中加入
"color_scheme": "Packages/Color Scheme - Default/Monokai Soda.tmTheme",
"theme": "Soda Dark.sublime-theme"
安装新的代码配色方案
点击Preferences->Browse Packages打开包安装目录,找到Color Scheme - Default文件夹,把下载来的新的配色安装放入即可
Sublime Text快捷键:
Ctrl+Shift+P:打开命令面板
Ctrl+P:搜索项目中的文件
Ctrl+G:跳转到第几行
Ctrl+W:关闭当前打开文件
Ctrl+Shift+W:关闭所有打开文件
Ctrl+Shift+V:粘贴并格式化
Ctrl+D:选择单词,重复可增加选择下一个相同的单词
Ctrl+L:选择行,重复可依次增加选择下一行
Ctrl+Shift+L:选择多行
Ctrl+Shift+Enter:在当前行前插入新行
Ctrl+M:跳转到对应括号
Ctrl+U:软撤销,撤销光标位置
Ctrl+J:选择标签内容
Ctrl+F:查找内容
Ctrl+Shift+F:查找并替换
Ctrl+H:替换
Ctrl+R:前往 method
Ctrl+N:新建窗口
Ctrl+K+B:开关侧栏
Ctrl+Shift+M:选中当前括号内容,重复可选着括号本身
Ctrl+F2:设置/删除标记
Ctrl+/:注释当前行
Ctrl+Shift+/:当前位置插入注释
Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的
F11:全屏
Shift+F11:全屏免打扰模式,只编辑当前文件
Alt+F3:选择所有相同的词
Alt+Shift+数字:分屏显示
Alt+数字:切换打开第N个文件
Ctrl+Tab:切换tab
Ctrl+Shift+上下键,可替换行
多行编辑功能:
1) 同时编辑多行 (Ctrl+Shift+L (Win) 或 Command+Shift+L (Mac))
如要在选中的多行文本的最后面同时添加一个字符“a”,先选中要编辑的多行文字,然后按快捷键,此时每行的末尾都会有个输入光标在闪,再按End键将鼠标定位到行末,输入字母a即可。如要退出多行编辑状态,按Esc键即可。
2) 向下同时选中下一个相同的文本 (反复按 CTRL+D (Win) 或 Command+D (Mac))
3) 一次性选择全部的相同文本 (Alt+F3 (Win) 或 Ctrl+Command+G (Mac))
4) 竖向多行选择 (Shift+鼠标右键 (Win) 或 Option+鼠标左键 (Mac))
5) 手动选择多处不同文本 (Ctrl+鼠标左键(Win) 或 Command+鼠标左键(Mac) )
定位:
跳到指定行 (Ctrl+G (Win) 或 Command+G(Mac)) 或者 Ctrl+P后输入字符":"
快速列出/跳转函数就是 Ctrl+R (Mac下是Command+R)
罗列HTML各个ID元素和函数 Ctrl+P之后输入@号 或按Ctrl+R
命令面板:Ctrl+Shift+P
将选中部分切换大小写
扩展包管理器:
将下载的扩展包 Package Control.sublime-package 复制到C:\Users\yourName\AppData\Roaming\Sublime Text 2\Installed Packages,重启ST2即可。
如果 Package Control 已经安装成功,那么 Ctrl+Shift+P 调用命令面板,我们就会找到一些以“Package Control:”开头的命令,我们常用到的就是几个 Install Package (安装扩展)、List Packages (列出全部扩展)、Remove Package (移除扩展)、Upgrade Package (升级扩展)。
以安装“JsFormat”插件为例介绍怎样安装与使用插件(JsFormat 的功能就是 新排版JavaScript 代码):使用 Ctrl+Shift+P 调用命令面板,输入“Package Control: Install Package”(安装扩展包),在插件列表中选择安装“JsFormat”(可以输入字符过滤),待提示成功之后即已完成安装。随便打开一个js文件,按下 Ctrl+Shift+P 调用命令面板,你会发现已经多了一项命令叫做“Format: Javascript”。
其他一些插件列举如下:
JsFormat - js文件格式化,CTRL+ALT+F
JavaPropertiesEditor - 原生语言的属性文件编辑
CSSTidy - 格式化css文件
SublimeToggleCssFormat - CSS文件单行/多行格式化切换,Ctrl+Alt+J执行切换,Ctrl+Shift+R选择当前节点
HtmlTidy:清理与排版你的HTML代码
Gits:可以轻松集成 GitHub
SFTP:直接编辑 FTP 或 SFTP 服务器上的文件
ZenCoding:这货对于前端的同学来说不得了,可以超快速编写HTML文件 (视频演示)
ConvertToUTF8:ST2只支持utf8编码,该插件可以显示与编辑 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的文件
Clipboard History:剪切板历史
WordPress:集成一些WordPress的函数,对于像我这种经常要写WP模版和插件的人特别有用!
PHPTidy:整理与排版PHP代码
YUI Compressor:压缩JS和CSS文件
快捷键:
将选中的文字改成大写 - Ctrl+K+U
将选中的文字改成小写 - Ctrl+K+L
选择整行:Ctrl+L (按住-继续选择下行)
删除整行:Ctrl+Shift+K
复制光标所在整行,插入在该行之前:Ctrl+Shift+D
上下移动光标所在的行位置:Ctrl+Shift+UP|DOWN Ctrl+Command+UP|DOWN
注释整行:Ctrl+/ (如已选择内容,同“Ctrl+Shift+/”效果) Command + /
注释已选择内容:Ctrl+Shift+/
折叠代码 :Ctrl+Shift+[
展开代码:Ctrl+Shift+]
多文件批量查找替换:Ctrl+Shift+F