网站导航
> 技术文档 > 时隔4个月，500+star，鸿蒙ArkTS vscode插件1.x已发布！完全重构，补全、类型提示、SDK下载管理切换一应俱全，更多新功能正在规划中..._鸿蒙next的vscode插件

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

网友: 技术文档 2025-09-03 13:07:42

这篇文章呢，不是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版本的，比如有API10、API11、API12等等，目前最新的beta版SDK已经更新到API20了。因此，在华为官方的DevEco Studio这个鸿蒙专有的IDE的设置中有一个OpenHarmony SDK板块，专门用来管理不同版本的SDK。而这一块儿的功能，目前我已经实现了一个npm包：@arkts/sdk-downloader，封装了下面的一系列功能：

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

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

pnpm add @arkts/sdk-downloader

然后：

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 actions在CI中直接使用（现在还没有做详细测试，不过这块儿应该是没有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🧜图：

#mermaid-svg-i5acrGztA8O6QMYX {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-i5acrGztA8O6QMYX .error-icon{fill:#552222;}#mermaid-svg-i5acrGztA8O6QMYX .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-i5acrGztA8O6QMYX .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-i5acrGztA8O6QMYX .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-i5acrGztA8O6QMYX .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-i5acrGztA8O6QMYX .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-i5acrGztA8O6QMYX .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-i5acrGztA8O6QMYX .marker{fill:#333333;stroke:#333333;}#mermaid-svg-i5acrGztA8O6QMYX .marker.cross{stroke:#333333;}#mermaid-svg-i5acrGztA8O6QMYX svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-i5acrGztA8O6QMYX .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-i5acrGztA8O6QMYX .cluster-label text{fill:#333;}#mermaid-svg-i5acrGztA8O6QMYX .cluster-label span{color:#333;}#mermaid-svg-i5acrGztA8O6QMYX .label text,#mermaid-svg-i5acrGztA8O6QMYX span{fill:#333;color:#333;}#mermaid-svg-i5acrGztA8O6QMYX .node rect,#mermaid-svg-i5acrGztA8O6QMYX .node circle,#mermaid-svg-i5acrGztA8O6QMYX .node ellipse,#mermaid-svg-i5acrGztA8O6QMYX .node polygon,#mermaid-svg-i5acrGztA8O6QMYX .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-i5acrGztA8O6QMYX .node .label{text-align:center;}#mermaid-svg-i5acrGztA8O6QMYX .node.clickable{cursor:pointer;}#mermaid-svg-i5acrGztA8O6QMYX .arrowheadPath{fill:#333333;}#mermaid-svg-i5acrGztA8O6QMYX .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-i5acrGztA8O6QMYX .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-i5acrGztA8O6QMYX .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-i5acrGztA8O6QMYX .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-i5acrGztA8O6QMYX .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-i5acrGztA8O6QMYX .cluster text{fill:#333;}#mermaid-svg-i5acrGztA8O6QMYX .cluster span{color:#333;}#mermaid-svg-i5acrGztA8O6QMYX div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-i5acrGztA8O6QMYX :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} Using it in vscode extension package.json Using it in Using it in Proxy Proxy ETS TypeScript Plugin TypeScript Language Plugin Volar Language Plugin ETS Language Server Use volar to shield the library files located within the sdk (set snapshot to an empty function) TypeScript Lib .d.ts file Use the volar proxy .ets file to the ArkTS server and the files located under the SDK path. .ets file .ts file OpenHarmony SDK .d.ts file Other file will be ignored

此图原issue地址：https://github.com/ohosvscode/arkTS/issues/36

HDC 2025

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

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

ArkTS插件，穿戴分论坛现场
仓颉

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
何刚总（华为终端BG首席执行官）在吃饭前发表了对穿戴生态合伙人的感谢致辞，那个时候有点激动了我都不知道说啥了😁和余大嘴一个级别的啊
何刚总，在饭前说几句话😁
我在HDC没空想你😘
我在HDC没空想你😘
热闹的各个体验区…
请添加图片描述
照片太多了，只能随便找几张贴这里，不能贴太多（（

Electron，鸿蒙PC，vscode

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

仓库地址： github.com/ohosvscode/ohos_electron_hap

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

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

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

下一步？

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

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

关于插件的话，现在还有一堆bug要修，一堆新feature要加呢…比如：

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

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

  • ArkTS vscode插件: https://github.com/Groupguanfang/arkTS
  • OpenHarmony SDK下载器: https://github.com/ohosvscode/sdk-downloader
  • Electron on HarmonyOS Next PC 模版: https://github.com/ohosvscode/ohos_electron_hap
网络标签：

相关问题