关于开发工具:使用百度开发者工具-40-搭建专属的小程序-IDE

作者 | 星空

一、前言

百度开发者工具是百度智能小程序开放平台打造的一站式小程序研发工具，提供了编码、调试、测试、上传、项目管理等性能。以后最新稳固版本为 V3.59，可从百度智能小程序官网网址下载，正在研发下一个大版本为百度开发者工具 4.0  版本(以下简称：4.0)，上面将从 4.0 介绍、4.0 整体设计思路、迁徙本地的 VSCode 开发环境到 4.0 上、编写插件并集成到 4.0 中，这几个方面来帮忙大家疾速理解 4.0 的新特色，上手搭建一个属于本人的小程序 IDE 环境；

如何疾速开发百度小程序

若是还不太理解百度小程序开发，这里先简略介绍一下如何疾速开发一个百度小程序：

第一步：下载百度开发者工具，若还没有注册过百度小程序，想尝试开发，能够后行应用小程序测试号进行开发体验，只是测试号在应用上有一些性能上的限度；若想残缺开发并公布则须要注册一个 APPID；

第二步：依据本身场景状况，疾速接入百度小程序

1、已有微信小程序，想转为百度小程序 => 关上百度开发者工具，应用工具中的『搬家』，可疾速迁徙为百度小程序。

2、想体验百度小程序的性能 => 关上百度开发者工具，抉择『页面模板』，可疾速生成一个具备残缺性能的百度小程序我的项目。

3、想间接进入百度小程序开发 => 关上百度开发者工具，抉择『我的我的项目』，可疾速生成一个空白的百度小程序我的项目。

具体操作链接可返回官网查看。

二、背景介绍

在应用现有开发者工具开发小程序过程中是否遇到过以下场景：

1、想在开发者工具中实现开发，但工具的开发环境与本人相熟的 IDE 环境配置相差较大，导致减少额定学习老本。

2、无丰盛的编辑器插件生态来辅助开发，导致开发不便捷。

从而大部分抉择在本人的 IDE 中开发，再将代码导入到开发者工具进行调试，过程较为繁琐。

为解决上述场景问题，为大家提供一致性的开发体验，咱们正在研发 4.0 版本，4.0 基于 VSCode（一款由微软开发且跨平台的收费源代码编辑器）做二次开发，次要蕴含以下几个新个性：

①优化开发体验，百度开发者工具全面兼容 VSCode, 反对更灵便的定制开发；

②反对微软插件市场，个性化配置更丰盛，扩展性更强（以后为白名单机制）；

③优化内存及首屏我的项目加载速度，性能更好，稳定性更高。

目前，4.0-beta 已在官网公布，大家能够返回官网进行下载，记得抉择『最新 Beta 版本（4.0-beta）』。

三、4.0 整体设计思路

4.0 之前

整体思路是基于 Electron 将整体分为 Main Process 和 Renderer Process 层；

在 Electron 之上设计了一套自有的插件机制和事件零碎，将所有的业务逻辑和开发者工具主体拆散；

开发者工具主体为各局部提供根底 Services，各外围模块和辅助模块基于 Services，均通过插件化、事件驱动的形式实现独立开发；

若内部有须要扩大也可基于这套插件机制和事件零碎新增 Renderer Extension；

最初，由开发者工具主体实现整体的组装。

4.0 之后

整体思路是将 VSCode 作为一个底层框架 Vender 引入到 IDE 中，下层的 IDE 通过新增一个 SWAN IDE API 模块来实现与 VSCode 的整合；原通过自有插件机制实现的模块改为以 VSCode 插件的形式来实现；

整体能够看到 IDE 将会分为 4 层：

①VSCode 层：新增开发者工具定制扩大点以及 SWAN IDE API 相干能力反对；

②SWAN IDE API 层：将扩大点包装成不同的 API 给下层开发者工具业务层应用；

③内置 VSCode 插件层：开发者工具底层业务层，搭建业务模块，调用 SWAN IDE API 实现和 IDE 框架交互；

④外置 VSCode 插件层：开发者工具下层业务，扩大开发者工具自定义插件 VSCode 插件。

此处，因为咱们的扩大须要做一些 UI 交互，须要在 IDE 根底上来做扩大，因而设计了 Widget 扩大点，除了能够间接集成 VSCode Extensions 之外，还新增了 IDE Extensions 的能力；与开发 VSCode Extensions 的惟一区别是新增封装了能够对 IDE 外围插件或主体进行扩大的 API 能力；大家能够依据需要状况自主扩大来构建本人的 小程序 IDE。

四、迁徙本地的 VSCode 开发环境到 4.0 上

第一步：插件搬迁

开发者工具编辑器侧栏：

① 百度开发者工具的现有能力，同 VSCode 性能

② 百度开发者工具定制的插件能力，次要为品质检测工具

③ 百度开发者工具 4.0 的新增能力，同 VSCode 性能

开发者工具插件装置：

依照 VSCode 装置形式在②中搜寻本人日常应用的插件并装置

通过搜寻 @builtin 可查看内置插件，通过搜寻 @recommended 可查看举荐插件，通过搜寻 @popular 可查看热门插件

