sublime实用技巧

sublime是一款具有漂亮的用户界面和强大的功能且小巧高速的代码编辑器。它最大的特点就是可以根据自己的需求下载需要的插件，自定义一款适合自己编码习惯的编辑器。

一、安装Package Control

安装插件之前需要先安装Package Control。按Ctrl+`调出console（或点击菜单栏view->showConsole），粘贴安装代码（见https://packagecontrol.io/installation#st3）到底部命令行并回车：重启Sublime Text 2。如果在Perferences->package settings中看到package control这一项，则安装成功。

二、用Package Control安装其他插件

按下Ctrl+Shift+P调出命令面板，输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。可以在https://packagecontrol.io/browse查阅想要下载的插件。

常用插件如下：

1.Emmet

emmet是一种快速的html、css编写方式。默认用tab键、'ctrl+E'。直接在html代码中或者通过ctrl+alt+enter弹出代码框，写入类似以下格式的代码（ul>.item{content}$*10）（> 号生成子元素 ，$ 产生序号，{ }产生内容）,点击'ctrl+E'或tab键会自动生成html代码。

Paste_Image.png

Paste_Image.png

2.JS Format

一个JS代码格式化插件。默认ctrl+alt+f

3.sublimelinter+sublimelinter-jshint+npw install -g jshint

使用lint进行语法及风格校验jshint可以统一编码风格。

安装jshint的步骤：
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中使用校验呢？

步骤如下：ctrl+alt+n打开一个新文件--->切换到js语法模式--->如果用户在js文件上写上var x=123后面却没有分号的话，那么该行的左边就会有个黄色的圆点进行提示用户，这里需要加上分号。如果在js中定义一个数值，一个字符串，虽然这两个值相同，但是类型不同，一个数值型，另一个是字符串类型，所以要判断这两个变量是否相等就需要用到三等于了，但是如果我们不小心写少了一个等号的话，就很难察觉了，为了避免这种情况的发生，我们需要自定义校验，自定义校验的步骤如下：定义一个名称为.jshintrc的配置文件，该文件里面的内容是json格式的，内容如下：{"eqeqeq":true,//校验三等的情况"curly":true//校验if，for语法没有写花括号的情况}

4.docblockr

安装之后输入/按回车，补充注释。输入/按回车，补充多行注释。在写好的函数上方输入/*按tab键，自动补充函数说明

5.nettus fetch2

命令行：管理 fetch:Manage(可配置需要的）
如何用fetch 快速下载JQuery1）Ctrl+Alt+N 在public/js/jquery.js 创建文件2)在文件中，Ctrl+Shift+P fetch File JQuery下载安装Nettuts+ Fetch (https://packagecontrol.io/packages/Nettuts%2B%20Fetch)通过这个插件能方便的更新前端开发所需的一些组件类库。
命令模式下，打开Fetch:Manager，看到现有的组件类库配置信息.alt+command+N 创建 public/js/jquery.js文件，Tools->Command Palette… (shift+command+P) 打开命令模式, 打开Fetch:File，看到Jquery回车就能下载最新版本的Jquery类库.

6.advanceNewfile

安装advanceNewfile插件，快捷键Ctrl+Alt+N，可以直接创建路径及里面的文件

7.snippets

snippets有很多，根据需要选择自己常用的
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

8.主题

主题插件有很多，可以在https://packagecontrol.io/browse/labels/theme中查阅下载

三、常用快捷键及使用技巧

ctrl+shift+v ： 粘贴时保持缩进
Ctrl+H ：查找替换
Ctrl+D ：选择游标所在单词，连续Ctrl+D 实现多行选择（选择与第一次选择相同的单词）
Ctrl+K Ctrl+D 跳过当前选择，选择下一个
Ctrl+shirt+D：复制游标所在行
Alt+F3：选择所有与游标所在单词相同的单词
按住shift键，然后按住鼠标右键向下拖动，也可产生多行游标
ctrl+shift+P(1)输入：js 选set:syntax
快速设置文本语法(2)输入：minimap，选择view:toggle minimap可以切换缩略图的显示。
ctrl+p输入：goto anything ;如：@body 可快速找到css选择器、直接模糊查找文件
ctrl+shirt+enter： 在当前上方添加一行
ctrl+enter： 在当前下方添加一行
Ctrl+]：增加缩进
Ctrl+[：减小缩进
Alt+Shift+1~9：（非小键盘）屏幕显示相等数字的小窗口
Alt+数字：切换打开第N个文件
Ctrl+Tab：按文件浏览过的顺序，切换当前窗口的标签页。

附录：
Package Control：https://packagecontrol.io/installation#st3
学习视频：http://www.imooc.com/learn/40
Sublime Text 3 快捷键精华版：http://www.jianshu.com/p/de9746bf3e15