时隔4个月,500+star,鸿蒙ArkTS vscode插件1.x已发布🎉完全重构,补全、类型提示、SDK下载管理切换一应俱全,更多新功能正在规划中...

这篇文章呢,不是AI,没有使用任何AI工具进行撰写。AI敏感人士放心食用。

可以说这篇文章即是插件这几个月的CHANGELOG,也是我这几个月以来,在我身边发生的事情的总结,可以勉强称之为....月记吧(?)(因为我实在是养不成写日记的习惯,哈哈)

碎碎念:其实我觉得当下这么浮躁的社会里能静下来写长文就不错了😌(

4个月前我发布了一篇文章做了个vscode插件,可以用cursor写ArkTS鸿蒙项目了!, 现在已经更新到了1.x版本,整个从里到外完全重构,不过依旧基于volar之上构建。

4个月前200star左右,到了今天,这个项目目前已经有500+star了,实在是让人兴奋1🥰这几个月以来倒是发生了蛮多事儿的,也做了不止一个开源项目。理不清,我就想到啥说啥了😁

关于插件本身

插件本身现在已经从0.x版本更新到了1.x版本。在4月份的时候,我的微信收到了一个好友申请,这个人的微信名字叫十四。我通过请求之后,才知道他是为我这个ArkTS插件而来。

他给我带来了一个让我极其兴奋的消息,就是他在OpenHarmony组织里发现了这个项目:openharmony/third_party_typescript,这是一个由OpenHarmony官方Fork的TypeScript,而它十有八九就是ArkTS的本体!

而该项目在npm上亦然有release发布,名叫ohos-typescript

但是,当时虽然知道了这个是ArkTS的本体,但是却不知道该如何使用它。一直到5月份的时候,Q群里加入了另外一个大佬三川,他和我一样,也是大学生。经过他锲而不舍不断搜罗网上的各种资料后,才让我们最终摸透了这个third_party_typescript仓库的具体用法。于是,我切了一个新的next分支,开始着手开发插件的1.x版本。

这个版本,将完全重构,结束以前0.x的时候,使用正则表达式不停地替换和增删volar的VirtualCode 的方式,实在是非常不准确,而且有一些几乎无法解决的bug;新版本,将直接采用ohos-typescript + volar插件的方式进行实现。

之后,三川一直活跃在QQ群里,促进了我进行更多功能的开发。最典型的比如SDK下载器

OpenHarmony SDK是有很多API版本的,比如有API10API11API12等等,目前最新的beta版SDK已经更新到API20了。因此,在华为官方的DevEco Studio这个鸿蒙专有的IDE的设置中有一个OpenHarmony SDK板块,专门用来管理不同版本的SDK。而这一块儿的功能,目前我已经实现了一个npm包:@arkts/sdk-downloader,封装了下面的一系列功能:

  • ↩️ 断点续传功能
  • ✅ ⬇ 下载进度tar解压进度zip解压进度跟踪
  • ✅ 🧵 支持HTTP/HTTPS
  • ✅ 🔗 支持取消下载
  • ✅ 🧹 下载完成后清理缓存目录 ✨
  • 👂 支持在下载、tar解压和zip解压时监听事件(内部使用的是mitt
  • ㊙️ 检查下载的tar.gz文件的SHA256

等等一系列功能。用法也很简单,使用下面的命令安装该SDK:

bash 复制代码
pnpm add @arkts/sdk-downloader

然后:

typescript 复制代码
import { createDownloader } from '@arkts/sdk-downloader'

const downloader = await createDownloader({
  url: {
    os: SdkOS.MacOS,
    version: SdkVersion.API15,
    arch: SdkArch.ARM,
  },
  cacheDir: 'target/.cache',
  targetDir: 'target',
  resumeDownload: true,
})

await downloader.startDownload(/** Override request options */)
await downloader.checkSha256()
await downloader.extractTar()
await downloader.extractZip()
await downloader.clean()

基本上一目了然。然后,我再将@arkts/sdk-downloader包用到了我的ArkTS VSCode插件上,现在只需要打开命令面板,搜索Install OpenHarmony SDK就能打开OpenHarmony SDK管理器,直接随意切换和下载API10~API20各个版本的SDK!

目前,这个@arkts/sdk-downloader除了可以通过API进行调用,还能:

  • 通过CLI进行下载SDK(内部使用的是egoist大佬写的cac,特别轻量✨)
  • 通过github actionsCI中直接使用(现在还没有做详细测试,不过这块儿应该是没有bug的😋)

另外,Windows系统下该库可能还存在一些bug,欢迎前往仓库提交issue反馈。

关于volar插件

0.x版本的插件要想实现类型提示、源码跳转等功能需要安装npm包@arkts/declarations,而1.x已经废弃了@arkts/declarations这个npm包,因为@arkts/declarations是固定了API12版本的,不灵活。

由于目前已经有SDK切换器了,所以1.x版本我们通过直接读取当前OpenHarmony SDK路径下的ets文件夹的.d.ts声明文件,这样就能做到灵活切换API版本。

有些人可能会好奇,既然有Fork版的TypeScript实现,为何我还是在1.x版本中使用了volar而不是直接使用tsserver呢?一个关键原因就是,我现在对ohos-typescript仍然有定制要求。比如:

  • 有issue称(虽然我自己早就知道了,哈哈)ArkTS的$$this语法ohos-typescript并没有提供支持,因此这里还需要使用volar插件进行VirtualCode替换一下;
  • TypeScript Plugin的支持。我现在需要屏蔽所有由TypeScript本身带来的、位于OpenHarmony SDK声明文件内的所有报错,并且使用我自己本身定制过的@arkts/language-server进行代理这些声明文件,就不会让其报错了;而且还能完美得到所有高亮跳转等功能。具体的技术细节我画了一个mermaid🧜图:
flowchart TD ETS-TS-PLUGIN["ETS TypeScript Plugin"] -->|"Using it in vscode extension package.json"| TS-LSP-PLUGIN["TypeScript Language Plugin"] VOLAR-LANG-PLUGIN["Volar Language Plugin"] --->|"Using it in"| ETS-LSP["ETS Language Server"] VOLAR-LANG-PLUGIN --->|"Using it in"| ETS-TS-PLUGIN TS-LSP-PLUGIN --- VSCODE-LSP-PLUGIN-INFO["Use volar to shield the library files located within the sdk (set snapshot to an empty function)"] LIB-FILE ---> TS-LSP-PLUGIN ETS-LSP --- ETS-LSP-INFO["Use the volar proxy .ets file to the ArkTS server and the files located under the SDK path."] ETS-LSP --->|"Proxy"| ETS-FILE[".ets file"] ETS-LSP --->|"Proxy"| TS-FILE[".ts file"] TS-FILE --- LIB-FILE["TypeScript Lib .d.ts file"] TS-FILE --- SDK-FILE["OpenHarmony SDK .d.ts file"] TS-FILE --- OTHER-FILE["Other file will be ignored"]

此图原issue地址:github.com/ohosvscode/...

HDC 2025

6月20日(好像是吧?有点忘了懒得去查了诶嘿😋)我参加了华为开发者大会HDC 2025,同时和前Apple watch上的腕上B站作者,现在腕上RSS鸿蒙版的作者闪电狮成功会师(都是带学生,激动😁)。他这次来HDC 2025,还受邀参加鸿蒙穿戴分论坛的演讲,以及自媒体的采访。

在穿戴分论坛上,他还帮忙宣传了我制作的插件,让这个ArkTS插件在线下也终于开始有知名度喽~

HDC 2025,我们还碰到有许多大佬,比如刚刚说的Q群里的三川当时就来了穿戴分论坛的现场帮我们捧场🎉😁

何刚总(华为终端BG首席执行官)在吃饭前发表了对穿戴生态合伙人的感谢致辞,那个时候有点激动了我都不知道说啥了😁和余大嘴一个级别的啊

我在HDC没空想你😘

热闹的各个体验区....

照片太多了,只能随便找几张贴这里,不能贴太多((

Electron,鸿蒙PC,vscode

时间来到七月份,Q群里的三川大佬经过彻夜研究,终于摸出了把electron应用适配到HarmonyOS Next PC的方法,并且创建了一个模版项目开源到了github。

仓库地址: github.com/ohosvscode/...

虽然目前该项目还存在一些问题,比如.node文件的编译问题等;但是如果不使用带.node扩展的依赖的话,已经是完全可以用的了!

同时,在8月份,我的ArkTS vscode插件发布1.x正式版的同时受三川的邀请,将此插件迁移到了Arkcode组织:github.com/ohosvscode 。都看到这里了,快帮忙点点关注啦~

这个组织呢,计划准备将围绕着Electronvscode鸿蒙PC等几样核心的keyword打转(当然不排除之后我们会扩到别的领域)。另外我们在gitcode上也会将github上的仓库同步过去:gitcode.com/ohosvscode

下一步?

现在还有好多事情要做。一些私人的项目就不提了,我现在计划想做、正在做的开源项目还有一些,都是戳到了我的痛点才想做的。比如说我一直想做一个插件化的、支持monorepo的、扩展性极强的、支持各种源(如npm啊,甚至是鸿蒙的ohpm,仓颉的cjpm等等)的可定制化的发版发包工具。

目前ArkTS插件使用的是changesets进行发版发包,他的工作流和结合changesets/action发包模式我很喜欢,但是遇到稍微复杂一点的场景,还是白搭,扩展性不够。另外,他的issuePR都相对滞后,实在是很难。

关于插件的话,现在还有一堆bug要修,一堆新feature要加呢...比如:

  • 一键hvigor编译,打包,通过hdc发送给模拟器调试
  • $$this问题修好
  • 目前性能可能会有些问题,可能得进一步优化策略

最后的最后,求帮忙点点star,帮忙多宣传宣传,谢谢各位老板!

相关推荐
界面开发小八哥32 分钟前
DevExtreme Angular UI控件更新:引入全新严格类型配置组件
前端·ui·界面控件·angular.js·devexpress
bitbitDown40 分钟前
重构缓存时踩的坑:注释了三行没用的代码却导致白屏
前端·javascript·vue.js
xiaopengbc44 分钟前
火狐(Mozilla Firefox)浏览器离线安装包下载
前端·javascript·firefox
用户016523844411 小时前
Webpack5 入门与实战,前端开发必备技能无密
前端
小高0071 小时前
🔥🔥🔥前端性能优化实战手册:从网络到运行时,一套可复制落地的清单
前端·javascript·面试
古夕1 小时前
my-first-ai-web_问题记录01:Next.js的App Router架构下的布局(Layout)使用
前端·javascript·react.js
Solon阿杰1 小时前
solon-flow基于bpmnJs的流程设计器
javascript·bpmn-js
Solon阿杰1 小时前
前端(react/vue)实现全景图片(360°)查看器
javascript·vue.js
杨超越luckly1 小时前
HTML应用指南:利用POST请求获取上海黄金交易所金价数据
前端·信息可视化·金融·html·黄金价格
郝学胜-神的一滴1 小时前
Three.js 材质系统深度解析
javascript·3d·游戏引擎·webgl·材质