【工具】Sublime使用详细介绍

声明：本文章是根据慕课网视频 前端开发工具技巧介绍—Sublime篇 整理而来的笔记。

目录：

1、菜单栏主要功能。
2、使用"Goto Anything"。
3、多行游标。
4、命令模式。
5、安装插件。
6、综合技巧运用。
7、Sublime进阶。
7.1、Snippet以模板的方式编程。
7.2、辅助技巧-advanceNewfile。
未完待续。

1、菜单栏主要功能

sublime.png

1、SublimeText默认配置文件：Preferences——>Setting-Default。
2、SublimeText用户配置文件：Preferences——>Setting-User。
3、SublimeText颜色配置：Preferences——>Color Scheme。

2、使用"Goto Anything"。

要点：
1、其搜索是支持模糊匹配的。
2、可在文件内部外部迅速导航。

1、快捷键Ctrl+P打开GotoAnything输入框。
2、（:20）跳转到第20行。
3、（index.html）找到该文件。
4、（view/index）找到在views目录下的index.html文件。
5、（@）@后面的字符可以找想找到的选择器或者函数名。
6、（#body）#是对页面内容进行匹配。
7、（public/css/bo@body）直接定位到bootstrap.css的body选择器。

3、多行游标

1、Ctrl+D ：选择游标所在单词，连续Ctrl+D 实现多行选择（选择与第一次选择相同的单词）。
2、Ctrl+K Ctrl+D：跳过当前选择，选择下一个。
3、Ctrl+shirt+D：复制游标所在行。
4、Alt+F3：选择所有与游标所在单词相同的单词。
5、Ctrl+A，Ctrl+shift+L：每行都会产生一个光标)，如果每行一样的话很方便。
6、按住shift键，然后按住鼠标右键向下拖动，也可产生多行游标。
7、按住ctrl键，用鼠标左键一个一个点击，也可以产生多行游标。

4、命令模式

1、首先要安装PackageControl（官网：https://packagecontrol.io ）。
2、Ctrl+` 输入：

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

重启Sublime。
3、Ctrl+Shift+P（启动命令模式）。
4、输入：set syntax javascript（设置为js语法模式）。
5、输入：minimap（打开/关闭右侧的minimap）。

5、安装插件

1、Ctrl+Shift+P打开命令模式。
2、输入install，稍等片刻。
3、输入插件名称回车就能自动安装了。

常用插件：
1、Emmet。
2、主题：Theme - Spacegray（可到PackageControl官网查看该主题样式）。
3、Java​Script & Node​JS Snippets。
4、JQuery。
5、Insert Callback。
6、AdvancedNewFile。

6、综合技巧运用。

1、打开一个文件：Ctrl+N。
2、启动命令模式：Ctrl+Shift+P。
3、设置为html语法模式：输入 sshtml+Enter。
4、在编辑区输入! 接着按快捷键Ctrl+E直接出现（使用Emmet插件完成，如何安装请参考目录4）：

5、Ctrl+P打开GotoAnything。
6、输入#body按回车，光标定位到body标签上。
7、Ctrl+回车，在body标签添加新行。
8、（ul>.item$*10{content}）+（ctrl+E）> 号生成子元素 ， . 点号代表 class ，$ 产生序号，{ }产生内容。
9、选中“><”字符串按Alt+F3选中所有的“><”字符串，移动光标到"><"中间，回车，输入h2{this is title}按Ctrl+E。
10、Ctrl+Shift+V 粘贴的时候可以保存代码的缩进。

7、Sublime进阶

7.1、Snippet以模板的方式编程。

1、Ctrl+Shift+P打开命令模式。
2、输入Snippet:Function回车。
3、使用Snippet可以减少左右移动光标，输入分号，大括号的一个过程。
4、使用Sublime自动补全功能也能做到以Snippet方式编程。
5、可以去PackageControl官网搜索JavaScript Snippets for Sublime查找更多定义好的Snippet。
6、安装Insert Callback插件按Alt+C可以在参数中自动补全回调方法。
7、安装JQuery插件也能使用Snippet对JQuery进行编程。

7.2、辅助技巧-advanceNewfile。

1、安装AdvancedNewFile插件。
2、Ctrl+Alt+N。
3、输入public/css/test.css，就会在指定目录下创建好test.css文件。
4、如果有目录不存在，也能同时创建好该目录。

未完待续
由于最近才开始有学html5的准备，没有js基础，表示后面的Sublime进阶插件听不懂，等学会了js再来补充。