、Cordova插件安裝

Cordova是Apache的開(kāi)源移動(dòng)開(kāi)發(fā)框架，允許使用標(biāo)準(zhǔn)的web開(kāi)發(fā)技術(shù)js、css、html等開(kāi)發(fā)跨平臺(tái)的移動(dòng)應(yīng)用。

# 查看已安裝cordova 插件。

> cordorva plugin list

安裝ionic-native-transaction 調(diào)用原生 頁(yè)面切換插件

https://github.com/shprink/ionic-native-transitions

> cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5

破網(wǎng)??！直接安裝失敗！ (+__+)||| ，怎么辦？下載到本地再安裝吧！

瀏覽器直接訪問(wèn) 安裝插件的github地址：

https://github.com/Telerik-Verified-Plugins/NativePageTransitions

看到插件地址：

http://plugins.telerik.com/plugin/native-page-transitions

下載插件到本地，在本地通過(guò)cordova命令安裝插件

靠，本地都失??！ 可能是路徑中文件夾名有空格，剔除空格試試

OK，成功！

至此插件 ionic-native-transaction 安裝完畢，要使用此插件，需要引入js文件

ionic-native-transitions.js

js文件引入項(xiàng)目，并注入到module中

github:https://github.com/shprink/ionic-native-transitions

npm:https://www.npmjs.com/package/ionic-native-transitions

例子是介紹一個(gè)cordova插件的安裝過(guò)程，雖然現(xiàn)在cordova插件已經(jīng)很豐富了，但也要良莠不齊，需要注意甄別，如果有定制的cordova插件需要，還是要自己開(kāi)發(fā)的，后續(xù)文章會(huì)對(duì)自定義cordova插件的開(kāi)發(fā)過(guò)程進(jìn)行說(shuō)明。

歡迎關(guān)注微信公眾號(hào)：jiagouyanjin（架構(gòu)演進(jìn) 全拼）

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

VS Code的強(qiáng)大無(wú)疑來(lái)自于它的插件市場(chǎng)。多虧了開(kāi)源社區(qū)，VS Code現(xiàn)在幾乎對(duì)所有的編程語(yǔ)言、框架和開(kāi)發(fā)技術(shù)都有支持。提供這種支持的方式是多樣的，主要包括了為特定技術(shù)提供代碼片段、語(yǔ)法高亮、Emmet以及智能提示功能。

VS Code插件的種類

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

1. 代碼片段插件

當(dāng)你第一次安裝VS Code時(shí)，它會(huì)附帶一些JavaScript和TypeScript的代碼片段。在你開(kāi)始上手現(xiàn)代JavaScript之前，你將需要一些額外的代碼片段來(lái)幫助你快速地編寫ES6/ES7代碼：

• VS Code JavaScript(ES6) snippets：當(dāng)前最流行的，已有超過(guò)120萬(wàn)的下載量。這個(gè)插件為JavaScript、TypeScript、HTML、React和Vue提供了ES6的語(yǔ)法支持。
• JavaScript Snippet Pack：提供了有用的JavaScript代碼片段集合。（這個(gè)鏈接打不開(kāi)了）
• Atom JavaScript Snippet：移植自Atom的JavaScript插件。
• JavaScript Snippets：提供了ES6代碼片段的集合。它包含對(duì)Mocha、Jasmine等其他BBD(Behavior-Driven Development)測(cè)試框架的支持。

2. 語(yǔ)法高亮插件

VS Code自帶很好的JavaScript代碼語(yǔ)法高亮。你可以通過(guò)安裝主題改變這些顏色。然而，如果你想要更高水平的可讀性，就得安裝語(yǔ)法高亮的插件了。這里有一些：

• JavaScript Atom Grammar：它用Atom編輯器里的JavaScript語(yǔ)法高亮替換VS Code原來(lái)的。
• Babel JavaScript：支持ES201X、React、FlowType以及GraphQL的語(yǔ)法高亮。
• DotENV：支持.env文件語(yǔ)法高亮，在你使用Node時(shí)會(huì)非常有用。

3. 代碼檢測(cè)插件

以最小的煩惱高效編寫JavaScript代碼，需要一個(gè)代碼檢測(cè)(linter)工具。它強(qiáng)制團(tuán)隊(duì)所有成員遵循特定的代碼規(guī)范。ESLint是最受歡迎的，它支持許多代碼風(fēng)格，包括Standard、Google和Airbnb的JavaScript代碼規(guī)范。這里是最流行的VS Code代碼檢查插件：

• ESLint：這個(gè)插件把ESLint集成到VS Code中。它是最流行的代碼檢測(cè)插件，已有超過(guò)670萬(wàn)下載量。它的規(guī)則在.eslintrc.json里配置。
• JSHint：基于JSHint的代碼檢測(cè)插件。在項(xiàng)目跟目錄下使用.jshintrc文件作為其配置。
• JavaScript Standard Style：零配置和嚴(yán)格規(guī)則的代碼檢測(cè)，強(qiáng)制使用StandardJS規(guī)則。

