作為JavaScript開發人員，這些必備的VS Code外掛程式你都用過嗎？

本文翻譯自：www.sitepoint.com/vs-code-extensions-javascript-developers/

請註明出處：葡萄城官網，葡萄城為開發人員提供專業的開發工具、解決方案和服務，賦能開發人員。

如今，Visual Studio Code無疑是最流行的輕量級代碼編輯器。它確實從其他代碼編輯器那借鑒了很多，最主要是從Sublime和Atom那裡。然而它的成功關鍵是源於能提供更好的效能和穩定的表現。另外，它還提供了如代碼智能提示等開發人員非常需要的功能。而這些功能，曾經只在像Eclipse或者Visual Studio 2017這樣的完整整合式開發環境(IDEs)中才有。

VS Code的強大無疑來自於它的外掛程式市場。多虧了開源社區，VS Code現在幾乎對所有的程式設計語言、架構和開發技術都有支援。提供這種支援的方式是多樣的，主要包括了為特定技術提供程式碼片段、文法高亮、Emmet以及智能提示功能。

VS Code外掛程式的種類

在本文，我主要介紹專門針對JavaScript開發人員的VS Code外掛程式。有很多滿足此條件的VS Code外掛程式，當然我不會都作介紹。相反，我會著重介紹那些已經相當流行而且對JavaScript開發人員來說必不可少的VS Code外掛程式。為簡單起見，我把它們分為10類。

在這之中可能有你已經知道並且正在使用的外掛程式，但也很有可能有一些是你聽說過但未曾使用過的，我也希望通過本文能為你簡要的介紹一下這些外掛程式。

1. 程式碼片段外掛程式

當你第一次安裝VS Code時，它會附帶一些JavaScript和TypeScript的程式碼片段。在你開始上手現代JavaScript之前，你將需要一些額外的程式碼片段來協助你快速地編寫ES6/ES7代碼：

• VS Code JavaScript(ES6) snippets：當前最流行的，已有超過120萬的下載量。這個外掛程式為JavaScript、TypeScript、HTML、React和Vue提供了ES6的文法支援。
• JavaScript Snippet Pack：提供了有用的JavaScript程式碼片段集合。（這個連結打不開了）
• Atom JavaScript Snippet：移植自Atom的JavaScript外掛程式。
• JavaScript Snippets：提供了ES6程式碼片段的集合。它包含對Mocha、Jasmine等其他BBD(Behavior-Driven Development)測試架構的支援。

2. 文法高亮外掛程式

VS Code內建很好的JavaScript代碼文法高亮。你可以通過安裝主題改變這些顏色。然而，如果你想要更高水平的可讀性，就得安裝文法高亮的外掛程式了。這裡有一些：

• JavaScript Atom Grammar：它用Atom編輯器裡的JavaScript文法高亮替換VS Code原來的。
• Babel JavaScript：支援ES201X、React、FlowType以及GraphQL的文法高亮。
• DotENV：支援.env檔案文法高亮，在你使用Node時會非常有用。

3. 代碼檢測外掛程式

以最小的煩惱高效編寫JavaScript代碼，需要一個代碼檢測(linter)工具。它強制團隊所有成員遵循特定的代碼規範。ESLint是最受歡迎的，它支援許多代碼風格，包括Standard、Google和Airbnb的JavaScript代碼規範。這裡是最流行的VS Code代碼檢查外掛程式：

• ESLint：這個外掛程式把ESLint整合到VS Code中。它是最流行的代碼檢測外掛程式，已有超過670萬下載量。它的規則在.eslintrc.json裡配置。
• JSHint：基於JSHint的代碼檢測外掛程式。在項目跟目錄下使用.jshintrc檔案作為其配置。
• JavaScript Standard Style：零配置和嚴格規則的代碼檢測，強制使用StandardJS規則。

如果你想查看對各種代碼檢測優缺點的綜述，可以來看看我們對代碼偵查工具的比較。

4. Node外掛程式

