sublime与webstorm的比较:
webstorm真心很强大,强大到能够几乎满足所有前端开发者编程的需求,方便的快捷键操作、代码提示、浏览器查看、工程管理、历史记录(可以找到之前编辑的内容,即使把文件删掉,类似svn、git),各种主题风格,与webstorm相比,sublime更像是刚买回来的“裸机”,什么都没有,需要自己根据需求进行插件安装。不过个人比较喜欢这种,“一直都是小受,终于可以攻一把了”。
webstorm让我决定放弃也是因为它功能太强大了,强大到打开软件,让我产生时空错乱感,就跟TM打开eclipse一样,瞬间让我想起以前开发java的时光(fuck,为了每天不想在SB一样地等着elipse打开,然后还得卡几下,所以一个月关一次电脑)。
sublime最吸引我的地方,就在于一些独特的快捷键、打开速度非常之快(胜过我的手速),尤其是在家想写点东西时,不会因为软件漫长的打开同时,抽空去干别的,从而一去不返,*_*,自从习惯于用sublime以后,妈妈再也不用担心我的学习了。
废话不多说,下面就让我们一起进入sublime的世界吧,看看我是怎么把玩它的,sorry,写着写着就浪了。
安装与注册
我使用的是 sublime Text Build 3114
注册码:
Michael Barnes
Single User License
EA7E-821385
8A353C41 872A0D5C DF9B2950 AFF6F667
C458EA6D 8EA3C286 98D1D650 131A97AB
AA919AEC EF20E143 B361B1E7 4C8B7F04
B085E65E 2F5F5360 8489D422 FB8FC1AA
93F6323C FD7F7544 3F39C318 D95E6480
FCCC7561 8A4A1741 68FA4223 ADCEDE07
200C25BE DBBC4855 C4CFB774 C5EC138C
0FEC1CEF D9DCECEC D3A5DAD1 01316C36
用户配置:
菜单 Preferences -> setting user{
"font_size": 16,
"ignored_packages":
[
"Vintage"
],"highlight_line": true, //光标所在行高亮
"show_encoding": true, //显示文件编码方式
"bold_folder_labels": true //让文件夹加粗,粗的还是细的,根据自身情况奥
}
常用插件安装与使用
* 首先要安装package control组件,这就好比你想要嘿嘿嘿,总得先找个女朋友,至少也得是个充气的吧
* 按Ctrl+`调出console
* 粘贴以下代码到底部命令行并回车:
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
* 安装插件方法:按下Ctrl+Shift+P调出命令面板 -> 输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件
1.编辑html/css提示插件: Emmet插件
2.原生JS提示补全插件: autoCompleteJs(替代方案,手动下载AndyJS2,然后解压在packages中)
3.jQuery提示补全插件:jQuery
4.支持H5插件:HTML5和HTMLattributes(他俩是夫妻档奥,所以要一起来)
5.解决Sublime不支持GBK、GB2312编码:ConvertToUTF8
6.方法说明自动生成:DocBlockr (在方法的上一行当输入/**并且按下Tab键的时候,这个插件会自动解析任何一个函数并且为你准备好合适的模板)
7.自动补全文件路径:AutoFileName(例如引入图片,自动补全图片路径)
8.创建新文件插件:Advance new file(ctrl+alt+n: 直接输入文件名,则在主目录创建新文件;如果输入 路径/文件名,则可以自动在某个路径下创建文件)
9.管理最新插件库:nettus fetch
选择 Fetch:Manage,然后进行配置,配置如图所示
接下来,就NB了,新建一个文件然后,在文件中,Ctrl+Shift+P: fetch File, 然后选择 jquery 回车 就下载了
10.鼠标右键功能(新建、删除、重命名等等):SideBarEnhancements(在扩展插件里面已经没有了,需要手动下载,然后解压放在package目录下
下载地址:http://pan.baidu.com/s/1jG4AnsU)
11.高亮显示匹配的括号、引号和标签:BracketHighlighter
12.CSS可自动添加 -webkit 等私有词缀:Prefixr(Ctrl+Alt+X触发)
13.JS代码格式化插件:JS Forma( 选中代码,然后ctrl+alt+f)
14.查看标签、CSS属性浏览器支持情况:Can I Use
15.安装主题:Theme - Flatland
激活: 修改 Preferences 文件,通过 Sublime Text 2 的菜单 “Preferences > Settings - User” 可打开用户配置文 件,在其中添加(或修改原来的设置):
"theme": "Flatland Dark.sublime-theme",
"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme"
然后通过菜单选择主题,进行配置
16.语法检查插件:这个厉害喽,需要配合node结合使用,关于node的使用,我会在下一篇文章中阐述
安装这四个插件
SublimeLinter
SublimeLinter-contrib-htmlhint
SublimeLinter-csslint
SublimeLinter-jshint
node端安装下面3个依赖包
npm install -g xg-htmlhint
npm install -g csslint
npm install -g jshint
17. Less:分别安装less 和 less2css 这两个插件
node:npm install -g less
npm install -g less-plugin-clean-css
常用快捷键
* Goto
* Goto Anything:ctrl+p 打开输入的页面
* Goto Symbol: ctrl+r 在定位到js方法或css样式的行
* 打开的文件切换: ctrl+PgUP/PgOn 或 ctrl+tap进行切换
* 技巧:比如要修改style.css文件的body样式,可以 ctrl+p ,输入style.css@body 就能定位到body了
* 在打开的文件里面, ctrl+p ,输入#body 就能定位到当前文件的body了
* 多行游标(相当find Replace)
* ctrl+d:一次增加一个游标,比如有多个 mode 单词,鼠标选择mode,然后按一次ctrl+d 就同时增加选择了一个mode,选择几个就按几次快捷键
* ctrl+k ctrl+d 可以跳过一个mode
* Esc 可以推出多行游标
* alt+F3 : 可以产生多行游标,一次选中所有的点击的单词
* 按住shift+鼠标右键进行拖拽: 也能产生多行游标
* 命令模式
* ctrl+shift+p: 切换文件语法模式,比如:html,选择后就是html文件了
* ctr+回车,在当前行下方加入一行
* ctrl+shift+回车,在当前行的上方加入一行
* Ctrl+KK:从光标处删除至整行的尾部
* Ctrl+Shift+D:复制光标所在的整行,插入在该行之前
* Ctrl+J:合并行(已选择需要合并的多行时可以理解为不换行模式,直到遇到编辑器边框后自动换行
* Ctrl+Shift+[:折叠代码
* Ctrl+Shift+]:展开代码
* Shift+table:向左缩进、Tab向右缩进
* Shift+Tab 去除缩进
* CTRL+O:打开文件
* Ctrl+J 合并行(已选择需要合并的多行时)
* Ctrl+Shift+K 删除整行
* Alt+Shift+1(非小键盘)窗口分屏,恢复默认1屏
* Alt+Shift+2 左右分屏-2列