10個前端開發必備的VS Code擴展（下）
覽器擴展
除非在 JavaScript 中編寫控制臺程序，否則您很可能在瀏覽器中執行 JavaScript 代碼。這意味著您需要經常刷新頁面，以查看每次代碼更新的效果。以下幾個工具可以顯著縮短迭代過程的開發時間，而不是一直手動執行此操作：
- Debugger for Chrome，作者：Microsoft。此擴展可超過 520 萬次安裝，允許您在 Chrome 中調試 JavaScript 代碼，或使用支持 Chrome 調試器協議的任何其他目標。如果你對使用這個擴展在VS Code中調試還比較陌生，可以查看VS Code and Chrome debugging tutorial這篇文章。
- Live Server，作者：Ritwick Dey。此擴展允許您啟動具有靜態和動態頁面實時重新加載功能的本地開發服務器。它至今有 4.6M+ 安裝量。
源: vscode-chrome-debugvscode-live-server
- Preview on Web Server，作者：YuichiNukiyama。這提供了 Web 服務器和 HTML 的實時預覽。可以從上下文菜單或編輯器菜單調用這些功能。它至今有 120k+ 安裝。
- PHP Server，作者：brapifra。專為 PHP 項目構建，它仍然可用于測試只需要運行在客戶端上的 JavaScript 代碼。迄今為止，它有 234k+ 的安裝量。
- Rest Client，作者：Huachao Mao。您可以安裝此工具以在編輯器中交互運行 HTTP 請求，而不是使用瀏覽器或 CURL 程序來測試 REST API 接口。迄今為止，它有 834k+ 安裝量。
框架擴展
對于大多數項目，您需要一個合適的框架來構建代碼并縮短開發時間。VS Code通過擴展支持大多數主要框架。然而，仍然有一些框架還沒有得到支持。下面是一些提供重要功能的 VS Code擴展。
- Angular Snippets (Version 9)，作者：John Papa。超過 170 萬次安裝，這是Angular開發人員中最流行的代碼段擴展。它為TypeScript，RxJS，HTML和Docker文件提供了Angular片段。在撰寫本文時，擴展已更新為支持Angular 9。
- Angular 8 Snippets – TypeScript, Html, Angular Material, ngRx, RxJS and Flex Layout，作者：Mikael Morlund。它具有Angular 2、4、5、6、7和8 Beta的代碼段。它支持Typescript，HTML，Angular Material ngRx，RxJS，PWA和Flex Layout。迄今為止，它包含242個Angular代碼片段，目前安裝量超過135萬。
- ES7 React/Redux/GraphQL/React-Native snippets，作者：dsznajder。迄今為止，安裝量已超過120萬，此擴展程序通過ES7語法為React，Redux和Graphql提供了JavaScript和TypeScript代碼片段。
- React Native Tools，作者：Microsoft。這為React Native項目提供了智能感知，命令和調試功能。迄今為止，它的安裝量已超過120萬。
- React-Native/React/Redux snippets for es6/es7，作者：EQuimper。這提供了ES6 / ES7語法中的片段，用于React，React Native，Redux和ES6 / ES7語法中的故事書。迄今為止，它已安裝371k +。
- Vetur，作者：Pine Wu。這為Vue框架提供了語法高亮，代碼段，Emmet，linting，格式化，智能感知和調試支持。它帶有在GitBook上發布的文檔。迄今為止，它的安裝量已超過420萬。
- Ember，作者：Felix Rieseberg。這給Embert提供了命令支持和智能感知。安裝后，可通過VS Code自己的命令列表使用所有ember cli命令。迄今為止，其安裝量已超過18k。
- Cordova Tools，作者：Microsoft。這提供了對Cordova插件和Ionic框架的支持，還為基于Cordova的項目提供了智能感知，調試和其他支持功能。迄今為止，其安裝量為272k +。
- jQuery Code Snippets，作者：Don Jayamanne。這提供了130多個jQuery代碼段。它由前綴jq激活，迄今已安裝700k +。
測試擴展
測試是軟件開發的關鍵部分，尤其是對于處于生產階段的項目而言。您可以全面了解JavaScript的測試，并詳細了解可在我們的指南“JavaScript Testing: Unit vs Functional vs Integration Tests”中運行的各種測試。這是一些流行的VS Code擴展，用于測試。
- Mocha sidebar，作者：maty。這為使用Mocha庫進行測試提供了支持。此擴展幫助您直接在代碼上運行測試，并將錯誤顯示為修飾符。迄今為止，已安裝68k +。請注意，在編寫本文時，此擴展名有許多未解決的問題。
- ES6 Mocha Snippets，作者：Cory Noonan。這提供了E6語法中的Mocha代碼。此擴展的重點是保持代碼的整潔。它可以配置為允許分號，并且到目前為止有 36k+ 安裝。
- Jasmine Code Snippets，作者：Charalampos Karypidis。這為Jasmine測試框架提供代碼片段。到目前為止有30k+安裝量。遺憾的是，此擴展在撰寫本文時未進行更新。
- Protractor Snippets，作者：Budi Irawan。這為 Protractor 框架提供了端到端的測試代碼段。它同時支持 JavaScript 和 Typescript，并且至今有 18k+ 安裝。
- Node TDD，作者：Prashant Tiwari。這為Node和 JavaScript 項目的測試驅動開發提供了支持。每當更新源時，它都可以觸發自動測試打包。到目前為止，它有 23k+ 安裝。
具有特殊作用的擴展
我只是把下一批 VS Code擴展放入 "具有特殊作用" 類別， 因為這是最好地描述它們！
- Quokka.js，作者：Wallaby.js。一個令人敬畏的調試工具，為 JavaScript 代碼提供快速原型設計。它配備優秀的文檔，并具有超過 641k 安裝。
- Paste as JSON，作者：quicktype。這允許您快速將 JSON 數據轉換為 JavaScript 代碼，并且迄今為止的安裝量超過 43 萬次。
- Code Metrics，作者：Kiss Tamás。這是計算 JavaScript 和 TypeScript 代碼復雜性的另一個很棒的擴展。迄今為止，它已安裝超過 233k 次。
擴展包
現在，我們進入我們的最終類別，我只想讓你知道，VS Code市場有一個類別的擴展包。從本質上講，這些是捆綁在一個包中的相關 VS Code擴展的集合，便于安裝。下面是一些更好的：
- Nodejs Extension Pack，作者：Wade Anderson。此包包含 ESLint、npm、JavaScript （ES6） 代碼段、node_modules、NPM 智能感知和路徑智能感知。它擁有超過 293K 個安裝。
- VS Code for Node.js – Development Pack，作者：NodeSource。這一個有 NPM 智能感知， EsLint， Chrome 調試器， 代碼指標， Docker 和導入成本。迄今為止，它已安裝超過 103k 次。
- Vue.js Extension Pack，作者：Muhammad Ubaid Raza。這是 Vue 和 JavaScript 擴展的集合。它目前包含大約 12 個 VS Code擴展，其中一些尚未在這里提及，如auto-rename-tag 和auto-close-tag。迄今為止，它已安裝超過 156k 次。
- Ionic Extension Pack，作者：Loiane Groner。此包包含許多用于Ionic、Angular、RxJS、Cordova和 HTML 開發的 VS Code擴展。到目前為止，它大約有 75k 個安裝。
總結
VS Code 的大量特性擴展使它成為 JavaScript 開發人員的熱門選擇。高效編寫 JavaScript 代碼從未如此簡單。ESLint 等擴展可幫助您避免常見錯誤，而其他擴展（如 Chrome 調試器）可幫助您更輕松地調試代碼。Node.js擴展及其智能識別功能可幫助您正確導入模塊，并且 Live Server 和 REST 客戶端等工具的可用性減少了您依賴外部工具來完成您的工作。所有這些工具都使您的迭代過程更加容易。
我希望此列表介紹的 VS Code擴展可以對您的工作有所幫助。
本文由大前端學堂編譯出品，原文來自sitepoint，作者Michael Wanyoike，若轉載請注明出處，轉發感激不盡。
、Cordova插件安裝
Cordova是Apache的開源移動開發框架，允許使用標準的web開發技術js、css、html等開發跨平臺的移動應用。
# 查看已安裝cordova 插件。
> cordorva plugin list
安裝ionic-native-transaction 調用原生 頁面切換插件
https://github.com/shprink/ionic-native-transitions
> cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5
破網啊！直接安裝失敗！ (+__+)||| ，怎么辦？下載到本地再安裝吧！
瀏覽器直接訪問 安裝插件的github地址：
https://github.com/Telerik-Verified-Plugins/NativePageTransitions
看到插件地址：
http://plugins.telerik.com/plugin/native-page-transitions
下載插件到本地，在本地通過cordova命令安裝插件
靠，本地都失敗！ 可能是路徑中文件夾名有空格，剔除空格試試
OK，成功！
至此插件 ionic-native-transaction 安裝完畢，要使用此插件，需要引入js文件
ionic-native-transitions.js
js文件引入項目，并注入到module中
github:https://github.com/shprink/ionic-native-transitions
npm:https://www.npmjs.com/package/ionic-native-transitions
例子是介紹一個cordova插件的安裝過程，雖然現在cordova插件已經很豐富了，但也要良莠不齊，需要注意甄別，如果有定制的cordova插件需要，還是要自己開發的，后續文章會對自定義cordova插件的開發過程進行說明。
歡迎關注微信公眾號：jiagouyanjin（架構演進 全拼）
今，Visual Studio Code無疑是最流行的輕量級代碼編輯器。它確實從其他代碼編輯器那借鑒了很多，最主要是從Sublime和Atom那里。然而它的成功關鍵是源于能提供更好的性能和穩定的表現。另外，它還提供了如代碼智能提示等開發者非常需要的功能。而這些功能，曾經只在像Eclipse或者Visual Studio 2017這樣的完整集成開發環境(IDEs)中才有。
VS Code的強大無疑來自于它的插件市場。多虧了開源社區，VS Code現在幾乎對所有的編程語言、框架和開發技術都有支持。提供這種支持的方式是多樣的，主要包括了為特定技術提供代碼片段、語法高亮、Emmet以及智能提示功能。
VS Code插件的種類
在這之中可能有你已經知道并且正在使用的插件，但也很有可能有一些是你聽說過但未曾使用過的，我也希望通過本文能為你簡要的介紹一下這些插件。
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開發的插件。
總結
VS Code擁有大量的高質量插件，這讓它在JavaScript開發者群體中廣受歡迎。寫JavaScript代碼，再沒有比現在更容易了。
編程是一種修行，我愿與志同道合的朋友攜手前行，一起探索有關編程的奧妙！
如果您在前端學習的過程中遇到難題，歡迎【關注】并【私信】我，大家一起交流解決！
