面向 Web 開發人員的 Sublime Text 外掛程式，sublimetext

面向 Web 開發人員的 Sublime Text 外掛程式，sublimetext
Package Control

在 Sublime Text 上大家都用 Package Control 來管理安裝外掛程式，所以它是我們要安裝的第一個外掛程式，安裝方法見這裡。關於 Package Control 的使用方法這裡不再贅述。

 

JSHint

 

Linter 是協助你檢查代碼問題的一類工具，幫你發現潛在的錯誤或不好的代碼習慣。JSHint 是檢查 JavaScript 代碼的好工具，支援很多編輯器和 IDE 。

Sublime 上要使用 JSHint 可以安裝：SublimeLinter-JSHint 外掛程式。注意安裝這個外掛程式前需要先安裝 SublimeLinter 以及 jshint 命令本身，更多資訊見 SublimeLinter-JSHint 安裝說明。簡單地說就是：

註：JavaScript 有許多 linter 工具，如 JSLint 、JSHint 和 ESLint 。JSLint 是 JavaScript 大師 Douglas Crockford 創作和維護的。JSHint 是 JSLint 的 fork 版，由社區維護，更可擴充、更靈活，使用者也更多，Mozilla、jQuery 都在用 JSHint 。ESLint 是另一位 JavaScript 專家  Nicholas C. Zakas 主導的社區項目。

註：SublimeLinter 是 Sublime 上 linter 類外掛程式的 framework，所以很多 linter 都依賴這個外掛程式。Package Control: Install Package 中輸入 SublimeLinter- 會列出大量 SublimeLinter- 開頭的 linter 外掛程式，如：

JSCS

代碼中沒有錯誤還不夠，好的代碼需要遵循一致的代碼風格（代碼不僅僅給機器用，還是給人看不是嗎？）。JSCS 是檢查代碼風格的工具，可以配置很多代碼風格規則，例如空格的要求、括弧的位置等，還可以直接使用  jQuery、Google 等代碼風格方案。

Sublime 上需要安裝 SublimeLinter-JSCS 。這個外掛程式同樣依賴 SublimeLinter 以及 jscs 命令本身。簡單安裝說明如下：

此外，你還可以安裝一個 JSCS-Formatter 外掛程式，實現自動代碼格式化。

ColorHighliter

Color highlighter 外掛程式可以自動顯示 CSS 或 Sass 中聲明的顏色，讓你一目瞭然。預設配置下，當滑鼠移到顏色變數上時背景就會變為聲明的顏色。

還可以設定多種顏色顯示方式，預設配置見： ‘Package Settings’ > ‘Color Highlighter’ > ‘Settings – Default’ 。例如，我們在該外掛程式的 User 設定中做如下設定可以達到的顯示效果：

 

123	{  "ha_style": "filled"}

Gutter Color 和 Color Picker 是另外兩個顏色相關的外掛程式。

AutoFileName

AutoFileName 在你在輸入檔案名稱是提供自動提示，減少人為的輸入錯誤。

Autoprefixer

Autoprefixer 外掛程式讓幫你自動添加 CSS 廠商首碼，個人使用比較方便。如果是正式的項目，可以使用其它自動構建工具在構建過程中統一實現。

作者：韓國愷。本系列文章以 Addy & Matt 的系列視頻 Totally Tooling Tips 的內容為基礎重新整理而成，主要介紹一些(前端)開發人員喜歡的工具和技巧。