使用 VSCode 高效开发 ionic

《使用 VSCode 高效开发 ionic》 VSCode

刚开始开发 ionic 的时候,用的是别的工具。后来发现了 VSCode 这个编辑器,发现相当好用,果断给新接触 ionic 的朋友们安利一波。工具这种东西,只要能提高我们的效率,就果断上。

介绍

Visual Studio Code 是微软开发的编辑器,界面简洁漂亮、功能的可扩展性比较强。Ionic的主要编程语言TypeScript 也是由微软开发的,所以在语言支持上也有不少方便之处,而且编辑器相较于 IDE 一般资源占用低、软件占空间较小。

安装

Visual Studio Code
进官网直接点 Download 即可,同时支持 Mac、Windows、Linux。安装过程不难,不再赘述。编辑器的好处就是

插件安装

《使用 VSCode 高效开发 ionic》 插件下载

这里是重点,我们点击左侧最下面的按钮,寻找自己想要的插件,点击安装,再点击重新加载即可使用。插件的种类比较多,有代码提示、代码格式化、代码检查等。

搜索后,在插件的详情里可以看到该插件的下载人数,评价星级等。我们直接搜索 ionic,选一些评价较好的进行下载即可。觉得暗色不好看换颜色的话可以使用Ctrl+K、Ctrl+T(Mac上是Command+K、Command+T)进行主题颜色设置,也可以选择安装扩展的主题颜色、扩展的图标等。

《使用 VSCode 高效开发 ionic》 主题色选择

使用技巧

重点中的重点。

  1. 使用插件实现 ionic 代码提示

    《使用 VSCode 高效开发 ionic》 代码提示

  2. 使用插件实现代码自动审查
    ionic 使用的是 TypeScript,在插件中寻找 TSLint 即可。审查规则在一定程度上可以自定义,好的审查可以有效避免一些潜在错误。

  3. 自动 import 其他文件
    会自动根据文件所在目录 import,不过有时候路径会错,需要手动改。

    《使用 VSCode 高效开发 ionic》 自动引入

  4. 代码格式化
    Alt + Shift + F,瞬间让你的代码看起来干净整洁。

  5. Control + ` 可以直接在本目录下打开命令行
    按下快捷键后,会在底部弹出命令行。加号可以新建更多的命令行,垃圾箱是关闭,叉号是隐藏。所以以后可以不需要新打开一个命令行窗口,直接在里面即可运行 ionic serve。

    《使用 VSCode 高效开发 ionic》 命令行

目前就是这么多,我如果发现新的技巧会在后面更新。

    原文作者:Snorlax丶
    原文地址: https://www.jianshu.com/p/a86743f33a25
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