使用百度开发者工具 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整体设计思路
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.com/forum/topic/show/156624)上评论留言申请自己开发的插件 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.com/docs/develop/devtools/history/
开发者工具命令行工具：
https://smartprogram.baidu.com/docs/develop/devtools/commandtool/
小程序快速入门详细操作步骤：
https://smartprogram.baidu.com/docs/develop/tutorial/quickstart/
VSCode 插件开发脚手架：
https://github.com/Microsoft/vscode-generator-codeh
VSCode 插件开发官方教程：
https://code.visualstudio.com/api/get-started/your-first-extension
VSCode 插件最简 DEMO 示例：
https://github.com/Microsoft/vscode-extension-samples/tree/main/helloworld-sample
配置文件说明(package.json 里的字段含义)：
https://code.visualstudio.com/api/references/extension-manifest
VSCode 插件发布：
https://code.visualstudio.com/api/working-with-extensions/publishing-extension
---------- END ----------
推荐阅读【技术加油站】系列：
揭秘百度智能测试在测试自动执行领域实践
H.265编码原理入门
小程序启动性能优化实践
百度工程师教你玩转设计模式（单例模式）
百度程序员Android开发小技巧
使用百度开发者工具 4.0 搭建专属的小程序 IDE相关推荐
- 外卖优惠券返利系统外卖返利公众号搭建cps系统小程序SaaS源码
外卖优惠券返利系统外卖返利公众号搭建cps系统小程序SaaS源码 美团/饿了么外卖CPS联盟返利公众号小程序裂变核心源码 源代码地址 https://gitee.com/caonima008/coup ...
- 从0开始写一个小程序
项目简介 从0开始写一个小程序,本来想写一个新闻类的程序,后来发现调用的聚合数据api每天只能访问100次,就换成豆瓣的了,直接用豆瓣的接口又访问不了,在网上查了一下,要把豆瓣的地址换成"h ...
- 第一章搭建uni-app 记账小程序
前言: 这一季会涉及到的内容 <vue+flutter+.net core +golang+uni-app> 这一季的内容准备用5年的时间来积累完善,希望通过交流得到指点,感恩? 目录 ...
- java mvc 小程序_[Java教程]Spring MVC 的环境搭建和入门小程序
[Java教程]Spring MVC 的环境搭建和入门小程序 0 2017-02-17 00:00:16 1.1.下载spring框架包. 1.1.1百度搜索Spring Framework. 进入s ...
- 微信读书登陆界面java_（JAVA后端）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好...
转载地址:(JAVA后端)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好 转载请注明出处 一.环境搭建 相关环境软件:JDK1 ...
- 使用LINUX云服务器搭建web、小程序服务器MySql+Java+Tomcat
记小白第一次使用LINUX搭建web.小程序服务器 MySql+Java+Tomcat (很全的安装过程收集整合) 一.使用LINUX搭建服务器的原因 准备工具 二.下载配置 2.1 阿里云服务器的购 ...
- 「前端开发者」如何把握住「微信小程序」这波红利？
由于前两周一直在老家处理重要事情,虽然朋友圈被「微信小程序」刷爆了,但并没有时间深入了解. 昨天回广州之后,第一件事情就是把「微信小程序」相关的文章.开发文档.设计规范全部看了一遍,基本上明白了「微信 ...
- android 新闻小程序,微信安卓版7.0.12内测曝光 小程序被加强优化
中关村在线消息:最近,微信发布了最新的Android beta 7.0.12更新,修复了一些已知的问题.这次的Android测试版有32位和64位版本,但仍然没有暗黑模式.腾讯微信团队还向开发者发布了 ...
- 微信小程序教程（搭建简单的小程序示例）
微信小程序是一个挺神奇的存在,它的出现使app不是那么的友好了,还要下载还要更新,但是小程序就不是了,就内嵌在微信里,随时用,不用下载(其实就相当于加载到本地,不过占用内存很小),微信服务器一更新就好 ...
- （微信小程序）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好
转载地址:(微信小程序)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好 转载请注明出处 作者:Happy王子乐 个人网站(整理 ...
最新文章
- 为什么大部分人做不了架构师？
- 手机拍照软件for android1.6,RookieCam
- 为什么技术进步让我们越来越焦虑不安？
- 使用Spring框架的好处
- 计算是计算机科学独有的方法,大学计算机基础教学中的计算思维培养.doc
- jquery插件之无缝循环新闻列表
- jquery批量删除
- 嫌Python太慢了？让Cython带你飙车吧
- 英国帝国理工学院招聘研究助理，医学影像分析方向
- 帆软报表重要Activator之DesignerInitActivator之五EastRegionContainerPane设计器的属性面板
- 转css中文英文换行、禁止换行、显示省略号
- Kafka报错：Couldn't find leaders for Set
- Cocos2d-x应用：保存背景音乐和音效设置
- 会员积分系统应该设几个等级？
- GitHub中国区前100名到底是什么样的人？(转载)
- 互联网营销，不同阶层的人脉关系，对你真的有用吗？
- 计算机系统结构层次划分,网络的体系结构及其划分所遵循的原则
- 真没想到，vmware进入 bios设置 的方法是这样的
- gateway官网文档解读(六) 汇总
- CSS设置原生table表格边框样式（添加表格横线）（附最后表格td画斜线）