Sublime Text 3 習慣外掛 轉
原帖:https://www.cnblogs.com/hykun/p/sublimeText3.html
Emmet外掛
Emmet外掛可以說是使用Sublime Text進行前端開發必不可少的外掛
它讓編寫HTML程式碼變得極其簡單高效
基本用法:輸入標籤簡寫形式,然後按Tab鍵
關於Emmet的更多介紹,請檢視官方文件
這份速查表,可以幫你快速記憶簡寫形式
JsFormat外掛
這是一款將JS格式化的外掛
同樣使用Package Control安裝JsFormat外掛後
即可在JS檔案中通過滑鼠右鍵->
使用效果如下圖
SideBarEnhancements外掛
SideBarEnhancements是一款很實用的右鍵選單增強外掛
在安裝該外掛前,在Sublime Text左側FOLDERS欄中點選右鍵
只有寥寥幾個簡單的功能
通過Package Control安裝SideBarEnhancements外掛後
可以看到,資料夾欄右鍵選單馬上增強不少
安裝此外掛後配置方法為
重啟Sublime text 3後
開啟任意一個JS檔案,按
這時候第一次執行會去下載對應的類庫
可以按
TrailingSpaces外掛
有時候,在程式碼結尾打多了幾個空格或Tab
並沒有任何顯示效果
TrailingSpaces這款外掛能高亮顯示多餘的空格和Tab
Tag外掛
這是HTML/XML標籤縮排、補全、排版和校驗工具
安裝該外掛後,可以如上圖方式使用Tag外掛對HTML/XML進行自動排版等操作
目前樓主未能發現該操作快捷方式,若您有所發現,望留言點撥
Terminal外掛
在程式設計過程中,我們經常需要使用到命令列視窗
Terminal外掛可以允許在Sublime Text 3中開啟cmd命令視窗
安裝好該外掛後
即可使用快捷鍵Ctrl+Shift+T撥出命令列視窗
SublimeCodeIntel外掛
這是一款程式碼提示外掛,支援多種程式語言
該外掛安裝時間可能相對較長
更特別的是,安裝該外掛後需要根據您使用的程式語言進行配置
本部分將以配置JavaScript語言的程式碼提示功能為例
安裝該外掛後,點選
進入
再進入
將其中檔名為
你會看到大概如下圖的程式碼
將以下程式碼複製後貼上到Config檔案中
//注意上下文需要新增的逗號 "JavaScript":{ "javascriptExtraPaths":[] }
複製粘貼後的效果如下圖
儲存後關閉config檔案
這樣,在編寫JavaScript時即可獲得程式碼提示,如下圖示
CssComb外掛
CssComb是為CSS屬性進行排序和格式化外掛[官網]
使用Package Control安裝CssComb外掛後,你可能發現它並不能執行
它依賴於Node.js[官網]
若您的計算機已安裝過NodeJS環境,可跳過此步驟
若您的計算機中尚未安裝過Node.js環境
應該到Node.js官網中[下載]並安裝相應版本的Node.js,如下圖示
安裝NodeJS後,即可使用CssComb外掛
使用方法:選單
使用前,CSS可能雜亂無章
使用後,CSS屬性按照作用類別出現
還可以選中一部分CSS程式碼進行排序
使用前,選中需要排序的CSS程式碼
使用後,選中部分程式碼已排好序
美中不足的是,CssComb似乎不支援IE hark
Autoprefixer外掛
這是一款CSS3私有字首自動補全外掛
該外掛使用CanIUse資料庫,能精準判斷哪些屬性需要什麼字首
與CssComb外掛一樣,該外掛也需要系統已安裝Node.js環境
使用方法:在輸入CSS3屬性後(冒號前)按Tab鍵,如下圖示