摘要： 好的代碼插件可以讓工作效率翻倍，心情也更加舒暢！
毫無疑問Visual Studio Code是最流量的輕量級代碼編輯器。它确實從其它代碼編輯器吸收了大量的概念，特别是Sublime Text和Atom。不過，它受歡迎的原因主要還是在于它的性能更好，并且十分穩定。另外，它還提供了我們最想要的原本隻能在那種複雜的大型IDE像Eclipse或者Visual Studio 2017裡面才有的智能代碼提示(IntelliSense)這樣的功能。
VS Code能夠如此強大還源自于它的插件市場。歸功于其開源社群，VS Code幾乎支援所有的程式設計語言、架構和開發技術。并且有各種各樣的支援方案，包括代碼片段(snippets)，文法高亮、Emmet和IntelliSense功能相關的技術。
在本文中，我專注于JavaScript開發者經常用到的插件。目前，針對JavaScript有非常多的VS Code插件，我也不可能面面俱到。是以，我會重點列出那些最流行的必不可少的插件。為了使本文更有條理，我将它們分門别類整理。
代碼片段(Snippet)插件
當你第一次安裝VS Code，它會提供基本的針對JavaScript/TypeScript的代碼片段支援。當你要從事更加前沿的開發的時候，你就需要一些額外的代碼片段插件來輔助你編寫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和其它BDD測試架構的代碼片段。
文法插件
VS Code自帶的針對JavaScript的文法高亮已經相當不錯。你可以安裝不同的主題來改變代碼的顔色。不過，如果你想要更好的可讀性，可以安裝代碼高亮插件。這裡有一些推薦：
- JavaScript Atom Grammar ：該插件将Visual Studio Code自帶的JavaScript文法替換成了Atom編輯器的版本。
- Babel JavaScript ：支援 ES201x JavaScript、React、FlowType和GraphQL代碼的文法高亮。
- DotENV ：如果你使用Node，你需要它。DotEnv提供
.env
代碼風格檢查插件
為了保證整個團隊代碼格式的一緻性，使用一個代碼風格檢查工具可以做到。ESLint是最流行的一個工具，因為它支援非常多的代碼風格，包括标準的、Google和Airbnb。下面列出一些推薦的插件：
- ESLint ：這個是最流行的代碼風格檢查插件，有超過670萬的安裝量。你可以在
.eslintrc.json
- JSHint ：JSHint的代碼風格檢查插件。在項目的根目錄下面，用
.jshintrcfile
- JavaScript Standard Style : 一個無需配置的自帶非常嚴格規則的代碼風格檢查插件。它強制要求你所有代碼要遵循标準規則。
- JSLint ：JSLint的代碼風格檢查插件。
如果你想要了解各個插件的優缺點，可以看看這篇部落格
JavaScript代碼風格檢查插件大評比。
Node插件
每一個JavaScript項目至少需要安裝一個Node包。這裡推薦一些針對Node的插件：
- npm ：使用
package.json
package.json
- Node.js Modules IntelliSense ：為JavaScript和TypeScript子產品自動補全import語句。
- Path IntelliSense ：雖然并不是真的和Node相關，這個插件可以自動補全檔案名，可以在輸入時對本地檔案進行智能提示。
- Node exec ：運作你執行目前的Node檔案或者選中的部分代碼。
- View Node Package ：通過此插件可以快速檢視一個Node包的源代碼。
- Node Readme ：快速打開npm封包檔。
- Search node_modules ：搜尋
node_modules
- Import Cost ：顯示引入的包的大小
代碼格式化插件
你也許會發現，有時後複制粘貼完一段代碼後，縮進的格式變亂，需要一行一行的調整十分麻煩。這個時候，你肯定想要一個代碼格式化工具。
- Beautify ：安裝量超過230萬，Beautify是 jsBeautifier 的插件，支援JavaScript、JSON、CSS和HTML一鍵格式化。
- Prettier Code Formatter ：安裝量超過150萬，支援JavaScript、TypeScript和CSS的格式化，使用 Prettier (一個深受大家喜愛的格式化插件)。
- JS Refactor ：提供了許多重構JavaScript 代碼的方法，例如提取代碼中的變量和方法，将函數轉換為使用箭頭函數或模闆字面量和将函數導出。
- JavaScript Booster ：一個非常棒的重構工具，比如将
var
const
let
else
浏覽器插件
除非你直接在控制台寫JavaScript代碼，大多數時候是在浏覽器中執行的。也就是說，每一次代碼更新，你都需要重新整理頁面來重寫載入代碼。如果一直手動操作，是很繁瑣的。我們可以用插件來替代。
- Debugger for Chrome ：你隻需要在代碼編輯器中設定斷點，在浏覽器中會在斷點處暫停。
- Live Server ：在本地開發環境中，實時重新加載(reload)頁面。
- Preview on Web Server ：提供web伺服器和實時預覽。
- PHP Server ：對于僅需要在用戶端運作JavaScript 代碼做測試非常有用。
- Rest Client ：你不需要使用浏覽器或則一個CURL程式來測試REST API，通過Rest Client可以在編輯器内互動式運作HTTP請求。
架構插件
對于大多數項目，為了節省開發時間，你往往會使用一個合适的開發架構來快速開發。在VS Code上，大多數架構都有相應的插件支援。但是依然有很多架構并沒有對應的插件。
- Angular 6 ：超過220萬的安裝量，支援TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。并且有172個Angular的代碼片段。
- Angular v5 snippets ：超過270萬的安裝量，提供 TypeScript、RxJS、HTML和Docker檔案的代碼片段。
- React Native/React/Redux snippets for es6/es7 ：為這些架構提供ES6/ES7文法的代碼片段。
- React Native Tools ：提供智能提示、指令行工具和Debugging功能。
- Vetur ：為Vue架構提供文法高亮、代碼片段、Emmet、格式化、代碼風格檢查、智能提示、調試幫助等。有非常詳細的文檔: vetur
- Ember ：為Ember提供指令工具和智能提示。安裝後，所有的
ember cli
- Cordova Tools ：為Cordova插件和Ionic架構提供支援。提供代碼智能提示、調試輔助以及其他特性。
- jQuery Code Snippets ：提供超過130個jQuery代碼片段。
測試插件
在軟體開發中，測試是必可不少的一個環節，特别是那些要上線到生産環境的項目。你可以看看我們這篇講測試的文章:
JavaScript Testing: Unit vs Functional vs Integration Tests。下面是一些流行的測試插件：
- Mocha sidebar ：使用Mocha庫來提供測試支援。使用該插件可以直接在代碼中運作測試并将提示錯誤。
- ES6 Mocha Snippets ：提供ES6文法的 Mocha代碼片段。充分利用箭頭函數，盡量不使用大括号來保持代碼的簡潔，可配置允許使用分号。
- Jasmine Code Snippets ：Jasmine測試架構的代碼片段。
- Protractor Snippets ：Protractor架構的端到端(end-to-end)測試片段，支援JavaScript和Typescript。
- Node TDD ：為Node和JavaScript項目提供test-driven development支援。在代碼更新的時候可以自動觸發代碼的測試。
10種JavaScript開發者必備的VS Code插件
其它很酷的插件
我把它們分類到
awesome
類别，是因為它們真的很酷。
- Quokka.js ：一個很棒的調試工具，可以為您正在編寫的代碼提供實時回報,能夠預覽變量的函數和計算值結果。請檢視文檔： 文檔
- Paste as JSON ：快速将JSON資料轉換為JavaScript代碼。
- Code Metrics ：這是一個用來計算JavaScript和TypeScript代碼複雜度的插件。
插件包
VS Code的插件市場有一個類型叫
。它實際上已一個互相關聯的插件的集合，友善一起安裝，協同使用。
- Nodejs Extension Pack ：包含了ESLint、npm、JavaScript(ES6)代碼片段、node_modules搜尋、NPM智能提示和檔案路徑智能提示。
- VS Code for Node.js – Development Pack ：NPM智能提示，ESLint，Chrome調試器，Code Metrics，Docker和導入包的開銷計算。
- Vue.js Extension Pack ：包含大約12個VS Code插件，有些在本文沒有提到，比如auto-rename-tag和auto-close-tag。
- Ionic Extesion Pack ：包含許多用于Ionic、Angular、RxJS、Cordova和HTML開發的插件。
結語
VS Code能夠如此流行的一個原因就是擁有大量的高品質插件。它前所未有的提高了編碼的效率。比如ESLint助你減少代碼失誤，Debugger for Chrome讓你更加友善去Debugging。Node.js的智能引入提示讓你可以讓你正确引入所需子產品，Live Server和 REST Client可以讓你省去頻繁切換到外部工具的麻煩。我希望今天介紹的這些插件可以幫助你提高工作效率。
版權聲明
轉載時請注明作者
以及本文位址：
https://blog.fundebug.com/2018/11/20/10-must-have-vs-code-extensions-for-javascript-developers/