? ? 近期在學習前端的相關(guān)知識中無意間了解到Sublime Text3，簡單的學習之后，我發(fā)現(xiàn)確實很好用，強大的快捷鍵和插件立馬就吸引我了，于是乎我入坑了... 我估計看到這里的同學們十有八九也是入坑了的，那我們一起來好好學習了解Sublime Text3！

? ? 首先是去官網(wǎng)下載相應的版本 ?直通車

? ? 無腦安裝了之后激活（作為程序員我想大家都知道怎么做，就不多糾結(jié)了）

? ? 然后就與我一起開啟學習之旅吧！

?一、優(yōu)良特性概述

? ? ? Sublime Text3編輯器會自動對編輯文件進行保存，打開文件會自動識別文件內(nèi)容，版本三可以直接在編輯器中打開圖片

二、常用快捷鍵及插件概述

?ctrl+p：goto anything快捷鍵

? ? ? ? ? ? ? ? ? ? ? ? ?快速查找并打開文件 如：test/test.html

? ? ? ? ? ? ? ? ? ? ? ? ?快速定位 如：@+選擇名稱 可直接搜索導航到匹配的選擇項 ??

? ? ? ? ? ? ? ? ? ? ? ? ?可一起使用 如：test/test.html@header

?Ctrl+Shift+P：打開命令面板 ?

? ? ? ? ? ? ? ? ? ? ? ? ? 快速切換編輯語言 如：Set Syntax:JavaScript ? ? 支持模糊匹配 js?

?Ctrl+G：跳轉(zhuǎn)到第幾行

?Ctrl+W：關(guān)閉當前打開文件

Ctrl+Shift+W：關(guān)閉所有打開文件

Ctrl+Shift+V：粘貼并格式化

Ctrl+D：選擇單詞，重復可增加選擇下一個相同的單詞 ?（多行游標）

? ? ? ? ? ? ? ? Ctrl+光標多選

? ? ? ? ? ? ? ? Ctrl+K-->Ctrl+D 跳過選取

? ? ? ? ? ? ? ? Atl+F3全選匹配內(nèi)容

? ? ? ? ? ? ? ? Ctrl+A,然后再Ctrl+Shift+L 全選游標

ctrl+shift+D：復制當前行

Ctrl+L：選擇行，重復可依次增加選擇下一行

Ctrl+Shift+L：選擇多行

Ctrl+Shift+Enter：在當前行前插入新行

Ctrl+X：刪除當前行

Ctrl+M：跳轉(zhuǎn)到對應括號

Ctrl+U：軟撤銷，撤銷光標位置