每一個JavaScript項目都需要至少一個Node package，除非你是那種喜歡以艱難的方式做事的人。這裡有一些VS Code外掛程式，能幫你更容易的處理Node模組。

• npm：用package.json來校正安裝的npm包，確保安裝包的版本正確，對缺少package.json檔案的包或者未安裝的包給出高亮提示。
• Node.js Modules IntelliSense：提供JavaScript和TypeScript匯入聲明時的自動補全。源碼：vscode-node-module-intellisense。 

　　

• Path IntelliSense：它其實與Node沒有關係，但是你肯定需要對本地檔案的智能提示，這個外掛程式會自動補全檔案名稱。
• Node exec：允許你用Node執行當前檔案或者選中的代碼。
• View Node Package：利用此外掛程式可快速查看Node包源碼，讓你直接在VS Code中開啟Node包的程式碼程式庫或文檔。
• Search node_modules：通常node_modules檔案夾不在預設的搜尋範圍內，這個外掛程式允許你搜尋它。源碼：vscode-search-node-modules。

　　

• Import Cost：顯示匯入的包的大小。源碼：import-cost。 

　　

5. 代碼格式化外掛程式

有時，你發現自己會對以前寫過的風格不太理想的代碼做格式整理。為了節約時間，你可以安裝以下任何的VS Code外掛程式，來快速地格式化和重構現有代碼：

• Beatufy：一個jsBeautifier的外掛程式，支援JavaScript、JSON、CSS和HTML。可通過.jsbeautifyrc檔案自訂。它是最流行的格式化工具，目前有230萬的下載量。
• Prettier Code Formatter：利用Prettier的支援JavaScript、TypeScript和CSS的外掛程式，目前有超過150萬的下載量。
• JS Refactor：提供許多重構JavaScript代碼的實用方法和操作，例如抽取變數和方法，把現有代碼轉為使用箭頭函數和模板字串的等價形式，匯出函數等。
• JavaScript Booster：一款了不起的代碼重構工具。擁有需要代碼操作，比如把var轉為const或者let，去除多餘的else語句，合并聲明和初始化。其靈感大量源於WebStorm的啟發。源碼：vscode-javascript-booster。

　　

6. 瀏覽器外掛程式

除非你是在用JavaScript寫控制台程式，否則你多半會在瀏覽器中執行你的JavaScript代碼。這意味著，你會頻繁地重新整理瀏覽器以觀察每次你更新代碼的效果。這裡有一些工具，能極大地減少你開發時的這種重複流程，而不是每次都手動重新整理瀏覽器：

 

• Debugger for Chrome：在編輯器中打斷點，讓你輕鬆地在Chrome裡調試JavaScript。源碼：vscode-chrome-debug。 

　　

• Live Server：開啟本地開發時伺服器，為靜態和動態網頁面提供即時重新整理功能。源碼：vscode-chrome-debugvscode-live-server。 

　　

• Preview on Web Server：提供web伺服器和即時預覽功能。
• PHP Server：對測試只能在用戶端啟動並執行JavaScript代碼很有用。
• Rest Client：相較於用瀏覽器或者一個CURL程式來測試你的REST API端點，你可以安裝這個工具，直接在編輯器裡相互性地發HTTP請求。

 

7. 架構類外掛程式

 

對於大多數項目，你會使用合適的架構去構建你的代碼，以減少開發時間。VS Code通過外掛程式對大多數主流架構都做了支援。然而，仍有一些特定架構沒有得到完全的支援。下面是一些提供了強大功能的VS Code外掛程式。

 

• Angular 6：提供Angular 6的程式碼片段，支援TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。目前有220多萬的下載量和172個Angular程式碼片段。
• Angular v5 snippets：提供針對TypeScript、RxJS、HTML和Docker檔案的程式碼片段。目前有270多萬的下載量。
• React Native/React/Redux snippets for es6/es7：提供對這些架構的ES6/ES7文法的程式碼片段。
• React Native Tools：為React Native架構提供代碼智能提示、命令列工具和調試特性。
• Vetur：為Vue架構提供文法高亮、程式碼片段、Emmet、代碼檢測、智能提示和調試支援。它帶有很好的發布在GitBook上的文檔。
• Ember：為Ember提供了命令列支援和智能提示。安裝完後，所有ember cli的命令可直接在VS Code自己的命令列列表中使用。
• Cordava Tools：支援Cordava外掛程式和Ionic架構，提供基於Cordova的項目的智能提示、調試已經其他特性的支援。
• jQuery Code Snippets：提供了超過130個jQuery的程式碼片段，使用jq首碼來啟用。

