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

由葡萄城團隊發(fā)布在開源中國社區(qū)积瞒。轉(zhuǎn)載請注明出處：葡萄城官網(wǎng)

更多精彩內(nèi)容歡迎 Wechat：oschina2013

如今忙厌，Visual Studio Code無疑是最流行的輕量級代碼編輯器铃岔。它確實從其他代碼編輯器那借鑒了很多涉馁，最主要是從Sublime和Atom那里门岔。然而它的成功關(guān)鍵是源于能提供更好的性能和穩(wěn)定的表現(xiàn)。另外谨胞，它還提供了如代碼智能提示等開發(fā)者非常需要的功能固歪。而這些功能，曾經(jīng)只在像Eclipse或者Visual Studio 2017這樣的完整集成開發(fā)環(huán)境(IDEs)中才有胯努。

VS Code的強大無疑來自于它的插件市場牢裳。多虧了開源社區(qū)，VS Code現(xiàn)在幾乎對所有的編程語言叶沛、框架和開發(fā)技術(shù)都有支持蒲讯。提供這種支持的方式是多樣的，主要包括了為特定技術(shù)提供代碼片段灰署、語法高亮判帮、Emmet以及智能提示功能局嘁。

VS Code插件的種類

在本文，我主要介紹專門針對JavaScript開發(fā)者的VS Code插件晦墙。有很多滿足此條件的VS Code插件悦昵，當然我不會都作介紹。相反晌畅，我會著重介紹那些已經(jīng)相當流行而且對JavaScript開發(fā)者來說必不可少的VS Code插件但指。為簡單起見，我把它們分為10類抗楔。

在這之中可能有你已經(jīng)知道并且正在使用的插件棋凳，但也很有可能有一些是你聽說過但未曾使用過的，我也希望通過本文能為你簡要的介紹一下這些插件连躏。

1. 代碼片段插件

當你第一次安裝VS Code時剩岳，它會附帶一些JavaScript和TypeScript的代碼片段。在你開始上手現(xiàn)代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)工具橱脸。它強制團隊所有成員遵循特定的代碼規(guī)范础米。ESLint是最受歡迎的分苇，它支持許多代碼風格，包括Standard屁桑、Google和Airbnb的JavaScript代碼規(guī)范医寿。這里是最流行的VS Code代碼檢查插件：

ESLint：這個插件把ESLint集成到VS Code中。它是最流行的代碼檢測插件蘑斧，已有超過670萬下載量糟红。它的規(guī)則在.eslintrc.json里配置。

JSHint：基于JSHint的代碼檢測插件乌叶。在項目跟目錄下使用.jshintrc文件作為其配置。

JavaScript Standard Style：零配置和嚴格規(guī)則的代碼檢測柒爸，強制使用StandardJS規(guī)則准浴。

如果你想查看對各種代碼檢測優(yōu)缺點的綜述，可以來看看我們對代碼檢測工具的比較捎稚。

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沒有關(guān)系蒲凶，但是你肯定需要對本地文件的智能提示，這個插件會自動補全文件名拆内。

Node exec：允許你用Node執(zhí)行當前文件或者選中的代碼旋圆。

View Node Package：利用此插件可快速查看Node包源碼，讓你直接在VS Code中打開Node包的代碼庫或文檔麸恍。

Search node_modules：通常node_modules文件夾不在默認的搜索范圍內(nèi)灵巧，這個插件允許你搜索它。源碼：vscode-search-node-modules抹沪。

Import Cost：顯示導入的包的大小刻肄。源碼：import-cost。?

5. 代碼格式化插件

有時采够，你發(fā)現(xiàn)自己會對以前寫過的風格不太理想的代碼做格式整理肄方。為了節(jié)約時間，你可以安裝以下任何的VS Code插件蹬癌，來快速地格式化和重構(gòu)現(xiàn)有代碼：

Beatufy：一個jsBeautifier的插件权她，支持JavaScript虹茶、JSON、CSS和HTML隅要『铮可通過.jsbeautifyrc文件自定義。它是最流行的格式化工具步清，目前有230萬的下載量要门。

Prettier Code Formatter：利用Prettier的支持JavaScript、TypeScript和CSS的插件廓啊，目前有超過150萬的下載量欢搜。

JS Refactor：提供許多重構(gòu)JavaScript代碼的實用方法和操作，例如抽取變量和方法谴轮，把現(xiàn)有代碼轉(zhuǎn)為使用箭頭函數(shù)和模板字符串的等價形式炒瘟，導出函數(shù)等。

JavaScript Booster：一款了不起的代碼重構(gòu)工具第步。擁有需要代碼操作疮装，比如把var轉(zhuǎn)為const或者let，去除多余的else語句粘都，合并聲明和初始化廓推。其靈感大量源于WebStorm的啟發(fā)。源碼：vscode-javascript-booster翩隧。

6. 瀏覽器插件

除非你是在用JavaScript寫控制臺程序樊展，否則你多半會在瀏覽器中執(zhí)行你的JavaScript代碼。這意味著堆生，你會頻繁地刷新瀏覽器以觀察每次你更新代碼的效果滚局。這里有一些工具，能極大地減少你開發(fā)時的這種重復(fù)流程顽频，而不是每次都手動刷新瀏覽器：

