近期在学习前端的相关知识中无意间了解到Sublime Text3，简单的学习之后，我发现确实很好用，强大的快捷键和插件立马就吸引我了，于是乎我入坑了... 我估计看到这里的同学们十有八九也是入坑了的，那我们一起来好好学习了解Sublime Text3！
首先是去官网下载相应的版本 直通车
无脑安装了之后激活（作为程序员我想大家都知道怎么做，就不多纠结了）
然后就与我一起开启学习之旅吧！
一、优良特性概述
Sublime Text3编辑器会自动对编辑文件进行保存，打开文件会自动识别文件内容，版本三可以直接在编辑器中打开图片
二、常用快捷键及插件概述
ctrl+p：goto anything快捷键
快速查找并打开文件 如：test/test.html
快速定位 如：@+选择名称 可直接搜索导航到匹配的选择项
可一起使用 如：test/test.html@header
Ctrl+Shift+P：打开命令面板
快速切换编辑语言 如：Set Syntax:JavaScript 支持模糊匹配 js
Ctrl+G：跳转到第几行
Ctrl+W：关闭当前打开文件
Ctrl+Shift+W：关闭所有打开文件
Ctrl+Shift+V：粘贴并格式化
Ctrl+D：选择单词，重复可增加选择下一个相同的单词 （多行游标）
Ctrl+光标多选
Ctrl+K-->Ctrl+D 跳过选取
Atl+F3全选匹配内容
Ctrl+A,然后再Ctrl+Shift+L 全选游标
ctrl+shift+D：复制当前行
Ctrl+L：选择行，重复可依次增加选择下一行
Ctrl+Shift+L：选择多行
Ctrl+Shift+Enter：在当前行前插入新行
Ctrl+X：删除当前行
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到首行，写注释说明用的
Ctrl+Shift+A：选择当前标签前后，修改标签用的
F11：全屏
Shift+F11：全屏免打扰模式，只编辑当前文件
Alt+F3：选择所有相同的词
Alt+.：闭合标签
Alt+Shift+数字：分屏显示
Alt+数字：切换打开第N个文件
Shift+右键拖动：光标多不，用来更改或插入列内容
鼠标的前进后退键可切换Tab文件
按Ctrl+Shift+上下键，可替换行
Ctrl+] 增加缩进 [ 减小缩进。
三、插件
1.package control 主题安装
1、进入官网。（直通车）
2、选择sublime的版本 然后复制下面的代码。
3、进入sublime text 软件，选择view下的show console。
4、将代码粘贴进去按回车等待安装的完成。
5、安装完成后重启sublime text。
6、启用命令模式（ctrl+shift+p），输入package control:install package.
7、等待加载插件，加载完有很多的插件。
8、选择主题插件theme（主题） ****，有很多样式，可以去官网看，推荐flatland、soda、spacegray。。。在命令模式下选择一种，比如选择 theme spacegray。
9、等待安装，安装完成后会弹出使用说明，说明里有叫你把space eighties 下面的复制到自己用户的配置信息中，也就是preferences菜单下的settings user里将复制的代码粘贴进去。（打个逗号粘贴），保存后安装完成，sublime text的主题就会变成安装的主题样式。
pc：1. install Package 安装插件
2. List Package 已经安装插件列表
3. Remove Package 卸载插件
4. Disable/Enable Package 禁用/启用插件
2.Emmet插件
自动生成html5结构，Ctrl+E
> 号生成子元素 ，$ 产生序号，{ }产生内容
如： （ul>.item${content}*10）
ul>(li>a[href="index.htnl"])*4
3.Snippet
在Javascript语法环境中，Tools->Command Palette… (shift+command+P) 打开命令模式,输入Snippet，选择“Snippet:function"命令可以快速创建函数，通过tab键可以快速切换输入参数和函数体，通过sublime Text自带输入的缩写词也能自动补全代码语句,如输fun 选择提示的fun Function,就会生成函数：
function function_name (argument) {
// body...
},
输人ife选第一个回车，就会生成：
if (true) {} else{}
安装Javascript&NodeJs Snippets 以及jQuery插件, ,很方便的提高生产力,具体指令说明：https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets ，https://packagecontrol.io/packages/jQuery
方便的完成回调函数
安装Insert Callback插件，https://packagecontrol.io/packages/Insert%20Callback
按alt+C就能自动生成回调函数。
《Sublime Text3 snippets》
Snippet Function
1.[ctrl+shift+P]+输入'pci'+输入'Snippet: Function'
2.输入'fun'+[Enter]，自动产生 function
3.输入'ife'，自动产生 if else
JavaScript snippets
1.[ctrl+shift+P]+输入'pci'+输入'JavaScript Completions'
2.输入'gi'，自动产生 getElementById
JQuery snippets
1.[ctrl+shift+P]+输入'pci'+输入'JQuery'
2.输入'get'，自动产生 get请求
3.输入'post'，自动产生 post请求
Insert Callback
1.[ctrl+shift+P]+输入'pci'+输入'Insert Callback'
2.[alt+C]，自动产生 callBack function
4.advanceNewFile插件
ctrl+n:新建
ctrl+s：保存；
安装advanceNewFile插件，ctrl+alt+n在该目录下创建文件或者命名文件；
Ctrl+Alt+N输入文件名即可在当前文件夹下创建文件；
Ctrl+Alt+N输入带路径的文件名即可在该路径下创建文件，如果路径不存在，便创建出该路径
5.htttpRequester
1.在Sublime内部，做服务器响应的测试Get请求
router.get('/',function(req,res){res.send('request with a resource');});
注释需要测试的路由地址//localhost:8080/users/并选中
ctrl+alt+R
200 OK服务器响应正确
在Sublime内部，做服务器响应的测试Post请求:
// POST http://www.baidu.com
// Content-type: application/x-www-form-urlencoded
// POST_BODY:
// ac=weeklyregister_register&code=weeklyregister&wapid=ma_62
6.nettus fetch插件
ctrl+shift+p--->输入nettus fetch回车--->ctrl_shift+p--->输入fetch manage来管理配置文件
使用fetch来下载jquery步骤：
ctrl+alt+n在某个目录下创建一个jQuery文件--->在该文件中输入ctrl+shift+p--->输入fetch file回车--->jquery回车下载。
在fetch配置文件中来增加新的类库（如：underscore.js）：
步骤如下：
在该文件中添加"underscore":"http://github.com/jashkenas/underscore/blob/master/underscore.min.js"和前一个参数以"逗号"来分隔。
ctrl+alt+n在某个目录下创建一个underscore文件--->在该文件中输入ctrl+shift+p--->输入fetch file回车--->jquery回车下载。
到github下载underscore.js文件
github上的underscore文件地址：
https://raw.githubusercontent.com/jashkenas/underscore/master/underscore-min.js
7. SideBarEnhancements插件
ctrl+shift+p —> Install Package —> 找到SideBarEnhancements
SideBarEnhancements
2. 配置预览快捷键
Preferences —> Key Bindings - User 将以下代码复制到数组中。
// chrome
{ "keys": ["f2"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"extensions":".*"
}
},
// firefox
{ "keys": ["f3"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "D:/Program Files (x86)/Mozilla Firefox/firefox.exe",
"extensions":".*"
}
},
// ie
{ "keys": ["f4"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:/Program Files/Internet Explorer/iexplore.exe",
"extensions":".*"
}
}
上面的代码中有两处需要注意的地方，一个是keys表示快捷键，即f2可以启动chrome进行预览。另一个是application，表示浏览器所在的安装路径，只有路径配置正确，才能够正常调用浏览器
8.校验插件SublimeLinter
安装jshint的步骤：
1)ctrl+shift+p打开命令模式--->输入pcip回车--->输入sublimelinter回车（是总体框架，如果需要对js进行校验的话，还需要安装针对js的校验插件，其中有两套js校验插件，分别是jslint,jshint,其中jshint是最流行的，此处也是安装jshint为主）--->ctrl+shift+p--->输入sublimelinter-jshint回车进行安装--->下载node.js进行安装（因为用命令方式安装jshint插件用到npw install(node版本库），到node.js官网下载node-v6.2.0-x64.msi并且点击安装，安装完成之后--->需要在命令行安装jshint,命令代码时：npw install -g jshint。
如果没有安装node的话，那么npw命令就是无效的。
注意：在sublime text使用sublimelinter jshint，那么jshint版本必须大于2.4。
jshint文档网址：jshint.com/docs/options/
如何在js中使用校验呢？步骤如下：
1)ctrl+alt+n打开一个新文件--->切换到js语法模式--->如果用户在js文件上写上var x=123后面却没有分号的话，那么该行的左边就会有个黄色的圆点进行提示用户，这里需要加上分号。如果在js中定义一个数值，一个字符串，虽然这两个值相同，但是类型不同，一个数值型，另一个是字符串类型，所以要判断这两个变量是否相等就需要用到三等于了，但是如果我们不小心写少了一个等号的话，就很难察觉了，为了避免这种情况的发生，我们需要自定义校验，自定义校验的步骤如下：
定义一个名称为.jshintrc的配置文件，该文件里面的内容是json格式的，内容如下：
{
"eqeqeq":true,//校验三等的情况
"curly":true//校验if，for语法没有写花括号的情况
}
9.autofilename
自动提示文件路径 如：
待续...
网友评论