因为百度开发者工具是基于 VSCode 1.63.2 版本进行的兼容以及预防装置过多插件影响性能，4.0 采纳了白名单机制来反对小程序开发罕用插件，因而目前暂不提供 VSCode 插件的全面搜寻，以下举荐几类罕用插件阐明，具体的内容项可间接在百度开发者工具内进行查看。

• 内置插件
• 百度小程序开发助手：百度小程序开发助手，反对 swan 文件的语法高亮、代码查看、智能提醒，swan api 代码补全，智能提醒；也能够间接在本人的 VSCode 中搜寻装置。
• 性能工具：百度小程序性能检测工具，能够用于日常开发时进行性能检测，并给出优化倡议后果，可帮忙开发时，实时晋升小程序的品质。
• 小程序诊断：百度小程序诊断工具，会在发包时自动检测你的小程序中可能存在的性能和异样问题，并给出优化倡议后果，可帮忙疾速在开发者工具中理解在线小程序的品质。
• 云函数本地调试：百度云函数本地调试工具，
• px to rpx：百度小程序单位转换工具，px 转 rpx。
• 罕用的 IDE 插件
• Code Spell Checker：帮忙发现代码中单词拼写错误。
• ESLint：检测可能存在的代码格调和品质问题。
• Prettier Formatter for Visual Studio Code：格式化可能存在的代码格调和品质问题，和 ESLint 搭配应用。
• GitLens：疾速查看代码提交记录。

第二步：布局迁徙

将模拟器切换至右侧地位让开发时更聚焦；如果是集中开发能够将 模拟器暗藏。

切换主题色，换成本人喜爱的色系和主题。

第三步：配置项定义

cmd + shift + p 拷贝你的设置 \`settings.json\`。

第四步：快捷键定义

罕用开发以及小程序性能快捷键反对自定义。

疾速迁徙本人编辑器的快捷键

五、编写一个插件并集成到 4.0 中

插件的开发与惯例开发 VSCode 步骤一样，仅须要留神的是因为有白名单机制的状况，因而若想共享给别人应用，则须要『为本人的插件 ID 申请白名单』，具体开发步骤：

第一步：依照 VSCode 插件模式编写插件

npm install -g yo generator-code
yo code

第二步：打包成 VSIX 插件，装置到百度开发者工具中，进行功能测试

“ 从 VSIX 装置 ”，装置到百度开发者工具中，进行功能测试。

若仅供本人应用，测试胜利，则间接这样导入即可，若想共享给别人应用，则持续往下步骤操作。

第三步：公布到微软插件市场

第四步：插件 ID 申请白名单

因为目前工具为 beta 版，暂不凋谢插件申请入口，大家能够在社区贴 (https://smartprogram.baidu.co…) 上评论留言申请本人开发的插件 ID 入百度开发者工具白名单，也欢送举荐本人感觉好用的 VSCode 插件项，咱们将定期对开发者工具中的 VSCode 插件做更新。

六、心得总结

以上是 4.0 的根本状况介绍，在这次 4.0 降级过程中的一些心得总结。

技术摸索上

VSCode 开源版代码量宏大，在基于 VSCode 二次开发之前理解 VSCode 源码的根本组织构造以及设计思路是极为重要的。4.0 在最后设计时，对于 IDE 和 VSCode 交融对了两种计划的试验；第一种是将整个 IDE 集成到 VSCode 外面、第二种是 将 VSCode 作为一个底层依赖引入到现有 IDE 中，在 IDE 中做整合；思考到现有开发者工具的形成以及 VSCode 上手老本，最终抉择第二种计划，基于 VSCode 外部扩大点减少了开发者工具的工具栏、模拟器、调试器等模块，凋谢一部分 VSCode API 能力给工具下层应用，尽量应用扩大点的形式减少新性能，对源代码改变较小，不便当前的迭代降级。

工具应用上

基于 VSCode 二次开发是开发者工具转型的阶段方向，心愿可能帮忙大家进一步更便捷的开发小程序，开发者工具更多更残缺的教程材料可返回小程序官网进行查看。

若是想在本人相熟的 IDE 中实现开发，比方间接在 VSCode 中搭建残缺的小程序开发环境，也能够基于 VSCode + CLI 来进行配置，具体操作详见百度开发者工具提供的命令行工具 swan-toolkit。

还有，很多很好玩的配置，大家能够一起来玩，解锁新玩法 ~

七、附(相干链接)

• 开发者工具下载地址：

  https://smartprogram.baidu.co…

• 开发者工具命令行工具：

  https://smartprogram.baidu.co…

• 小程序疾速入门具体操作步骤：

  https://smartprogram.baidu.co…

• VSCode 插件开发脚手架：

  https://github.com/Microsoft/…

• VSCode 插件开发官网教程：

  https://code.visualstudio.com…

• VSCode 插件最简 DEMO 示例：

  https://github.com/Microsoft/…

• 配置文件阐明(package.json 里的字段含意)：

  https://code.visualstudio.com…

• VSCode 插件公布：

  https://code.visualstudio.com…

———-  END  ———-

举荐浏览【技术加油站】系列：

揭秘百度智能测试在测试主动执行畛域实际

H.265 编码原理入门

小程序启动性能优化实际

百度工程师教你玩转设计模式（单例模式）

百度程序员 Android 开发小技巧