這些必備的VSCode JavaScript插件你都用過嗎？
瀏覽器插件
除非你是在用JavaScript寫控制檯程序，否則你多半會在瀏覽器中執行你的JavaScript代碼。這意味著，你會頻繁地刷新瀏覽器以觀察每次你更新代碼的效果。這裡有一些工具，能極大地減少你開發時的這種重複流程，而不是每次都手動刷新瀏覽器：
1. Debugger for Chrome（在編輯器中打斷點，讓你輕鬆地在Chrome裡調試JavaScript。源碼（vscode-chrome-debug。 ）
2. Live Server（開啟本地開發時服務器，為靜態和動態頁面提供實時刷新功能。源碼（vscode-chrome-debugvscode-live-server。）
這些必備的VSCode JavaScript插件你都用過嗎？
3. Preview on Web Server（提供web服務器和實時預覽功能。）
4. PHP Server（對測試只能在客戶端運行的JavaScript代碼很有用。）
5. Rest Client（相較於用瀏覽器或者一個CURL程序來測試你的REST API端點，你可以安裝這個工具，直接在編輯器裡相互性地發HTTP請求。）
框架類插件
對於大多數項目，你會使用合適的框架去構建你的代碼，以減少開發時間。VS Code通過插件對大多數主流框架都做了支持。然而，仍有一些特定框架沒有得到完全的支持。下面是一些提供了強大功能的VS Code插件。
1. Angular 6（提供Angular 6的代碼片段，支持TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。目前有220多萬的下載量和172個Angular代碼片段。）
2. Angular v5 snippets（提供針對TypeScript、RxJS、HTML和Docker文件的代碼片段。目前有270多萬的下載量。）
3. React Native/React/Redux snippets for es6/es7（提供對這些框架的ES6/ES7語法的代碼片段。）
4. React Native Tools（為React Native框架提供代碼智能提示、命令行工具和調試特性。）
5. Vetur（為Vue框架提供語法高亮、代碼片段、Emmet、代碼檢測、智能提示和調試支持。它帶有很好的發佈在GitBook上的文檔。）
6. Ember（為Ember提供了命令行支持和智能提示。安裝完後，所有ember cli的命令可直接在VS Code自己的命令行列表中使用。）
7. Cordava Tools（支持Cordava插件和Ionic框架，提供基於Cordova的項目的智能提示、調試已經其他特性的支持。）
8. jQuery Code Snippets（提供了超過130個jQuery的代碼片段，使用jq前綴來激活。）
測試類插件
測試是軟件開發中的關鍵環節，對於生產階段的項目來說更是如此。你可以通過閱讀我們的指南-JavaScript測試：單元測試 vs 功能測試 vs 集成測試-來獲得對JavaScript測試的一個概觀。這裡有一些針對測試的VS Code插件：
1. Mocha sidebar（利用Mocha庫為項目提供單元測試。這個框架幫你直接在代碼裡跑測試，把錯誤信息以裝飾器形式顯示出來。）
2. ES Mocha Snippets（提供ES6語法的Mocha代碼片段。這個插件的重點在於利用箭頭函數，儘可能減少花括號的使用，保持代碼的緊湊。可通過設置允許使用分號。）
3. Jasmine Code Snippets（針對Jasmine測試框架的代碼片段。）
4. Protractor Snippets（針對Protractor端到端測試框架的代碼片段。支持JavaScript和TypeScript。）
5. Node TDD（為Node和JavaScript項目提供測試驅動開發的支持。能在源碼的更新後，立即觸發自動化測試的構建。源碼：node-tdd）
其他
我把下一批VS Code的插件歸為"厲害的"(awesome)這一類，因為這個描述恰到好處。
1. Quokka.js（非常厲害的調試工具，為JavaScript提供了快速構建原型的演練場，並且附帶有很好的文檔。）
這些必備的VSCode JavaScript插件你都用過嗎？
2. Paste as JSON（快速地將JSON數據轉為JavaScript代碼。 ）
3. Code Metrics（這是另一個非常棒的插件，計算JavaScript和TypeScript代碼中複雜度。源碼：codemetrics。）
總結
VS Code擁有大量的高質量插件，這讓它在JavaScript開發者群體中廣受歡迎。寫JavaScript代碼，再沒有比現在更容易了。
閱讀更多 web秀 的文章
關鍵字: 編輯器 編程語言 JavaScript
