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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 近期在学习前端的相关知识中无意间了解到Sublime Text3,简单的学习之后,我发现确实很好用,强大的快...
    小y哥哥阅读 1,053评论 0 3
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    追風逸少丶阅读 11,310评论 1 34
  • package control的安装 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的...
    FConfidence阅读 1,741评论 0 1
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    xiaotao123阅读 9,474评论 0 27
  • 大半夜的被女星Selina离婚的消息刷屏。很震惊,其实不关我的事。但是时间回到当时姚晨离婚的消息爆出,那是我...
    言语菇凉阅读 225评论 0 0