8. 測試類別外掛程式

測試是軟體開發中的關鍵環節，對於生產階段的項目來說更是如此。你可以通過閱讀我們的指南-JavaScript測試：單元測試 vs 功能測試 vs 整合測試-來獲得對JavaScript測試的一個概觀。這裡有一些針對測試的VS Code外掛程式：

• Mocha sidebar：利用Mocha庫為項目提供單元測試。這個架構幫你直接在代碼裡跑測試，把錯誤資訊以裝飾器形式顯示出來。
• ES Mocha Snippets：提供ES6文法的Mocha程式碼片段。這個外掛程式的重點在於利用箭頭函數，儘可能減少花括弧的使用，保持代碼的緊湊。可通過設定允許使用分號。
• Jasmine Code Snippets：針對Jasmine測試架構的程式碼片段。
• Protractor Snippets：針對Protractor端到端測試架構的程式碼片段。支援JavaScript和TypeScript。
• Node TDD：為Node和JavaScript項目提供測試驅動開發的支援。能在源碼的更新後，立即觸發自動化測試的構建。源碼：node-tdd

9. 其他棒棒的外掛程式

我把下一批VS Code的外掛程式歸為"厲害的"(awesome)這一類，因為這個描述恰到好處。

• Quokka.js：非常厲害的調試工具，為JavaScript提供了快速構建原型的演練場，並且附帶有很好的文檔。
• Paste as JSON：快速地將JSON資料轉為JavaScript代碼。源碼：quick-type。 

　　

• Code Metrics：這是另一個非常棒的外掛程式，計算JavaScript和TypeScript代碼中複雜度。源碼：codemetrics。 

　　

　　

　　

10. 外掛程式包

現在我們來到了最後一類，我想讓你知道，VS Code市場有有一個外掛程式包的分類。本質上，它們是相關聯的一些VS Code外掛程式的集合，打成一個包，方便安裝。這裡有些較好的：

• Nodejs Extension Pack：這個包裡有ESLint、npm、JavaScript(ES6) snippets、Search node_modules、NPM IntelliSense和Path IntelliSense。
• VS Code for Node.js - Development Pack：這個包含NPM IntelliSense、ESLint、Debugger for Chrome、Code Metrics、Docker和Import Cost。
• Vue.js Extension Pack：一些Vue和JavaScript外掛程式的集合。目前它含有12個VS Code的外掛程式，有一些之前我們沒有提到的，比如auto-rename-tag和auto-close-tag。
• Ionic Extesion Pack：這個包裡有針對Ionic、Angular、RxJS、Cordova和HTML開發的外掛程式。
• SpreadJS純前端表格組件：可嵌入你系統的線上Excel，功能布局與 Excel 高度類似，完全相容 Excel 的 450 種公式和 92 種圖表。

總結

VS Code擁有大量的高品質外掛程式，這讓它在JavaScript開發人員群體中廣受歡迎。寫JavaScript代碼，再沒有比現在更容易了。

像ESLint這樣的外掛程式，協助你避免代碼中的常見錯誤；Debugger for Chrome，協助你更容易地調試代碼；帶有智能提示的Node.js外掛程式協助你正確引用模組；像Live Server和REST client這樣的可用工具，讓你在完成工作時減少了對外部工具的依賴；再比如SpreadJS純前端表格控制項，讓線上Excel嵌入您的應用。所有這些工具，都極大地加快了你的迭代流程。

我希望這些列表讓你接觸到新的VS Code外掛程式，對你的工作流程有協助。