如果你想查看對(duì)各種代碼檢測(cè)優(yōu)缺點(diǎn)的綜述，可以來(lái)看看我們對(duì)代碼檢測(cè)工具的比較。

4. Node插件

每一個(gè)JavaScript項(xiàng)目都需要至少一個(gè)Node package，除非你是那種喜歡以艱難的方式做事的人。這里有一些VS Code插件，能幫你更容易的處理Node模塊。

• npm：用package.json來(lái)校驗(yàn)安裝的npm包，確保安裝包的版本正確，對(duì)缺少package.json文件的包或者未安裝的包給出高亮提示。
• Node.js Modules IntelliSense：提供JavaScript和TypeScript導(dǎo)入聲明時(shí)的自動(dòng)補(bǔ)全。源碼：vscode-node-module-intellisense。
• Path IntelliSense：它其實(shí)與Node沒(méi)有關(guān)系，但是你肯定需要對(duì)本地文件的智能提示，這個(gè)插件會(huì)自動(dòng)補(bǔ)全文件名。
• Node exec：允許你用Node執(zhí)行當(dāng)前文件或者選中的代碼。
• View Node Package：利用此插件可快速查看Node包源碼，讓你直接在VS Code中打開(kāi)Node包的代碼庫(kù)或文檔。
• Search node_modules：通常node_modules文件夾不在默認(rèn)的搜索范圍內(nèi)，這個(gè)插件允許你搜索它。源碼：vscode-search-node-modules。
• Import Cost：顯示導(dǎo)入的包的大小。源碼：import-cost。

5. 代碼格式化插件

有時(shí)，你發(fā)現(xiàn)自己會(huì)對(duì)以前寫過(guò)的風(fēng)格不太理想的代碼做格式整理。為了節(jié)約時(shí)間，你可以安裝以下任何的VS Code插件，來(lái)快速地格式化和重構(gòu)現(xiàn)有代碼：

• Beatufy：一個(gè)jsBeautifier的插件，支持JavaScript、JSON、CSS和HTML?？赏ㄟ^(guò).jsbeautifyrc文件自定義。它是最流行的格式化工具，目前有230萬(wàn)的下載量。
• Prettier Code Formatter：利用Prettier的支持JavaScript、TypeScript和CSS的插件，目前有超過(guò)150萬(wàn)的下載量。
• JS Refactor：提供許多重構(gòu)JavaScript代碼的實(shí)用方法和操作，例如抽取變量和方法，把現(xiàn)有代碼轉(zhuǎn)為使用箭頭函數(shù)和模板字符串的等價(jià)形式，導(dǎo)出函數(shù)等。
• JavaScript Booster：一款了不起的代碼重構(gòu)工具。擁有需要代碼操作，比如把var轉(zhuǎn)為const或者let，去除多余的else語(yǔ)句，合并聲明和初始化。其靈感大量源于WebStorm的啟發(fā)。源碼：vscode-javascript-booster。

6. 瀏覽器插件

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

• Debugger for Chrome：在編輯器中打斷點(diǎn)，讓你輕松地在Chrome里調(diào)試JavaScript。源碼：vscode-chrome-debug。
• Live Server：開(kāi)啟本地開(kāi)發(fā)時(shí)服務(wù)器，為靜態(tài)和動(dòng)態(tài)頁(yè)面提供實(shí)時(shí)刷新功能。源碼：vscode-chrome-debugvscode-live-server。
• Preview on Web Server：提供web服務(wù)器和實(shí)時(shí)預(yù)覽功能。
• PHP Server：對(duì)測(cè)試只能在客戶端運(yùn)行的JavaScript代碼很有用。
• Rest Client：相較于用瀏覽器或者一個(gè)CURL程序來(lái)測(cè)試你的REST API端點(diǎn)，你可以安裝這個(gè)工具，直接在編輯器里相互性地發(fā)HTTP請(qǐng)求。

7. 框架類插件

對(duì)于大多數(shù)項(xiàng)目，你會(huì)使用合適的框架去構(gòu)建你的代碼，以減少開(kāi)發(fā)時(shí)間。VS Code通過(guò)插件對(duì)大多數(shù)主流框架都做了支持。然而，仍有一些特定框架沒(méi)有得到完全的支持。下面是一些提供了強(qiáng)大功能的VS Code插件。

