前端开发利器 Sublime Text 3 使用技巧和总结笔记

标签：

这篇文章是本人在使用该工具进行前端开发的自我总结，思路也许不是很清楚，不过还是希望对读者的你有所帮助，千万别把这边文章收藏起来发霉哦，无论背多少次快捷键，还不及自己多实际操作几次。

1. 目前官方版正式版 Sublime Text 2 Build 2221，而 Sublime Text 3 为测试阶段，建议下载正式版  注册机SublimeTextKeygen下载
2. 打开注册机，先点中间 “Patch key” 打开 “sublime_text.exe” 文件确认，再随意修改下 “Name” 然后 “Generate”，复制好里面的 License。（注：请按步骤做，否则不成功！此时请不要关掉注册机，不要辅助虚线部分文字~）
3. 打开 Sublime Text 2，到 Help–Enter license 粘贴点击确认，完成~
4. 如果手头银子充足，请支持正版软件，不过 sublimetext 售价不便宜，USD $70~
5. Sublime Text 3 正式版已发布。请支持正版！

######## Sublime Text 3 使用快捷键 ########

1. Ctrl+Alt+f 可以整理JS代码的格式，需要选中后使用。（需插件支持：format）
2. Ctrl+Ait+p 调出强大的命令面板。
3. Ctrl+P 快捷功能-
4. Ctrl+R 调出 @ 功能 可以迅速定位 function 函数名称
5. Ctrl+G 调出 ：功能可以迅速定位行号，调试修改样式的时候常用。
6. Ctrl+~ 调出控制带
7. Ctrl+D和Alt+F3前者“连续按住可以选择向下选择相同字符串”，后者“自定义选择文本，按下就可以一次性选择所有相同文本”。
8. Ctrl+/ 注释整行。 Ctrl+Shift+/ 注释选择的部分。
9. 更多快捷键请查看以下图片！

######## Sublime Text 3 使用技巧效率 ########

1. 鼠标选中多行，按下 Ctrl+Shift+L (Command+Shift+L) 即可同时编辑这些行；
2. 鼠标选中文本，反复按 CTRL+D (Command+D) 即可继续向下同时选中下一个相同的文本进行同时编辑；
3. 鼠标选中文本，按下 Alt+F3 (Win) 或 Ctrl+Command+G(Mac) 即可一次性选择全部的相同文本进行同时编辑；
4. Shift+鼠标右键 (Win) 或 Option+鼠标左键 (Mac) 或使用鼠标中键可以用鼠标进行竖向多行选择；
5. Ctrl+鼠标左键(Win) 或 Command+鼠标左键(Mac) 可以手动选择同时要编辑的多处文本

######## sublime text 3 美化 ########

• 皮肤的切换标签换成直角的，不喜欢默认的圆润，这套皮肤的名字叫：Theme – Nil，当时看了木木木木木博客的一篇文章（突然发现我跟他的审美观如此匹配~）
• 代码的配色方案，Color schemes for hackers — Base16   地址：https://github.com/chriskempson/base16
• 另外一套主题：spacegray，项目地址：http://kkga.github.io/spacegray/，这套主题集成了base16配色方案，也是现在我用的主题，界面预览请看本篇文章的首图

######## sublime text 3 插件技巧 ########

1. sublime text 插件删除步骤：“Ctrl+Shift+P”—“Remove Package”—“找到需要删除的插件，并点击即可删除”
2. 解决GBK和GB2312乱码问题：安装插件 “ConvertToUTF8”
3. 更多资料：Sublime Text 2 – 性感无比的代码编辑器！程序员必备神器！跨平台支持Win/Mac/Linux

######## 我常用的插件列表 （2014年10月1日更新）########

1. package Control：这是为了方便管理插件的一个工具，所以最好就是先装这个插件了，使用快捷键Ctrl+Shift+P 调用，官方地址：https://packagecontrol.io/ 
2. YUI Compressor：压缩JS和CSS文件，按F7键后，若压缩当前文件（demo.js），则压缩后的文件（demo.min.js）保存在该文件的同级目录，需要安装java的JDK。使用方法：sublime text 插件：YUI Compressor
3. JsFormat：有压缩当让也可以格式化，这个就是格式化JS用的，快捷键Ctrl+Alt+F。
4. ConvertToUTF8：Sublime 只支持utf8编码，该插件可以显示与编辑多种非utf8编码的文件
5. Emmet：也就是大名鼎鼎的 ZenCoding ，新版把名字更改为“蚂蚁”的英文单词Emmet，这可是前端开发的超级利器，可以超快速编写HTML/CSS/JS，当然这个插件还支持多种编译环境， 如常见的：Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等，使用方法：官方网站
6. jQuery和CSS3：前端开发必备。
7. Clipboard History：剪切板历史，仅支持Sublime Text 2
8. BracketHighlighter:高亮显示匹配的括号、引号和标签等，甚至是自定义的标签，当看到密密麻麻的代码分不清标签之间包容嵌套的关系时，这款插件就能很好地帮你理清楚代码结构，快速定位括号，引号和标签内的范围，当然它也是前端必备。
9. CSScomb：它可以按照一定的 CSS 属性排序规则，将杂乱无章的 CSS 属性进行重新排序。选中要排序的 CSS 代码，按 Ctrl+Shift+C，即可对 CSS 属性重新排序了，代码从此简洁有序易维护，如果不款选代码则插件将排序文件中所有的 CSS 属性。当然，可以自己自定义 CSS 属性排序规则，打开插件目录里的 CSScomb.sublime-settings 文件，更改里面的 CSS 属性顺序就行了。因为这个插件使用 PHP 写的，要使他工作需要在环境变量中添加 PHP 的路径，具体请看 CSScomb官方网站 上的说明。

   插件下载地址：https://github.com/csscomb/CSScomb-for-Sublime

10. alignmentSublime集成的代码格式化插件，可以代替JsFormat、CSS Format 部分功能。

前端开发利器 Sublime Text 3 使用技巧和总结笔记

标签：

原文地址：http://www.cnblogs.com/Akgu/p/4925102.html