Sublime Text 已成為了目前最流行的代碼編輯器之一。它的反應速度、簡單易用性以及豐富的插件生態，讓眾多前端開發者們為之傾倒。

為了幫助開發者們更便捷地使用 Sublime Text ，我們決定製作一個 Sublime Text 擴展列表，它包含了我們日常使用的一些插件。當然，如果我們所列舉的插件中沒有你喜歡的，也隨時歡迎你在評論中與我們分享它們。

1.插件包管理器

首先，我們將從包管理器開始。Package Control 是 Sublime Text 的插件包管理器，它提供了 Sublime 中插件包的安裝與刪除。若你沒有安裝它，那麼我們後續推薦的插件，你也就無法嘗試咯。

2.JavaScript 與 NodeJS 代碼段

一個用於編寫常見 JavaScript 代碼段的集合插件。為什麼要費勁逐個敲下 document.querySelector（'selector'）文本，你只需要利用快捷鍵 qs，並按下 Tab鍵，剩下的代碼，Sublime 將幫你自動補全。

3.Emmet

與上述的插件類似，Emmet 也是一款讓你更快捷編碼的插件。但 Emmet 適用於 HTML 與 CSS 代碼的編寫，它可以讓你一次性輸入長標籤、嵌套元素或者整個頁面模板。

如果你覺得 Emmet 有些複雜，那麼你可以嘗試一個叫做 HTML 代碼段的插件。它更簡單易用，並且使用文檔寫的也很直接。

譯者注：Emmet 的前身是大名鼎鼎的 Zen coding，相信前端開發者們不會陌生。這裡再分享一個使用手冊，希望對你有所幫助。

4. Advanced New File

一款助你在 Sublime 中快速創建新文件的插件。你只需要使用菜單，並利用快捷鍵 ctrl+alt+n打開提示框，寫入新文件的路徑，即可配置新文件。

該插件還支持自己編寫路徑保存，甚至文件夾的名稱也可以自動完成。

5. Git

一款可以直接在 Sublime 命令選項面板中工作的 Git 集成插件。該插件提供了一些常用的 Git 命令，你可以在 Sublime 中完成，諸如添加、提交或查看 Git 日誌等功能。

6. GitGutter

一個非常實用的 Sublime 擴展。它會告訴你自上次 Git Commit 以來已經改變的代碼行，並給出相應的概述。你也可以用它來與你已提交到 Git 上的文件進行詳細的對比。

7. Side Bar Enhancements

在 Sublime Text 中，你可以在左側面板中瞭解正在進行的項目。雖然，它為你提供了一些使用文件的基本選項，但默認的操作是相當有限的。

當你右鍵菜單選項的時候，這個插件將會為你提供超過 20 個選項來增強你的可操作性。包括在瀏覽器中打開、複製以及其他有用的功能。

8. ColorPicker

一個小巧實用的取色器。它可以快速地抓取十六進制的色值，使用非常簡單。你可以在單獨的窗口打開它，從調色板中取色，或使用滴管在屏幕的任意位置取色。

9. Placeholders

Sublime Text 3 有一個內置的 Lorem Ipsum（佔位符） 生成器，你可以使用它來創建虛擬文本。而該插件則擴展了佔位符生成器的功能，你就可以通過 Sublime Text 快速地生成佔位符圖像、表單、列表和表。

10. DocBlockr

一個可以向函數添加詳細註釋的插件。DocBlockr 可以幫助你輕鬆地為函數添加相應的描述，包括參數、返回的值和變量類型。

11. SublimeCodeIntel

一個智能代碼自動補全插件，它能幫你索引你的源文件，並能讓你快速地找到並跳轉到相應的函數中。

所以，這個擴展適用於流行以及相對冷門的編程語言。

12. Minify

一個代碼美化與壓縮的插件，適用於 CSS、HTML、JavaScript、JSON 和 SVG.

此包依賴於外部 Node.js 庫進行縮小和美化，故你需要單獨安裝它們。

npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo

13. Sublime Linter

此插件能夠幫助開發人員檢測代碼中存在的語法錯誤，不規範的或者錯誤的代碼寫法。它支持各類開發語言。

但 Sublime Linter 本身只是一個基礎的框架，所以使用的時候，你還需要安裝單獨的插件來滿足不同語言的使用需求。

14. Color Highlighter

你可以在許多 IDE 和文本編輯器中看到顏色高亮功能，而 Sublime 中是不支持顏色預覽的。但是，有了這款插件，在你使用 Sublime 時就能夠幫你檢測出 CSS 文件中的顏色碼。無論是 Hex 碼，或是 RGB 碼都能很好的顯示。

15. Language Packs

雖然 Sublime Text 具有超過 50 種編程語言代碼的高亮顯示。但是，仍然有部分框架和 Web 開發語言，目前還不支持。不過，由於編輯器插件的性質，社區也能夠為任何編程語言創建和提供相應的包。

• AngularJS
• TypeScript
• Babel (React)

額外的彩蛋：主題

在 Sublime Text 上安裝一個漂亮的主題，勢必會使你能夠更愉快地編寫代碼。當然，這裡也有一些我們喜歡的主題與你分享：

• Agila(截圖中使用的主題)
• Material Theme
• Brogrammer

感謝你的閱讀。若你有所收穫，歡迎點贊與分享。

注：

1. 本文版權歸原作者所有，僅用於學習與交流；
2. 如需轉載譯文，煩請按下方註明出處信息，謝謝！

英文原文：15 Awesome Sublime Text Plugins For Web Development

譯文地址：

https://zhuanlan.zhihu.com/p/52545760

更多文章：

閱讀更多 IT程序獅 的文章

關鍵字: 前端開發 Sublime Git