ionic3之开发工具Visual Studio Code-yellowcong

Visual Studio Code(vscode),这货用来开发ionic,我也是从同事那个地方得来的,我都不晓得ionic用啥ide工具开发,在这个地方就简单讲讲vscode的语言设置,以及汉化设置。第一次配置debug环境后和nodejs的,需要重启一下电脑,让环境变量生效,让vscode识别到。第二点,调试需要依赖于chrom浏览器。

vscode下载地址

#官方地址
https://code.visualstudio.com/

#个人下载地址
http://yellowcong.qiniudn.com/VSCodeSetup-x64-1.20.1.exe

语言设置

由于俺是日语的很头疼啊,所以需要设定为英文或中文的

Ctrl+Shift+P

#搜索配置语言
Configure Language

ionic3之开发工具Visual Studio Code-yellowcong_第1张图片

修改语言配置

修改locale.json文件,配置为英文即可,然后重启vscode即可

{
    // VSCode の表示言語を定義します。
    // サポートされている言語の一覧については、https://go.microsoft.com/fwlink/?LinkId=761051 をご覧ください。
    // 値を変更するには VS Code の再起動が必要です。
    //"locale":"ja"
    //英文
    "locale":"en"
    //中文
    // "locale":"zh-CN"
}

修改后的结果

不知道为毛看到英文,都没有看到日语头疼。尴尬了
ionic3之开发工具Visual Studio Code-yellowcong_第2张图片

微软官方提供的语言参数

Display Language Locale
English (US) en
Simplified Chinese zh-CN
Traditional Chinese zh-TW
French fr
German de
Italian it
Japanese ja
Korean ko
Russian ru
Spanish es

Cordova Tools工具下载

1、搜索Cordova tools,添加

ionic3之开发工具Visual Studio Code-yellowcong_第3张图片

2、安装成功后,重新加载

安装成功,重新加载生效
ionic3之开发工具Visual Studio Code-yellowcong_第4张图片

打开项目

ionic3之开发工具Visual Studio Code-yellowcong_第5张图片

打开项目后的项目结构
ionic3之开发工具Visual Studio Code-yellowcong_第6张图片

debug测试

1、添加debug配置

ionic3之开发工具Visual Studio Code-yellowcong_第7张图片

2、选择环境为Cordova
ionic3之开发工具Visual Studio Code-yellowcong_第8张图片

3、修改默认的配置(launch.json)
里面修改Serve to the browser (ionic serve)这个配置默认的超时时间20000,改为了自己想要的时间。然后保存。

ionic3之开发工具Visual Studio Code-yellowcong_第9张图片

4、安装chrom浏览器
调试的时候,需要安装chrom浏览器,不然,就会报错,说找不到chrom浏览器。
这里写图片描述

下载地址
https://www.google.cn/chrome/

5、debug运行
在debug模式中,选择Serve to the browser (ionic serve),这个意思是通过web的方式来调试应用。
ionic3之开发工具Visual Studio Code-yellowcong_第10张图片

运行后结果
ionic3之开发工具Visual Studio Code-yellowcong_第11张图片

常见问题

‘ionic’ 不是内部或外部命令,也不是可运行的程序或批处理文件。

问题很奇怪啊,我直接在cmd里面可以跑,然而在 vscode中,却跑不了,据花疼了。这是环境变量在vscode中没有生效,我们重启一下电脑,就生效了。
这里写图片描述

查看path

我们在vs的终端这个地方,查看path,发现没有生效,重启电脑后,就好了
这里写图片描述

Can’t find Chrome - install

没有找到Chrome (google浏览器),我也懒得折腾,安装个chrom浏览器得了

Can't find Chrome - install it or set the "runtimeExecutable" field in the launch config.Error processing "launch": Error: Can't find Chrome - install it or set the "runtimeExecutable" field in the launch config.
    at launch.then (C:\Users\yellowcong\.vscode\extensions\vsmobile.cordova-tools-1.3.4\out\src\debugger\cordovaDebugAdapter.js:1000:39)
    at 
    at process._tickCallback (internal/process/next_tick.js:109:7)

ionic3之开发工具Visual Studio Code-yellowcong_第12张图片

参考文章

https://www.cnblogs.com/xbblogs/p/6973023.html
https://www.cnblogs.com/gaohao/p/7110780.html

你可能感兴趣的:(ionic)