做爲JavaScript開發人員，這些必備的VS Code插件你都用過嗎？

現在，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插件，對你的工做流程有幫助。