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_Chrome

修改语言配置

修改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_Chrome_02

微软官方提供的语言参数

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_下载地址_03

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

安装成功,重新加载生效

ionic3之开发工具Visual Studio Code-yellowcong_ionic_04

打开项目

ionic3之开发工具Visual Studio Code-yellowcong_ionic_05

打开项目后的项目结构

ionic3之开发工具Visual Studio Code-yellowcong_Chrome_06

debug测试

1、添加debug配置

ionic3之开发工具Visual Studio Code-yellowcong_ionic_07

2、选择环境为Cordova

ionic3之开发工具Visual Studio Code-yellowcong_重启_08

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

ionic3之开发工具Visual Studio Code-yellowcong_下载地址_09

4、安装chrom浏览器

调试的时候,需要安装chrom浏览器,不然,就会报错,说找不到chrom浏览器。

ionic3之开发工具Visual Studio Code-yellowcong_下载地址_10

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

5、debug运行

在debug模式中,选择Serve to the browser (ionic serve),这个意思是通过web的方式来调试应用。

ionic3之开发工具Visual Studio Code-yellowcong_ionic_11

运行后结果

ionic3之开发工具Visual Studio Code-yellowcong_ionic_12

常见问题

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

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

ionic3之开发工具Visual Studio Code-yellowcong_Chrome_13

查看path

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

ionic3之开发工具Visual Studio Code-yellowcong_下载地址_14

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 <anonymous>
    at process._tickCallback (internal/process/next_tick.js:109:7)

ionic3之开发工具Visual Studio Code-yellowcong_重启_15