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代码。
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