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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 近期在學習前端的相關知識中無意間了解到Sublime Text3,簡單的學習之后,我發現確實很好用,強大的快...
    小y哥哥閱讀 1,082評論 0 3
  • Sublime Text:一款具有代碼高亮、語法提示、自動完成且反應快速的編輯器軟件,不僅具有華麗的界面,還支持插...
    追風逸少丶閱讀 11,369評論 1 34
  • package control的安裝 按Ctrl+`調出console(注:安裝有QQ輸入法的這個快捷鍵會有沖突的...
    FConfidence閱讀 1,752評論 0 1
  • Sublime Text:一款具有代碼高亮、語法提示、自動完成且反應快速的編輯器軟件,不僅具有華麗的界面,還支持插...
    xiaotao123閱讀 9,521評論 0 27
  • 大半夜的被女星Selina離婚的消息刷屏。很震驚,其實不關我的事。但是時間回到當時姚晨離婚的消息爆出,那是我...
    言語菇涼閱讀 242評論 0 0