成长日记之Sublime Text3

    近期在学习前端的相关知识中无意间了解到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

自动提示文件路径 如:


待续...

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

推荐阅读更多精彩内容