Sublime Text 是一款幾乎所有開發者都必備的非常強大的軟體。它是跨平臺的、高度可定製化的、非常先進的文字編輯器,完美的彌補了全功能的 IDEs(出了名的消耗資源)與命令列編輯器如VIM、Emacs(有陡峭的學習曲線)的不足。
使得 Sublime 如此強大的原因之一是它的可擴充套件外掛架構,這使得開發人員可以非常容易的擴充套件 Sublime 的核心功能,如程式碼補全、或遠端介面文件的嵌入。Sublime Text 自身不帶有外掛管理功能,它們通常是通過一個第三方的稱作 Package Control的工具來管理。給 Sublime Text 安裝 Package Control ,請按照它們的網站上的安裝指南。
這篇文章中,我們將為你介紹10款 JavaScript 開發者必備的 Sublime Text 外掛,每一個都可以改善你的工作流程,提升工作效率。現在就讓我們開始吧。
1. Bable
列表第一個當然應該是 Bable。它為你的 ES6/2015 和 React JSX 程式碼新增語法高亮功能。外掛安裝後的第一件事就是把它設定為 .es6
, .jsx
甚至 .js
檔案的預設語法。然而你需要注意的是最後一個如果你使用的是 ES3/5 的話,請不要使用 Bable 語法。
如果你還沒有發現使用 Bable 的樂趣的話,我強烈建議你使用它。它可以把 ES6/2015 和 JSX 程式碼編譯成 ES5。它與所有流行的架構工具與CLI 都整合的很好。它不支援舊版本的瀏覽器,如果你使用 IE10 以下的瀏覽器,請遵循它們的警告頁面提示。
不幸的是,它不支援在 Sublime 中動態的編譯 ES6,如果你有這個需要的話,我建議你看看 Compile Selected ES6。
2. JSHint
JSHint 是一個 JavsScript Linter。它可以檢測程式碼的樣式、語法以及是否是常見的相關錯誤。無論你是新手還是老手,JSHint 都是必備的。檢視 JSHint 關於頁面獲取更多資訊。
為了使 JSHint 能夠執行,你需要通過 npm 全域性安裝 JSHint:
1 |
npm install -g jshint |
一旦 JSHint npm 模組和 Sublime Text 外掛安裝完成,你就可以通過開啟 JavaScript 檔案並按 Ctrl+J ( Alt+J 在Linux/Windows上)來呼叫 JSHint。
3. jsFormat
jsFormat 是基於 JS Beautifier 的,可以自動的幫你格式化 JavaScript 和 JSON。即使是你僅僅用它來格式化JSON也是值得的。對我來說最大的好處就是可以檢視別的開發者程式碼或者是自己很久之前寫的。
你可以通過 Preferences -> Package Settings -> JsFormat -> Settings - User 來設定你想要的程式碼格式。
4. DocBlockr
為你的程式碼新增註釋通常是件非常痛苦的事情。我不知道多少人會享受這個過程,但它卻是必須的。DocBlockr 通過把註釋變得簡單來減少這個痛苦。安裝完 DocBlockr 之後,你需要做的只是在新的一行輸入 /* 或者 /** ,它會為你完成剩下的。
DocBlockr 還支援很多其他語言:CoffeeScript, TypeScript, PHP, ActionScript, Haxe, Java, Apex, Groovy, Objective C, C, C++, and Rust。
5. SideBar Enhancements
Sublime Text 自帶的邊欄檔案操作選項非常的少。SideBarEnhancements 彌補了此缺點。值得注意的是,它為檔案和資料夾還提供了“move to trash”、“open with..”甚至還有剪下板選項。
6. AngularJS
它是有 Angular-UI 團隊開發的,可能是列表中比較偏大(但是是必須的)外掛,它的功能包括:
- AngularJS 核心指令的程式碼補全功能
- 自定義指令的指令完成
- directives, controllers and filters的快速搜尋
- Angular相關的程式碼片段
- GoToDocs for core AngularJS directives
7. TypeScript
由微軟支援,該外掛為 TypeScript 專案新增了程式碼補全、語法高亮、程式碼格式化以及擴充套件的導航功能。它還配備了一個構建系統,允許你把 TypeScript 編譯到 JavaScript。
可以用 Tools -> Build System 進入Bulid系統,然後開啟一個 .ts 結尾的檔案,然後選擇 Tools -> Build 或者直接按 Ctrl+B ,它會讓你輸入引數,直接就會在同一個目錄輸入JavaScript檔案。唯一的條件是需要 Node 支援。
8. Handlebars
如果你使用 Ember.js 或者僅僅把 Handlebars 作為模版語言,這款外掛都是必備的。如果沒有它,你最好把語法高亮關閉。
除了語法高亮,它還提供了各種表示式的標籤觸發器。例如輸入 x-temp 然後按 TAB 會生成:
1 |
<script type="text/x-handlebars" data-template-name=""></script> |
另外,如果輸入 ifel 然後按 TAB 怎生成:
1 2 3 4 5 |
{{#if }} {{else}} {{/if}}> |
非常的順手,對嗎?
該專案的主頁上有所有的程式碼片段列表。
9. Better CoffeeScript
Better CoffeeScript 是原 CoffeeScript-Sublime-Plugin 的 Fork,不幸的是原外掛似乎已經被作者廢棄,並且只支援Sublime Text 2。
該外掛為使用 CoffeeScript 的開發者提供很多必要的程式碼高亮,並且不至於此。它給 Sublime 增加了一些命令,如檢測語法的能力、編譯檔案、顯示編譯的JavaScript等。
你可以在該專案的主頁細讀它的各項設定與選項。
10. jQuery
我知道現在jQuery在很多地方都失寵了,但它依然是非常有用的,如果你不建立一個完全互動的網站,或者你只是想在一個現有的應用程式中新增功能。
例如輸入 $.a 然後選擇 $.ajax 就會生成下面的內容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$.ajax({ url: '/path/to/file', type: 'default GET (Other values: POST)', dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)', data: {param1: 'value1'}, }) .done(function() { console.log("success"); }) .fail(function() { console.log("error"); }) .always(function() { console.log("complete"); }); |
非常棒~
總結
這就是為你準備的JavaScript 開發者必備的10款 Sublime Text 外掛。我強烈建議你嘗試其中的一兩個,然後在評論中告訴我使用體驗。或者說我沒有列出某個你最喜歡的,也請在評論中給出,我可以考慮把它新增到列表中。
最後,請記住 Sublime Text 並不是免費的,它只是提供了一個無限期的試用版。單個許可證的價格是 $70 。如果你每天都在使用文字編輯器的話,這將是一個值得的投資。