ArkTS 语法高亮(VSCode 插件)
为 VSCode 提供 ArkTS 语言(.ets 文件)的语法高亮,内置 Dark / Light / Light+ 三套主题。
主题选择建议:
- 优先推荐 VSCode 官方内置的「深色+ / Dark+」和「浅色+ / Light+」,配色稳定且与大多数主题一致。
- 也提供本插件内置的
ArkTS Dark / ArkTS Light / ArkTS Light+ 主题,可覆盖更多 ArkTS 专属元素(如 UI 组件名、struct 结构体)。
高亮能力清单
本插件对 .ets 文件支持以下语法高亮(基于 src/syntaxes/ets.tmLanguage.json):
| 类别 |
内容 |
| 注释 |
单行 //、块注释 /* */、文档注释 /** */ |
| 字符串 |
单引号、双引号、模板字符串 ` 及 ${} 插值、转义字符 |
| 装饰器 |
@Entry @Component @State 等(整段 @ + 名字统一染色,含第三方装饰器) |
| 关键字 |
this / super
if else switch case default
for while do break continue
return await throw try catch finally
import export from as
struct constructor
class interface enum type namespace function extends implements new
let const var =>
private public protected static readonly async get set |
| 常量 |
true/false/null/undefined/NaN/Infinity、数字(十进制/十六进制/二进制/八进制/大数)、全大写常量 |
| UI 组件 |
Text Column Row Button Image Stack List ForEach 等 70+ 个 ArkUI 组件 (专属 scope,仅 ArkTS 主题可染) |
| 类型 |
内置类型 boolean number string void any 等
Array Map Promise Date 等内置对象 大写开头的自定义类型 / 类名 / 接口名 |
| 类型注解 |
冒号、联合类型 \|、泛型 <T>、可选属性 ? |
| 枚举 |
enum 关键字、枚举名、枚举成员 |
| 函数 |
function 声明名、方法调用、console/Math/JSON 等内置函数 |
| 成员访问 |
点号后的大写成员(如 CommonStyle.FULL_PERCENT) |
| 运算符 |
算术、比较、逻辑、位运算、赋值、自增自减、可选链、三元运算符 |
| 标点 |
分号、逗号、点号、括号 |
效果预览
以下截图来自 examples/demo.ets 样例文件,分别展示深色与浅色主题下的高亮效果。
ArkTS Dark(深色)




ArkTS Light(浅色)




主题
安装后在「颜色主题」中切换(Cmd+Shift+P → Preferences: Color Theme):
| 主题 |
说明 |
| ArkTS Dark |
深色,复刻 DevEco Studio arkts_highlight_VSCode_Dark 配色(token 完整高亮) |
| ArkTS Light |
浅色,对齐 VSCode 官方 Light 配色 |
| ArkTS Light+ |
浅色增强版 |
装饰器支持(V1/V2 全覆盖)
- V1:
@Entry @Component @Preview @Reusable @State @Prop @Link @Provide @Consume @ObjectLink @Observed @Watch @StorageProp @StorageLink @LocalStorageProp @LocalStorageLink @Builder @BuilderParam @Extend @Styles @CustomDialog @Track @Require
- V2:
@ComponentV2 @Local @Param @Once @Event @Monitor @Provider @Consumer @Computed @Type @ObservedV2 @Trace
说明:V1 与 V2 的差异仅在于装饰器,其余语法(struct/class/interface/枚举/泛型等)完全共用。
安装
code --install-extension arkts-ets-highlight-1.0.0.vsix
DevEco Studio 主题
本仓库附带一份 DevEco Studio 主题文件,可直接在 DevEco Studio 中导入使用:
该文件是 DevEco Studio 的主题包,与本插件内置的 ArkTS Dark 主题同源配色。在 DevEco Studio 中通过「导入主题」即可使用,与本插件的 VSCode 高亮保持一致观感。
目录结构
vscode-arkts-highlight/
├── src/
│ ├── syntaxes/ # 语法定义(打包)
│ └── themes/ # 主题定义(打包)
├── examples/
│ └── demo.ets # 展示用精简样例(每种语法形式 1 个特例)
├── test/
│ ├── fixtures/ # 回归测试样例
│ └── verify.cjs # 样例覆盖度校验脚本
├── assets/ # 插件图标等静态资源
├── deveco-theme/ # DevEco Studio 主题文件(jar)
├── dist/ # .vsix 打包产物
└── package.json / README.md / CHANGELOG.md / LICENSE
开发
- 语法文件:
src/syntaxes/ets.tmLanguage.json
- 主题文件:
src/themes/*.json
- 展示样例:
examples/demo.ets(按「通用语法 / V1 装饰器 / V2 装饰器」三段组织,覆盖 import/export、interface/class/enum/struct/namespace、泛型、类型注解、对象字面量、字符串模板、控制流、运算符、get/set、as 断言、空值合并等完整 ArkTS 语法)
- 回归样例:
test/fixtures/regression.ets(真实业务形态的回归用例)
- 验证脚本:
test/verify.cjs(检查展示样例是否覆盖全部语法类别)
License
MIT
| |