1
开局求个star✨谢谢🥹祝各位大佬新的一年财源广进了🙏
Github开源地址:https://github.com/Groupguanfang/arkTS

AI时代到来,好多人都在用cursor写代码,但是写鸿蒙的就没有这么好运了,华为自己的DevEco Studio基于Idea改的,就很麻😑
于是当我尝试使用VsCode打开一个鸿蒙项目,最刺眼的便是ArkTS语言没有一点代码高亮😢于是就搜了一下看看有没有相关的插件…

果然,华为官方应该不会出VSCode插件的(悲😭

截止目前(2025/2/3),我在VSCode市场上只找到这两个插件;一个开源到了gayhub,一个开源在了gayee(bushi

image.png

但是实际用下来,面对线上真实项目的开发,这两个插件还是有很多问题的————太简陋。且不提代码跳转等,比如说下面这几个:

  • @ComponentV2等二代状态管理装饰器的补全支持,对API13的支持
  • 不正确的代码高亮,正确的代码高亮写法应该是要扩展现有TypeScript语法高亮,但是两个插件的作者都是自己写了一个自己的代码高亮,就…高亮的不是很彻底,哈哈😇

这些都是刚需,现在这两个插件的作者仍然还没有跟进😭

于是,我便打算自己写一个自己的ArkTS插件😋下面就是这个插件的一些功能:

Features✨

  • 和TS几乎一模一样的代码补全,高亮,跳转,几乎一应俱全,插件全部都来自TypeScript Language Server扩展而来;
  • 关掉了TypeScript诊断信息;去掉所有红线🤣毕竟ArkTS改了TS的语法,诊断信息一开一大片一大片的红线,因此写代码的时候必须得你自己脑子里进行类型推断(其他两个插件不也一样😜);
  • 增加了一堆鸿蒙项目特有的JSON Schema,什么build-profiles.json5oh-package.json5都有支持,具体看项目README有介绍;
  • 提供了一个npm包,里面打包转换了最新的API 13的API,只需要一点简单的步骤就可以轻松得到几乎完美的类型提示🔔

image.png

插件的一些不足

这个插件还有许多不足,比如说上面提到的一些:

  • 没有任何TS的诊断信息(这也是没办法👐,工作量大,欢迎PR);
  • struct关键字在背后偷偷被我换成了class😇(不过你就说能不能跑吧,这高亮跳转无敌了)
  • import/export语句暂时还没有任何.ets文件的提示,这个正在策划怎么去做,也欢迎PR;
  • 最后一个,也可能是工作量大且耗脑力的活,就是README文件里讲的,把BlockStatement后面的链式调用互换位置,😭实在是不知道怎么写。。这个问题解决了就能解决下面这问题:

image.png

不过,还是有一些办法能拿到提示,比如点到上面去:

image.png

只能勉勉强强这么用着了。

最后

下一步,我应该会研究,加上build hap包等相关功能的集成,接着看吧🤔

最后奉上MakretSpace地址:点击前往

这个插件基于Volar.js,感谢各位大佬的付出🙏

Volar.js仓库地址


Naily_Zero
1 声望0 粉丝