Ionic 移动开发入门与实战
上QQ阅读APP看书,第一时间看更新

2.4 安装开发工具Visual Studio Code(推荐)

在本节前面,读者根据开发机的操作系统,应该分别通过2.2或2.3的阅读和安装实验,完成了Ionic环境和硬件设备环境的安装调试,可以正式进入开发了。Ionic框架本身是开源项目,目前并没有专有的IDE开发环境用于开发。本节笔者推荐介绍适合使用Ionic进行跨平台移动App开发的免费代码工具Visual Studio Code供读者选用。

2.4.1 安装开发工具Visual Studio Code

Visual Studio Code是当前比较适合Ionic开发的跨平台(支持Windows、Linux、OSX)文本编辑器,它的优势在于其漂亮的用户界面、多窗口视图布局和强大的功能。其开发商Microsoft也开发了Ionic的主要编程语言TypeScript,所以用起来有很多方便之处。读者可以到其官方网站:https://code.visualstudio.com/根据开发机的操作系统下载安装,参见图2.42所示。

图2.42 Visual Studio Code官方网站下载页

Visual Studio Code被安装完毕后,读者可以启动它,尝试使用它打开任何目录,可以通过直接将文件夹拖入或者点击文件然后点击打开文件夹的方式打开项目,如图2.43所示。在这个欢迎使用界面,我们可以清晰地看到它的方便之处,可以直接打开文件夹,也可以自定义对于各种编程语言的支持,甚至可以根据用户对于其他软件的习惯安装键盘的快捷方式,对于颜色主题也可以进行自定义。在帮助模块也对于使用方法进行了指导,有兴趣的读者可以自行查阅。

图2.43 Visual Studio Code窗口布局

2.4.2 安装Ionic辅助编码插件

Visual Studio Code的扩展功能非常强大,可以直接进行搜索和安装,如图2.44所示。

图2.44 安装Visual Studio Code的Ionic扩展

为了方便Ionic的开发,读者可以自行选择当前最新并且评分比较高的扩展进行安装。点击安装等待完成后,点击重新加载即可。这些扩展主要包括了相关的代码提示等功能,可以方便我们进行开发,但并不是必需的。

在键盘上分别按下Ctrl+K、Ctrl+T(Mac上是Command+K、Command+T)可以进行主题颜色设置,也可以选择安装扩展的主题颜色、扩展的图标等,如图2.45所示。笔者为了图书印刷效果,选择了方便读者观看的浅色主题。

图2.45 Visual Studio Code的颜色主题