本文翻譯自：https://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外掛，對你的工作流程有幫助。