编者语:这几年都在跨平台移动开发中努力,Xamarin/Cordova/RemObject都是业界比较通用的方案。而开发工具有Visual Studio /Xamarin/ Fire等。就在昨天微软发布并开源了Visual Studio Code 的Cordova开发工具,今天就和大家谈谈。

Visual Studio Code 快发布差不多一年了,在Connect 2015中已经开始支持各类型的插件。而新的一年,将会是Visual Studio Code 很重要的一年。新年开了个不错的头,就是Cordova的开发工具。这个工具支持Cordova的开发,调试,和相关插件的智能提示。我们就来看看几个功能。

1. 安装,在Mac上打开Visual Studio Code 按cmd+shift+p 使用ext install 进行安装

2. 编码,其实这个你就等于是有智能提示地写一些Cordova的支持。例如你添加一些插件,如相机等。

3. 你可以通过Visual Studio Code 快速编译你的Cordova项目 cmd+B

4. 可以方便在Debug中根据不同需要调用不同的运行环境

以上四点,你可以在Visual Studio Market 中找到 (https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools)

5. 代码调试,这个也得感谢微软Cordova的团队,他们帮我解决了在VS Code 上Ionic 2调试的问题。下面我分享给大家。

首先你必须对现在Ionic 2的webpack.config.js进行调整

a) 由于VS Code 的Cordova 插件是通过绑定source-map进行调试的 所以先安装

npm install source-map-loader strip-sourcemap-loader

b) 在webpack.config.js 中添加 devtool:'source-map' ,去生成app.bundle.js.map

c) 指定在调试期间,所对应的位置,在output添加devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]'

d) 在loaders最后设置一个,这个是告诉编译器都需要把所有js加载到sourcemap当中

  1. {
  2. test: /\.js$/,
  3. loader: 'strip-sourcemap'
  4. }

e) 切记这里不要用Cordova Build, 要用ionic build所以这里比较麻烦地需要在命令行运行,当然你可以通过设置Task去做

但这个我觉得还是命令行方便(我在这里还是花了不少时间,还是自己大意)

f) 在app.bundle.js设置对应的断点即可,我现在还没有办法去调试ts(这个估计是webpack的问题,但是我相信很快会有对应的               解决方案),但是可以直接调试ts生成的js文件,如图我在app.bundle.js设置了断点,当我在运行debug时就可以去到断点位                 置了。

Visual Studio Code 随着插件功能的加入,现在已经可以作为生产力工具了。我也已经把它作为生产力工具多时去完成云加端的开发。Cordova插件的推出为跨平台开发带来了不少推动作用,当然接下来我更期待的是ReactNative和Xamarin。

Cordova in VisualStudio Code的更多相关文章

  1. 使用 visualstudio code 编辑器调试执行在 homestead 环境中的 laravel 程序

    由于之前做 .net 开发比较熟悉 visualstudio,所以自 visualstudio code 发布后就一直在不同场合使用 vscode ,比如前端.node等等.最近在做 laravel ...

  2. ionic3 打包报错[ERROR] An error occurred while running cordova prepare (exit code 1):

    解决办法:删除并重新添加平台以使用以下命令解决问题: cordova platform rm ios cordova platform add ios 如果执行 ionic cordova build ...

  3. 使用VisualStudio或VisualStudio Code作为代码比较工具

    最近改了了几个还是用SVN托管的老项目,用的客户端是TortoiseSVN,本身这个工具比较好用,就是那个内置的比较文件差异的Diff工具太简陋了,由于TortoiseSVN支持第三方Diff查看器的 ...

  4. Docker最全教程之使用 Visual Studio Code玩转Docker(二十)

    前言 VS Code是一个年轻的编辑器,但是确实是非常犀利.通过本篇,老司机带你使用VS Code玩转Docker——相信阅读本篇之后,无论是初学者还是老手,都可以非常方便的玩转Docker了!所谓是 ...

  5. 用 Visual Studio Code 调试运行在 homestead 环境中的 laravel 程序

    由于之前做 .net 开发比较熟悉 visualstudio,所以自 visualstudio code 发布后就一直在不同场合使用 vscode ,比如前端.node等等.最近在做 laravel ...

  6. VS Code(待补充)

    使用! 然后Tab  快速生成html文档结构 快速生成一个类   .类名  会有提示 .container.box .col-6*2 VisualStudio Code怎么同时编辑多处?

  7. Visual Studio Code + Docker

    前言 VS Code是一个年轻的编辑器,但是确实是非常犀利.通过本篇,老司机带你使用VS Code玩转Docker——相信阅读本篇之后,无论是初学者还是老手,都可以非常方便的玩转Docker了!所谓是 ...

  8. 2018 .NET开发者调查报告: .NET Core 是怎么样的状态

    4月28日,在公众号里发起<.NET Core 使用调查>,该调查为期一周,有近3300名开发者参与. 已经使用.net core  的人数只有44%,计划使用.net core 比例达到 ...

  9. 分享一个.NET平台开源免费跨平台的大数据分析框架.NET for Apache Spark

    今天早上六点半左右微信群里就看到张队发的关于.NET Spark大数据的链接https://devblogs.microsoft.com/dotnet/introducing-net-for-apac ...

随机推荐

  1. HDU1078记忆化搜索

    FatMouse and Cheese Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  2. 由一篇博文做出的代码,不用Math.round()如何实现其功能

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. Java中String的hash函数分析

    转载自:http://blog.csdn.net/hengyunabc/article/details/7198533 JDK6的源码: [java] view plaincopy /** * Ret ...

  4. UVA 1393 Highways

    https://vjudge.net/problem/UVA-1393 题意: a*b的点阵中能画多少条非水平非竖直的直线 方向‘/’ 和 方向 ‘\’ 对称 枚举直线所在矩形的i*j 直线可能重复的 ...

  5. Linux 使用代理使网速变快

    $ export http_proxy="http://USER:PASSWORD@PROXY_SERVER:PORT" $ export https_proxy="ht ...

  6. 【Dream Counting, 2006 Dec-数数的梦】数位dp

    题意:给定两个数,问区间[A,B]中0~9分别出现了多少次.A,B<=10^18 题解:应该是最裸的数位dp吧..一开始没有记忆化tle了TAT 我们可以求出区间[0,B]的,再减去区间[0,A ...

  7. Android检测View的可见性

    Android中我们经常会用到判断View的可见行,当然有人会说View.VISIBLE就可以了,但是有时候这个真是满足不了,有时候我们为了优化,在View滚到得不可见的时候或者由于滚到只显示了部分内 ...

  8. lua 闪电特效

    闪电特效 根据不同的起点 终点 资源做倾斜 拉伸 ,主要是计算倾斜角度. function ZyLight:show(params) local params = params or {} local ...

  9. 【洛谷 P4116】 Qtree3 (树链剖分)

    题目链接 树剖练手题,想复习下树剖. 第一次提交\(T\)成QQC 看我 ??? 看了数据范围的确挺恶心的,我的复杂度是\(O(Mlog^2N)\)的,数据范围有三段 For 1/3 of the t ...

  10. HTTPS加密通信原理及数字证书系统

    https加密通信原理: 公钥私钥成对,公钥公之于众,私钥只有自己知道. 用公钥加密的信息只能由与之相对应的私钥解密. 甲给乙发送数据时,甲先用乙的公钥加密这段数据,再用自己的私钥对这段数据的特征数据 ...