• Angular 6：提供Angular 6的代碼片段，支持TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。目前有220多萬(wàn)的下載量和172個(gè)Angular代碼片段。
• Angular v5 snippets：提供針對(duì)TypeScript、RxJS、HTML和Docker文件的代碼片段。目前有270多萬(wàn)的下載量。
• React Native/React/Redux snippets for es6/es7：提供對(duì)這些框架的ES6/ES7語(yǔ)法的代碼片段。
• React Native Tools：為React Native框架提供代碼智能提示、命令行工具和調(diào)試特性。
• Vetur：為Vue框架提供語(yǔ)法高亮、代碼片段、Emmet、代碼檢測(cè)、智能提示和調(diào)試支持。它帶有很好的發(fā)布在GitBook上的文檔。
• Ember：為Ember提供了命令行支持和智能提示。安裝完后，所有ember cli的命令可直接在VS Code自己的命令行列表中使用。
• Cordava Tools：支持Cordava插件和Ionic框架，提供基于Cordova的項(xiàng)目的智能提示、調(diào)試已經(jīng)其他特性的支持。
• jQuery Code Snippets：提供了超過(guò)130個(gè)jQuery的代碼片段，使用jq前綴來(lái)激活。

8. 測(cè)試類插件

測(cè)試是軟件開(kāi)發(fā)中的關(guān)鍵環(huán)節(jié)，對(duì)于生產(chǎn)階段的項(xiàng)目來(lái)說(shuō)更是如此。你可以通過(guò)閱讀我們的指南-JavaScript測(cè)試：?jiǎn)卧獪y(cè)試 vs 功能測(cè)試 vs 集成測(cè)試-來(lái)獲得對(duì)JavaScript測(cè)試的一個(gè)概觀。這里有一些針對(duì)測(cè)試的VS Code插件：

• Mocha sidebar：利用Mocha庫(kù)為項(xiàng)目提供單元測(cè)試。這個(gè)框架幫你直接在代碼里跑測(cè)試，把錯(cuò)誤信息以裝飾器形式顯示出來(lái)。
• ES Mocha Snippets：提供ES6語(yǔ)法的Mocha代碼片段。這個(gè)插件的重點(diǎn)在于利用箭頭函數(shù)，盡可能減少花括號(hào)的使用，保持代碼的緊湊?？赏ㄟ^(guò)設(shè)置允許使用分號(hào)。
• Jasmine Code Snippets：針對(duì)Jasmine測(cè)試框架的代碼片段。
• Protractor Snippets：針對(duì)Protractor端到端測(cè)試框架的代碼片段。支持JavaScript和TypeScript。
• Node TDD：為Node和JavaScript項(xiàng)目提供測(cè)試驅(qū)動(dòng)開(kāi)發(fā)的支持。能在源碼的更新后，立即觸發(fā)自動(dòng)化測(cè)試的構(gòu)建。源碼：node-tdd

9. 其他棒棒的插件

我把下一批VS Code的插件歸為”厲害的”(awesome)這一類，因?yàn)檫@個(gè)描述恰到好處。

• Quokka.js：非常厲害的調(diào)試工具，為JavaScript提供了快速構(gòu)建原型的演練場(chǎng)，并且附帶有很好的文檔。
• Paste as JSON：快速地將JSON數(shù)據(jù)轉(zhuǎn)為JavaScript代碼。源碼：quick-type。
• Code Metrics：這是另一個(gè)非常棒的插件，計(jì)算JavaScript和TypeScript代碼中復(fù)雜度。源碼：codemetrics。

10. 插件包

現(xiàn)在我們來(lái)到了最后一類，我想讓你知道，VS Code市場(chǎng)有有一個(gè)插件包的分類。本質(zhì)上，它們是相關(guān)聯(lián)的一些VS Code插件的集合，打成一個(gè)包，方便安裝。這里有些較好的：

• Nodejs Extension Pack：這個(gè)包里有ESLint、npm、JavaScript(ES6) snippets、Search node_modules、NPM IntelliSense和Path IntelliSense。
• VS Code for Node.js – Development Pack：這個(gè)包含NPM IntelliSense、ESLint、Debugger for Chrome、Code Metrics、Docker和Import Cost。
• Vue.js Extension Pack：一些Vue和JavaScript插件的集合。目前它含有12個(gè)VS Code的插件，有一些之前我們沒(méi)有提到的，比如auto-rename-tag和auto-close-tag。
• Ionic Extesion Pack：這個(gè)包里有針對(duì)Ionic、Angular、RxJS、Cordova和HTML開(kāi)發(fā)的插件。

總結(jié)

VS Code擁有大量的高質(zhì)量插件，這讓它在JavaScript開(kāi)發(fā)者群體中廣受歡迎。寫JavaScript代碼，再?zèng)]有比現(xiàn)在更容易了。

編程是一種修行，我愿與志同道合的朋友攜手前行，一起探索有關(guān)編程的奧妙！

如果您在前端學(xué)習(xí)的過(guò)程中遇到難題，歡迎【關(guān)注】并【私信】我，大家一起交流解決！