1. 程式人生 > 實用技巧 >Sublime Text 3 習慣外掛 轉

Sublime Text 3 習慣外掛 轉

原帖:https://www.cnblogs.com/hykun/p/sublimeText3.html

Emmet外掛

Emmet外掛可以說是使用Sublime Text進行前端開發必不可少的外掛

它讓編寫HTML程式碼變得極其簡單高效

基本用法:輸入標籤簡寫形式,然後按Tab鍵

關於Emmet的更多介紹,請檢視官方文件

這份速查表,可以幫你快速記憶簡寫形式

JsFormat外掛

這是一款將JS格式化的外掛

同樣使用Package Control安裝JsFormat外掛後

即可在JS檔案中通過滑鼠右鍵->JsFormat或鍵盤快捷鍵Ctrl+Alt+F對JS進行格式化

使用效果如下圖

SideBarEnhancements外掛

SideBarEnhancements是一款很實用的右鍵選單增強外掛

在安裝該外掛前,在Sublime Text左側FOLDERS欄中點選右鍵

只有寥寥幾個簡單的功能

通過Package Control安裝SideBarEnhancements外掛後

可以看到,資料夾欄右鍵選單馬上增強不少

安裝此外掛後配置方法為

重啟Sublime text 3後

開啟任意一個JS檔案,按ctrl+shift+space

這時候第一次執行會去下載對應的類庫

可以按ctrl+`(也就是調出控制檯)來看進度

TrailingSpaces外掛

有時候,在程式碼結尾打多了幾個空格或Tab

並沒有任何顯示效果

TrailingSpaces這款外掛能高亮顯示多餘的空格和Tab

Tag外掛

這是HTML/XML標籤縮排、補全、排版和校驗工具

安裝該外掛後,可以如上圖方式使用Tag外掛對HTML/XML進行自動排版等操作

目前樓主未能發現該操作快捷方式,若您有所發現,望留言點撥

Terminal外掛

在程式設計過程中,我們經常需要使用到命令列視窗

Terminal外掛可以允許在Sublime Text 3中開啟cmd命令視窗

安裝好該外掛後

即可使用快捷鍵Ctrl+Shift+T撥出命令列視窗

SublimeCodeIntel外掛

這是一款程式碼提示外掛,支援多種程式語言

該外掛安裝時間可能相對較長

更特別的是,安裝該外掛後需要根據您使用的程式語言進行配置

本部分將以配置JavaScript語言的程式碼提示功能為例

安裝該外掛後,點選Preferences->Browse Packages...選單

進入SublimeCodeIntel資料夾

再進入.codeintel資料夾

將其中檔名為config的檔案拖動到Sublime Text 3中

你會看到大概如下圖的程式碼

將以下程式碼複製後貼上到Config檔案中

//注意上下文需要新增的逗號
"JavaScript":{
	"javascriptExtraPaths":[]
}

複製粘貼後的效果如下圖

儲存後關閉config檔案

這樣,在編寫JavaScript時即可獲得程式碼提示,如下圖示

CssComb外掛

CssComb是為CSS屬性進行排序和格式化外掛[官網]

使用Package Control安裝CssComb外掛後,你可能發現它並不能執行

它依賴於Node.js[官網]

若您的計算機已安裝過NodeJS環境,可跳過此步驟

若您的計算機中尚未安裝過Node.js環境

應該到Node.js官網中[下載]並安裝相應版本的Node.js,如下圖示

安裝NodeJS後,即可使用CssComb外掛

使用方法:選單Tools->Run CSScomb或在CSS檔案中按快捷鍵Ctrl+Shift+C

使用前,CSS可能雜亂無章

使用後,CSS屬性按照作用類別出現

還可以選中一部分CSS程式碼進行排序

使用前,選中需要排序的CSS程式碼

使用後,選中部分程式碼已排好序

美中不足的是,CssComb似乎不支援IE hark

Autoprefixer外掛

這是一款CSS3私有字首自動補全外掛

該外掛使用CanIUse資料庫,能精準判斷哪些屬性需要什麼字首

與CssComb外掛一樣,該外掛也需要系統已安裝Node.js環境

使用方法:在輸入CSS3屬性後(冒號前)按Tab鍵,如下圖示