Debugger for Chrome：在編輯器中打斷點藤肢，讓你輕松地在Chrome里調(diào)試JavaScript。源碼：vscode-chrome-debug糯景。?

Live Server：開啟本地開發(fā)時服務(wù)器嘁圈，為靜態(tài)和動態(tài)頁面提供實時刷新功能。源碼：vscode-chrome-debugvscode-live-server蟀淮。?

Preview on Web Server：提供web服務(wù)器和實時預(yù)覽功能最住。

PHP Server：對測試只能在客戶端運行的JavaScript代碼很有用。

Rest Client：相較于用瀏覽器或者一個CURL程序來測試你的REST API端點怠惶，你可以安裝這個工具涨缚，直接在編輯器里相互性地發(fā)HTTP請求。

7. 框架類插件

對于大多數(shù)項目策治，你會使用合適的框架去構(gòu)建你的代碼脓魏，以減少開發(fā)時間兰吟。VS Code通過插件對大多數(shù)主流框架都做了支持。然而茂翔，仍有一些特定框架沒有得到完全的支持混蔼。下面是一些提供了強大功能的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框架提供代碼智能提示弯洗、命令行工具和調(diào)試特性旅急。

Vetur：為Vue框架提供語法高亮、代碼片段牡整、Emmet藐吮、代碼檢測、智能提示和調(diào)試支持逃贝。它帶有很好的發(fā)布在GitBook上的文檔谣辞。

Ember：為Ember提供了命令行支持和智能提示。安裝完后沐扳，所有ember cli的命令可直接在VS Code自己的命令行列表中使用泥从。

Cordava Tools：支持Cordava插件和Ionic框架，提供基于Cordova的項目的智能提示沪摄、調(diào)試已經(jīng)其他特性的支持躯嫉。

jQuery Code Snippets：提供了超過130個jQuery的代碼片段，使用jq前綴來激活杨拐。

8. 測試類插件

測試是軟件開發(fā)中的關(guān)鍵環(huán)節(jié)祈餐，對于生產(chǎn)階段的項目來說更是如此。你可以通過閱讀我們的指南-JavaScript測試：單元測試 vs 功能測試 vs 集成測試-來獲得對JavaScript測試的一個概觀哄陶。這里有一些針對測試的VS Code插件：

Mocha sidebar：利用Mocha庫為項目提供單元測試帆阳。這個框架幫你直接在代碼里跑測試，把錯誤信息以裝飾器形式顯示出來屋吨。

ES Mocha Snippets：提供ES6語法的Mocha代碼片段蜒谤。這個插件的重點在于利用箭頭函數(shù)山宾，盡可能減少花括號的使用，保持代碼的緊湊芭逝∷担可通過設(shè)置允許使用分號。

Jasmine Code Snippets：針對Jasmine測試框架的代碼片段旬盯。

Protractor Snippets：針對Protractor端到端測試框架的代碼片段台妆。支持JavaScript和TypeScript。

Node TDD：為Node和JavaScript項目提供測試驅(qū)動開發(fā)的支持胖翰。能在源碼的更新后接剩，立即觸發(fā)自動化測試的構(gòu)建。源碼：node-tdd

9. 其他棒棒的插件

我把下一批VS Code的插件歸為"厲害的"(awesome)這一類萨咳，因為這個描述恰到好處懊缺。

Quokka.js：非常厲害的調(diào)試工具，為JavaScript提供了快速構(gòu)建原型的演練場培他，并且附帶有很好的文檔鹃两。

Paste as JSON：快速地將JSON數(shù)據(jù)轉(zhuǎn)為JavaScript代碼。源碼：quick-type舀凛。?

Code Metrics：這是另一個非常棒的插件俊扳，計算JavaScript和TypeScript代碼中復(fù)雜度。源碼：codemetrics猛遍。?

10. 插件包

現(xiàn)在我們來到了最后一類馋记，我想讓你知道，VS Code市場有有一個插件包的分類懊烤。本質(zhì)上梯醒，它們是相關(guān)聯(lián)的一些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開發(fā)的插件峡捡。

SpreadJS純前端表格組件：可嵌入你系統(tǒng)的在線Excel击碗，功能布局與 Excel 高度類似，完全兼容 Excel 的 450 種公式和 92 種圖表们拙。

總結(jié)

VS Code擁有大量的高質(zhì)量插件稍途，這讓它在JavaScript開發(fā)者群體中廣受歡迎。寫JavaScript代碼砚婆，再沒有比現(xiàn)在更容易了械拍。

像ESLint這樣的插件，幫助你避免代碼中的常見錯誤装盯；Debugger for Chrome坷虑，幫助你更容易地調(diào)試代碼；帶有智能提示的Node.js插件幫助你正確引用模塊埂奈；像Live Server和REST client這樣的可用工具迄损，讓你在完成工作時減少了對外部工具的依賴挥转；再比如SpreadJS純前端表格控件共屈，讓在線Excel嵌入您的應(yīng)用。所有這些工具拗引，都極大地加快了你的迭代流程。

我希望這些列表讓你接觸到新的VS Code插件矾削，對你的工作流程有幫助。