? ? 近期在學(xué)習(xí)前端的相關(guān)知識(shí)中無意間了解到Sublime Text3，簡(jiǎn)單的學(xué)習(xí)之后帽借，我發(fā)現(xiàn)確實(shí)很好用，強(qiáng)大的快捷鍵和插件立馬就吸引我了蒂教，于是乎我入坑了... 我估計(jì)看到這里的同學(xué)們十有八九也是入坑了的脆荷，那我們一起來好好學(xué)習(xí)了解Sublime Text3！
? ? 首先是去官網(wǎng)下載相應(yīng)的版本 ?直通車
? ? 無腦安裝了之后激活（作為程序員我想大家都知道怎么做瓶逃，就不多糾結(jié)了）
? ? 然后就與我一起開啟學(xué)習(xí)之旅吧！
?一桃焕、優(yōu)良特性概述
? ? ? Sublime Text3編輯器會(huì)自動(dòng)對(duì)編輯文件進(jìn)行保存，打開文件會(huì)自動(dòng)識(shí)別文件內(nèi)容退子，版本三可以直接在編輯器中打開圖片
二型将、常用快捷鍵及插件概述
?ctrl+p：goto anything快捷鍵
? ? ? ? ? ? ? ? ? ? ? ? ?快速查找并打開文件 如：test/test.html
? ? ? ? ? ? ? ? ? ? ? ? ?快速定位 如：@+選擇名稱 可直接搜索導(dǎo)航到匹配的選擇項(xiàng) ??
? ? ? ? ? ? ? ? ? ? ? ? ?可一起使用 如：test/test.html@header
?Ctrl+Shift+P：打開命令面板 ?
? ? ? ? ? ? ? ? ? ? ? ? ? 快速切換編輯語(yǔ)言 如：Set Syntax:JavaScript ? ? 支持模糊匹配 js?
?Ctrl+G：跳轉(zhuǎn)到第幾行
?Ctrl+W：關(guān)閉當(dāng)前打開文件
Ctrl+Shift+W：關(guān)閉所有打開文件
Ctrl+Shift+V：粘貼并格式化
Ctrl+D：選擇單詞，重復(fù)可增加選擇下一個(gè)相同的單詞 ?（多行游標(biāo)）
? ? ? ? ? ? ? ? Ctrl+光標(biāo)多選
? ? ? ? ? ? ? ? Ctrl+K-->Ctrl+D 跳過選取
? ? ? ? ? ? ? ? Atl+F3全選匹配內(nèi)容
? ? ? ? ? ? ? ? Ctrl+A,然后再Ctrl+Shift+L 全選游標(biāo)
ctrl+shift+D：復(fù)制當(dāng)前行
Ctrl+L：選擇行七兜，重復(fù)可依次增加選擇下一行
Ctrl+Shift+L：選擇多行
Ctrl+Shift+Enter：在當(dāng)前行前插入新行
Ctrl+X：刪除當(dāng)前行
Ctrl+M：跳轉(zhuǎn)到對(duì)應(yīng)括號(hào)
Ctrl+U：軟撤銷，撤銷光標(biāo)位置
Ctrl+J：選擇標(biāo)簽內(nèi)容
Ctrl+F：查找內(nèi)容
Ctrl+Shift+F：查找并替換
Ctrl+H：替換
Ctrl+R：前往 method
Ctrl+N：新建窗口
Ctrl+K+B：開關(guān)側(cè)欄
Ctrl+Shift+M：選中當(dāng)前括號(hào)內(nèi)容惜犀，重復(fù)可選著括號(hào)本身
Ctrl+F2：設(shè)置/刪除標(biāo)記
Ctrl+/：注釋當(dāng)前行
Ctrl+Shift+/：當(dāng)前位置插入注釋
Ctrl+Alt+/：塊注釋，并Focus到首行虽界，寫注釋說明用的
Ctrl+Shift+A：選擇當(dāng)前標(biāo)簽前后，修改標(biāo)簽用的
F11：全屏
Shift+F11：全屏免打擾模式莉御，只編輯當(dāng)前文件
Alt+F3：選擇所有相同的詞
Alt+.：閉合標(biāo)簽
Alt+Shift+數(shù)字：分屏顯示
Alt+數(shù)字：切換打開第N個(gè)文件
Shift+右鍵拖動(dòng)：光標(biāo)多不，用來更改或插入列內(nèi)容
鼠標(biāo)的前進(jìn)后退鍵可切換Tab文件
按Ctrl+Shift+上下鍵牍颈，可替換行
Ctrl+] 增加縮進(jìn) [ 減小縮進(jìn)琅关。
三、插件
1.package control 主題安裝
1涣易、進(jìn)入官網(wǎng)。（直通車）
2新症、選擇sublime的版本 然后復(fù)制下面的代碼。
3戳护、進(jìn)入sublime text 軟件瀑焦，選擇view下的show console腌且。
4榛瓮、將代碼粘貼進(jìn)去按回車等待安裝的完成。
5精续、安裝完成后重啟sublime text。
6重付、啟用命令模式（ctrl+shift+p）凫乖，輸入package control:install package.
7弓颈、等待加載插件删掀，加載完有很多的插件翔冀。
8披泪、選擇主題插件theme（主題） ****，有很多樣式计福，可以去官網(wǎng)看徽职，推薦flatland佩厚、soda姆钉、spacegray抄瓦。。毯辅。在命令模式下選擇一種煞额，比如選擇 theme spacegray思恐。
9膊毁、等待安裝，安裝完成后會(huì)彈出使用說明描焰，說明里有叫你把space eighties 下面的復(fù)制到自己用戶的配置信息中栅螟，也就是preferences菜單下的settings user里將復(fù)制的代碼粘貼進(jìn)去。（打個(gè)逗號(hào)粘貼）力图，保存后安裝完成，sublime text的主題就會(huì)變成安裝的主題樣式吃媒。
pc：1. install Package 安裝插件
? ? ? ?2. List Package 已經(jīng)安裝插件列表
? ? ? ?3. Remove Package 卸載插件
? ? ? ?4. Disable/Enable Package 禁用/啟用插件
2.Emmet插件
? ? ? ? ? ?自動(dòng)生成html5結(jié)構(gòu)坪圾，Ctrl+E ??
? ? ? ? ? ?> 號(hào)生成子元素 惑朦，$ 產(chǎn)生序號(hào)，{ }產(chǎn)生內(nèi)容
? ? ? ? ? ? 如： ? （ul>.item${content}*10）
? ? ? ? ? ? ? ? ? ? ? ? ul>(li>a[href="index.htnl"])*4?
3.Snippet
? ? ? ?在Javascript語(yǔ)法環(huán)境中，Tools->Command Palette… (shift+command+P) 打開命令模式,輸入Snippet梁肿，選擇“Snippet:function"命令可以快速創(chuàng)建函數(shù)，通過tab鍵可以快速切換輸入?yún)?shù)和函數(shù)體钮热，通過sublime Text自帶輸入的縮寫詞也能自動(dòng)補(bǔ)全代碼語(yǔ)句,如輸fun 選擇提示的fun Function,就會(huì)生成函數(shù)：
function function_name (argument) {
// body...
},
輸人ife選第一個(gè)回車烛芬，就會(huì)生成：
if (true) {} else{}
安裝Javascript&NodeJs Snippets 以及jQuery插件, ,很方便的提高生產(chǎn)力,具體指令說明：https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets 隧期，https://packagecontrol.io/packages/jQuery
方便的完成回調(diào)函數(shù)
安裝Insert Callback插件赘娄，https://packagecontrol.io/packages/Insert%20Callback
按alt+C就能自動(dòng)生成回調(diào)函數(shù)。
《Sublime Text3 snippets》
Snippet Function
1.[ctrl+shift+P]+輸入'pci'+輸入'Snippet: Function'
2.輸入'fun'+[Enter]性置，自動(dòng)產(chǎn)生 function
3.輸入'ife'揍堰，自動(dòng)產(chǎn)生 if else
JavaScript snippets
1.[ctrl+shift+P]+輸入'pci'+輸入'JavaScript Completions'
2.輸入'gi'，自動(dòng)產(chǎn)生 getElementById
JQuery snippets
1.[ctrl+shift+P]+輸入'pci'+輸入'JQuery'
2.輸入'get'屏歹，自動(dòng)產(chǎn)生 get請(qǐng)求
3.輸入'post'，自動(dòng)產(chǎn)生 post請(qǐng)求
Insert Callback
1.[ctrl+shift+P]+輸入'pci'+輸入'Insert Callback'
2.[alt+C]凰萨，自動(dòng)產(chǎn)生 callBack function
4.advanceNewFile插件
ctrl+n:新建
ctrl+s：保存械馆；
安裝advanceNewFile插件胖眷，ctrl+alt+n在該目錄下創(chuàng)建文件或者命名文件霹崎；
Ctrl+Alt+N輸入文件名即可在當(dāng)前文件夾下創(chuàng)建文件；
Ctrl+Alt+N輸入帶路徑的文件名即可在該路徑下創(chuàng)建文件境析，如果路徑不存在，便創(chuàng)建出該路徑
5.htttpRequester
1.在Sublime內(nèi)部劳淆，做服務(wù)器響應(yīng)的測(cè)試Get請(qǐng)求
router.get('/',function(req,res){res.send('request with a resource');});
注釋需要測(cè)試的路由地址//localhost:8080/users/并選中
ctrl+alt+R
200 OK服務(wù)器響應(yīng)正確
在Sublime內(nèi)部，做服務(wù)器響應(yīng)的測(cè)試Post請(qǐng)求:
// 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在某個(gè)目錄下創(chuàng)建一個(gè)jQuery文件--->在該文件中輸入ctrl+shift+p--->輸入fetch file回車--->jquery回車下載括勺。
在fetch配置文件中來增加新的類庫(kù)（如：underscore.js）：
步驟如下：
在該文件中添加"underscore":"http://github.com/jashkenas/underscore/blob/master/underscore.min.js"和前一個(gè)參數(shù)以"逗號(hào)"來分隔。
ctrl+alt+n在某個(gè)目錄下創(chuàng)建一個(gè)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. 配置預(yù)覽快捷鍵
Preferences —> Key Bindings - User 將以下代碼復(fù)制到數(shù)組中栏妖。
// 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":".*"
}
}
上面的代碼中有兩處需要注意的地方，一個(gè)是keys表示快捷鍵宛裕，即f2可以啟動(dòng)chrome進(jìn)行預(yù)覽趾徽。另一個(gè)是application翰守，表示瀏覽器所在的安裝路徑孵奶，只有路徑配置正確蜡峰，才能夠正常調(diào)用瀏覽器
8.校驗(yàn)插件SublimeLinter
安裝jshint的步驟：
1)ctrl+shift+p打開命令模式--->輸入pcip回車--->輸入sublimelinter回車（是總體框架，如果需要對(duì)js進(jìn)行校驗(yàn)的話载绿，還需要安裝針對(duì)js的校驗(yàn)插件油航，其中有兩套js校驗(yàn)插件崭庸，分別是jslint,jshint,其中jshint是最流行的谊囚，此處也是安裝jshint為主）--->ctrl+shift+p--->輸入sublimelinter-jshint回車進(jìn)行安裝--->下載node.js進(jìn)行安裝（因?yàn)橛妹罘绞桨惭bjshint插件用到npw install(node版本庫(kù)），到node.js官網(wǎng)下載node-v6.2.0-x64.msi并且點(diǎn)擊安裝镰踏，安裝完成之后--->需要在命令行安裝jshint,命令代碼時(shí)：npw install -g jshint函筋。
如果沒有安裝node的話，那么npw命令就是無效的奠伪。
注意：在sublime text使用sublimelinter jshint跌帐，那么jshint版本必須大于2.4首懈。
jshint文檔網(wǎng)址：jshint.com/docs/options/
如何在js中使用校驗(yàn)?zāi)兀坎襟E如下：
1)ctrl+alt+n打開一個(gè)新文件--->切換到j(luò)s語(yǔ)法模式--->如果用戶在js文件上寫上var x=123后面卻沒有分號(hào)的話谨敛，那么該行的左邊就會(huì)有個(gè)黃色的圓點(diǎn)進(jìn)行提示用戶究履，這里需要加上分號(hào)。如果在js中定義一個(gè)數(shù)值佣盒，一個(gè)字符串挎袜，雖然這兩個(gè)值相同，但是類型不同肥惭，一個(gè)數(shù)值型盯仪，另一個(gè)是字符串類型，所以要判斷這兩個(gè)變量是否相等就需要用到三等于了蜜葱，但是如果我們不小心寫少了一個(gè)等號(hào)的話全景，就很難察覺了牵囤，為了避免這種情況的發(fā)生爸黄，我們需要自定義校驗(yàn)，自定義校驗(yàn)的步驟如下：
定義一個(gè)名稱為.jshintrc的配置文件揭鳞，該文件里面的內(nèi)容是json格式的炕贵，內(nèi)容如下：
{
"eqeqeq":true,//校驗(yàn)三等的情況
"curly":true//校驗(yàn)if，for語(yǔ)法沒有寫花括號(hào)的情況
}
9.autofilename
自動(dòng)提示文件路徑 如：
待續(xù)...
