使用百度开发者工具 4.0 搭建专属的小程序 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 之前

全体思路是根据 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 功用

开发者东西插件装置：

依照 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`。

第四步：快捷键定义

常用开发以及小程序功用快捷键支撑自定义。

快速搬迁自己编辑器的快捷键

插件的开发与惯例开发 VSCode 过程一样，仅需要留意的是因为有白名单机制的状况，因而若想共享给别人运用，则需要『为自己的插件 ID 申请白名单』，具体开发过程：

**步：依照 VSCode 插件形式编写插件

npm install -g yo generator-code

yo code

第二步：打包成 VSIX 插件，装置到百度开发者东西中，进行功用测验

“从 VSIX 装置”，装置到百度开发者东西中，进行功用测验。

若仅供自己运用，测验成功，则直接这样导入即可，若想共享给别人运用，则持续往下过程操作。

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

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

因为现在东西为 beta 版，暂不敞开插件申请进口，我们能够在社区贴(smartprogram.baidu.com/forum/topic… 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。

还有，很多很好玩的装备，我们能够一起来玩，解锁新玩法 ~

开发者东西下载地址：

smartprogram.baidu.com/docs/develo…

开发者东西命令行东西：

smartprogram.baidu.com/docs/develo…

小程序快速入门具体操作过程：

smartprogram.baidu.com/docs/develo…

VSCode 插件开发脚手架：

github.com/Microsoft/v…

VSCode 插件开发官方教程：

code.visualstudio.com/api/get-sta…

VSCode 插件最简 DEMO 示例：

github.com/Microsoft/v…

装备文件说明(package.json 里的字段意义)：

code.visualstudio.com/api/referen…

VSCode 插件发布：

code.visualstudio.com/api/working…

———- END ———-

引荐阅览【技能加油站】系列：

揭秘百度智能测验在测验自动履行范畴实践

H.265编码原理入门

小程序启动功用优化实践

百度工程师教你玩转规划形式（单例形式）

百度程序员Android开发小技巧