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.lxweimin.com/p/de9746bf3e15