開始開發網站的那一分鐘，您首先會用到的工具 是文字編輯器，無論是要簡單好用的記事本，還是整人臉 IDE。
在這集節目中Matt 查看一系列外掛程式 ，並討論如何製作 Sublime Text 每項服務都有助於工作流程
套件控管
如要取得該集節目中參照的套件 (或外掛程式)，您必須： 安裝套件控制， 安裝，您可以找到 相關操作說明。
JSHint
JSHint 是可檢查 JavaScript 的 JavaScript Linter 並醒目顯示程式碼中所有可能的錯誤或不當做法。
舉例來說，如果您不小心輸入錯誤的變數名稱，例如
下方的程式碼，則 JSHint 會指出 fo 從未定義，且
您就會發生錯誤
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
JSHint 外掛程式 指出問題所在 並將遊標置於這一小段程式碼內 訊息。
其他可偵測的問題包括：
- 已定義但從未使用的變數
- 避免在迴圈內建立函式
- 使用正確的比較方法
安裝 SublimeLinter-JSHint 套件 此外，您也必須安裝 SublimeLinter 套件並按照安裝指示操作 請參閱 SublimeLinter-JSHint 套件頁面上的操作說明。
建議您為部分開發人員提供 JSHint 溝槽 外掛程式它會在 雜亂無章的 JSHint 問題。
JSCS
JSCS 會醒目顯示 您的 JavaScript 未遵循特定的編碼樣式。
舉例來說，JSCS 可用於定義是否應 用於關鍵字 (例如「if」) 或定義大括號之後 應該位於方法的同一行或新行。
SublimeLinter-JSCS 套件 以類似 JSHint 的相似樣式醒目顯示所有內嵌問題 ，方便使用者修正任何問題
這在以 Deployment 規格 讓大家可以遵循相同的風格指南 程式碼保持一致
最棒的是，使用 JSCS-Formatter 套件可以自動修正網頁上的任何問題
按下 ctrl + shift + p，輸入「JSCS Formatter: 格式化此檔案」
然後按下 Enter 鍵。詳情請參閱 Addy 的網誌文章。
顏色螢光筆
顏色醒目顯示器 會在 CSS 或 Sass 中的任何顏色定義。
您可以透過 滑鼠遊標停在圖片上方或一律顯示時 會在定義背景上顯示顏色只要前往 套件設定>顏色螢光筆> 設定 - 預設就能查看初始設定 和變更「設定 - 使用者」中的設定。
完整背景醒目顯示 將下列內容新增至「設定 - 使用者」檔案：
{
"ha_style": "filled"
}
溝槽顏色
溝槽顏色 這是顏色醒目顯示工具的替代方法 而不是在顏色變數上方顯示顏色 則會將顏色置於線條的空白邊
顏色挑選器
如果需要快速輕鬆的方式選取畫面色彩 那麼顏色挑選器套件 可能會有些問題
按下 ctrl + shift + c 鍵，即可打開手機，輕鬆取用顏色挑選器。
AutoFileName
AutoFileName 是一種簡單的小型外掛程式 系統會在您輸入時列出可能的檔案清單。太棒了 方便使用者輸入圖片名稱 新增 CSS 或 JS 檔案 更重要的是降低拼寫錯誤的風險
自動前置字元
我們都曾經歷過這樣的一段發現，但他們還記得 新增附帶前置字串的 CSS 屬性取代為 自動前置字串 只要在 CSS 上簡單地執行 新增您需要的所有前置字串
這代表我們這麼做...
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
..to 以下內容，只需按一下 ctrl + shift + p 並輸入
「自動前置字串 CSS」並按下 Enter 鍵
.container-thingy {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
您也可以定義需要的瀏覽器和瀏覽器版本 您可在套件設定中支援這項功能查看「套件控制」頁面 。
更多…
市面上還有許多其他外掛程式 Sublime 文字，因此請務必詳閱「Package Control」。
如需更多建議和提示，請 瀏覽 WesBos 優質投影片 Sublime Text 的鍵盤快速鍵和其他外掛程式。
WesBos 也寫了一本書名為 「進階使用者的基本文字」 我想你也想吸引其他潛在客戶 :)