Cordova in VisualStudio Code

编者语：这几年都在跨平台移动开发中努力，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当中

{
test: /\.js$/,
loader: 'strip-sourcemap'
}

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

最新文章

热门文章