VS Code 自定义语法高亮 —— 入门

VSCode扩展开发

必要工具

脚手架工具

Yeoman 和 VSCode Extension Generator

安装

npm install -g yo generator-code

使用

yo code

根据提示选择，一步步选择

打包工具

vsce

安装

npm install -g vcse

使用

插件的根目录（package.json所在目录）运行

vsce package

出现的问题&解决方案

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qlt2uSZ3-1590116121755)(VScode插件开发.assets/image-20200521124358628.png)]

1. Missing publisher name == >package.json中添加publisher字段
2. Make sure to edit the README.md ... == > 把自动生成的内容全部删除，添加自己的内容（不能为空）
3. A 'repository' field is missing ... == > 不添加不会报错

VSCode自定义语法高亮

语法高亮本质就是Tokenization ：把代码文本token化（通过用正则识别关键字），然后设置样式。VSCode使用TextMate来进行token化

TextMate

基于Oniguruma（Oni’s Chariot 鬼车）正则引擎

Scope inspector

Scope inspector是VSCode用来调试TextMate的工具

如何打开

方式1：==命令面板（Command Palette）==输入Developer: Inspect Editor Tokens and Scopes

方式2：设置中搜索editor.action.inspectTMScopes，为它添加快捷键 Ctrl + Shift + Alt + i

如何使用

Scope inspector打开后，如下图所示：

textmate.scopes

显示文本对应的TextMate的token

semantic token

显示文本对应的semantic token

二者区别和联系

• semantic比TextMate分析的更细致，但因此处理速度比TextMate慢
• semantic可以在TextMate的基础上使用

自定义语法高亮

通过自定义扩展实现：

yo code 选择 New Language Support

开发工具

js-yaml，json文件和yaml文件互转（yaml文件比json文件可编辑性、可阅读性更高）