Ctrl+J：選擇標簽內(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：選中當前括號內(nèi)容，重復可選著括號本身

Ctrl+F2：設置/刪除標記

Ctrl+/：注釋當前行

Ctrl+Shift+/：當前位置插入注釋

Ctrl+Alt+/：塊注釋，并Focus到首行，寫注釋說明用的

Ctrl+Shift+A：選擇當前標簽前后，修改標簽用的

F11：全屏

Shift+F11：全屏免打擾模式，只編輯當前文件

Alt+F3：選擇所有相同的詞

Alt+.：閉合標簽

Alt+Shift+數(shù)字：分屏顯示

Alt+數(shù)字：切換打開第N個文件

Shift+右鍵拖動：光標多不，用來更改或插入列內(nèi)容

鼠標的前進后退鍵可切換Tab文件

按Ctrl+Shift+上下鍵，可替換行

Ctrl+] 增加縮進 [ 減小縮進。

三、插件

1.package control 主題安裝

1、進入官網(wǎng)。（直通車）

2、選擇sublime的版本 然后復制下面的代碼。

3、進入sublime text 軟件，選擇view下的show console。

4、將代碼粘貼進去按回車等待安裝的完成。

5、安裝完成后重啟sublime text。

6、啟用命令模式（ctrl+shift+p），輸入package control:install package.

7、等待加載插件，加載完有很多的插件。

8、選擇主題插件theme（主題） ****，有很多樣式，可以去官網(wǎng)看，推薦flatland、soda、spacegray。。。在命令模式下選擇一種，比如選擇 theme spacegray。

9、等待安裝，安裝完成后會彈出使用說明，說明里有叫你把space eighties 下面的復制到自己用戶的配置信息中，也就是preferences菜單下的settings user里將復制的代碼粘貼進去。（打個逗號粘貼），保存后安裝完成，sublime text的主題就會變成安裝的主題樣式。

pc：1. install Package 安裝插件

? ? ? ?2. List Package 已經(jīng)安裝插件列表

? ? ? ?3. Remove Package 卸載插件

? ? ? ?4. Disable/Enable Package 禁用/啟用插件

2.Emmet插件

? ? ? ? ? ?自動生成html5結(jié)構(gòu)，Ctrl+E ??

? ? ? ? ? ?> 號生成子元素 ，$ 產(chǎn)生序號，{ }產(chǎn)生內(nèi)容

? ? ? ? ? ? 如： ? （ul>.item${content}*10）

? ? ? ? ? ? ? ? ? ? ? ? ul>(li>a[href="index.htnl"])*4?

3.Snippet

? ? ? ?在Javascript語法環(huán)境中，Tools->Command Palette… (shift+command+P) 打開命令模式,輸入Snippet，選擇“Snippet:function"命令可以快速創(chuàng)建函數(shù)，通過tab鍵可以快速切換輸入?yún)?shù)和函數(shù)體，通過sublime Text自帶輸入的縮寫詞也能自動補全代碼語句,如輸fun 選擇提示的fun Function,就會生成函數(shù)：

function function_name (argument) {

// body...

},

輸人ife選第一個回車，就會生成：

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就能自動生成回調(diào)函數(shù)。

《Sublime Text3 snippets》

Snippet Function

1.[ctrl+shift+P]+輸入'pci'+輸入'Snippet: Function'

2.輸入'fun'+[Enter]，自動產(chǎn)生 function

3.輸入'ife'，自動產(chǎn)生 if else

JavaScript snippets

1.[ctrl+shift+P]+輸入'pci'+輸入'JavaScript Completions'

2.輸入'gi'，自動產(chǎn)生 getElementById

JQuery snippets

1.[ctrl+shift+P]+輸入'pci'+輸入'JQuery'

2.輸入'get'，自動產(chǎn)生 get請求

3.輸入'post'，自動產(chǎn)生 post請求

Insert Callback

1.[ctrl+shift+P]+輸入'pci'+輸入'Insert Callback'

2.[alt+C]，自動產(chǎn)生 callBack function

4.advanceNewFile插件

ctrl+n:新建

ctrl+s：保存；

安裝advanceNewFile插件，ctrl+alt+n在該目錄下創(chuàng)建文件或者命名文件；

Ctrl+Alt+N輸入文件名即可在當前文件夾下創(chuàng)建文件；

Ctrl+Alt+N輸入帶路徑的文件名即可在該路徑下創(chuàng)建文件，如果路徑不存在，便創(chuàng)建出該路徑

5.htttpRequester

1.在Sublime內(nèi)部，做服務器響應的測試Get請求

router.get('/',function(req,res){res.send('request with a resource');});

注釋需要測試的路由地址//localhost:8080/users/并選中

ctrl+alt+R

200 OK服務器響應正確

在Sublime內(nèi)部，做服務器響應的測試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在某個目錄下創(chuàng)建一個jQuery文件--->在該文件中輸入ctrl+shift+p--->輸入fetch file回車--->jquery回車下載。

在fetch配置文件中來增加新的類庫（如：underscore.js）：

步驟如下：

在該文件中添加"underscore":"http://github.com/jashkenas/underscore/blob/master/underscore.min.js"和前一個參數(shù)以"逗號"來分隔。

ctrl+alt+n在某個目錄下創(chuàng)建一個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 將以下代碼復制到數(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":".*"

}

}

上面的代碼中有兩處需要注意的地方，一個是keys表示快捷鍵，即f2可以啟動chrome進行預覽。另一個是application，表示瀏覽器所在的安裝路徑，只有路徑配置正確，才能夠正常調(diào)用瀏覽器

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官網(wǎng)下載node-v6.2.0-x64.msi并且點擊安裝，安裝完成之后--->需要在命令行安裝jshint,命令代碼時：npw install -g jshint。

如果沒有安裝node的話，那么npw命令就是無效的。

注意：在sublime text使用sublimelinter jshint，那么jshint版本必須大于2.4。

jshint文檔網(wǎng)址：jshint.com/docs/options/

如何在js中使用校驗呢？步驟如下：

1)ctrl+alt+n打開一個新文件--->切換到js語法模式--->如果用戶在js文件上寫上var x=123后面卻沒有分號的話，那么該行的左邊就會有個黃色的圓點進行提示用戶，這里需要加上分號。如果在js中定義一個數(shù)值，一個字符串，雖然這兩個值相同，但是類型不同，一個數(shù)值型，另一個是字符串類型，所以要判斷這兩個變量是否相等就需要用到三等于了，但是如果我們不小心寫少了一個等號的話，就很難察覺了，為了避免這種情況的發(fā)生，我們需要自定義校驗，自定義校驗的步驟如下：

定義一個名稱為.jshintrc的配置文件，該文件里面的內(nèi)容是json格式的，內(nèi)容如下：

{

"eqeqeq":true,//校驗三等的情況

"curly":true//校驗if，for語法沒有寫花括號的情況

}

9.autofilename

自動提示文件路徑 如：

待續(xù)...