vscode插件webgl editor阅读,入门antlr

简介: vscode插件webgl editor阅读,入门antlr

image.png

这部分代码是需要动态生成的,语法分析

perl复制代码"compile-antlr-windows": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./compile-antlr.ps1",
javascript复制代码Set-Location "syntaxes"
Remove-Item "../src/_generated" -Recurse -ErrorAction Ignore
npx antlr4ts -o "../src/_generated" "AntlrGlslLexer.g4"
npx antlr4ts -o "../src/_generated" -no-listener -visitor "AntlrGlslParser.g4"


ANTLR是基于LL算法实现的语法解析器生成器

源码分析

当插件启动后就会分析诊断当前打开的文档内容,根据antlr的ast抽象语法树,对整个代码进行分析

"Open documentation"

当鼠标hover后,语法接下内容后,判断当前鼠标处的内容是什么,变量函数?然后查找对应的hover提示内容,

一切的基础都是那个antlr

bash复制代码antlr4ts -o ./src/antlr -no-listener -visitor ./syntaxes/CocosEffect.g4


vbnet复制代码ANTLR Parser Generator  Version 4.9.0-SNAPSHOT
 -o ___              specify output directory where all output is generated       
 -no-listener        don't generate parse tree listener    
 -visitor            generate parse tree visitor


语法遍历解释

g4复制代码grammar CocosEffect;
prog:   (expr NEWLINE)* ;
expr:   expr ('*'|'/') expr
    |   expr ('+'|'-') expr
    |   INT
    |   '(' expr ')'
    ;
NEWLINE : [\r\n]+ ;
INT     : [0-9]+ ;


antrl生成的ts visitor有对应的回调接口,当检测到文本符合对应的语法时,就会触发对应语法的ts回调接口,举个例子

antlr生成的Visitor代码如下

ts复制代码export interface CocosEffectVisitor<Result> extends ParseTreeVisitor<Result> {
     // 这2个都是语法接口,对应g4里面写的语法key,数据类型是grammar key + Context
    visitProg?: (ctx: ProgContext) => Result;
    visitExpr?: (ctx: ExprContext) => Result;
}


我们只需要继承antlr的Visitor,然后重写对应的回调,即可拿到分析后的结果

ts复制代码export class Visitor extends AbstractParseTreeVisitor<void> implements CocosEffectVisitor<void> {
    visitExpr(ctx: ExprContext): void {
        // 编写自己的处理语法逻辑
        return;
    }
}

注意java version

antlr grammar syntax support插件主要是语法着色,安装后output窗口有报错

csharp复制代码Running Java with parameters: 
    -jar antlr4ng-cli\antlr4-4.13.2-SNAPSHOT-complete.jar 
    -message-format antlr 
    -o e:\proj\cocos-effect\syntaxes\.antlr 
    -no-listener -no-visitor -Xexact-output-dir 
    e:\proj\cocos-effect\syntaxes\CocosEffect.g4
Exception in thread "main" 
java.lang.UnsupportedClassVersionError: org/antlr/v4/Tool has been 
 compiled by a more recent version of the Java Runtime (class file version 55.0), 
 this version of the Java Runtime only recognizes class file versions up to 52.0


java8是52, java11是55,切换到java11就正常,发现的确是跟java版本有关系,我用的是java8,切换本机java环境就正常了。

image.png

parse tree inspector

image.png

这个功能是antlr的jar包自带的,而justAntlr插件提供了grammar tree inpsepctor的快捷操作。

但是我一直没有成功,翻了下源码,终于了解到了细节:

image.png

在选择文件后,执行的java命令,所以这个要求java版本也得匹配,不然还会报上边的错误

image.png

会在cwd目录生成对应的解析器java代码:

image.png

同时还有警告信息:

vbnet复制代码This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:
extensionHostProcess.js:108
No method for rule -gui or it has arguments


使用命令行我尝试了,只有最后一行的日志信息,查看了下用法,最开始其实我没有认为这是命令行的一部分,主要是因为java的命令行内容太长了

ini复制代码E:\proj\cocos-effect\syntaxes\.gen\CSV>java -cp .;F:\proj\justAntlr\lib\antlr-4.10.1-complete.jar org.antlr.v4.gui.TestRig -h
java org.antlr.v4.gui.TestRig GrammarName startRuleName
      ↑ 包含功能的jar包         ↑ 语法名字  ↑从哪个规则开始
  [-tokens] [-tree] [-gui] [-ps file.ps] [-encoding encodingname]
  [-trace] [-diagnostics] [-SLL]
  [input-filename(s)]
Use startRuleName='tokens' if GrammarName is a lexer grammar.
Omitting input-filename makes rig read from stdin.


再次看了下输入的命令


java -cp 是 Java 命令的一部分,用于指定类路径(class path),这个是java的基础知识,注意这里的.;,是因为编译需要找到antlr生成的那些代码。


bash复制代码java 
    -cp .;F:\proj\justAntlr\lib\antlr-4.10.1-complete.jar org.antlr.v4.gui.TestRig 
    CSV  # GrammarName
    -gui 
    C:\Users\Administrator\Desktop\effect\1.csv # input-filename


看了很久,找了很多资料,才发现命令行里面缺少了startRuleName,翻了下justAntlr源码,它是通过鼠标选中的内容来确定startRuleName参数,gif中其实有这个操作,不注意真的看不出来的,而且文档里面也没有说明这点。

终于出来了,在这个tree上浪费了太多的时间。

image.png

startRuleName

这个参数其实是告诉antlr,从哪个规则开始解析,对应的代码中我们也要调用生成规则函数来完成解析,这些都算是antlr的基础概念,建议还是从命令行使用antlr,能够更加透彻的理解。



目录
相关文章
|
2月前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题,并提供了一些相关的使用技巧和资源链接。
139 1
|
2月前
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
82 5
vscode10大常用插件
|
1月前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
|
2月前
|
前端开发 IDE 开发工具
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
|
2月前
|
JSON 前端开发 JavaScript
这 2 个插件,让你的 vscode更牛逼
这 2 个插件,让你的 vscode更牛逼
|
2月前
vscode——Prettier插件保存自动格式化
vscode——Prettier插件保存自动格式化
59 0
|
2月前
|
JavaScript Linux iOS开发
【Mac系统】Vscode使用LeetCode插件报错‘leetcode.toggleLeetCodeCn‘ not found
在Mac系统下使用VSCode的LeetCode插件时遇到“leetcode.toggleleetcodecn”命令找不到的错误解决方法,主要是通过从Nodejs官网下载并安装最新版本的Node.js来解决环境配置问题。
154 0
|
3月前
|
IDE PHP 开发工具
「Python入门」python环境搭建及VScode使用python运行方式
**Python 概述与环境搭建摘要** Python是一种解释型、面向对象、交互式的脚本语言,以其简单易学和丰富库著称。安装Python时,推荐在Windows上选择.exe安装程序,记得勾选“Add Python to PATH”。安装完成后,通过环境变量配置确保Python可被系统识别。验证安装成功,可在CMD中输入`python --version`。Visual Studio Code (VScode)是流行的Python IDE,安装Python插件并选择解释器后,可直接在VScode内编写和运行Python代码。
67 0
「Python入门」python环境搭建及VScode使用python运行方式
|
3月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
196 3
|
3月前
|
JavaScript 安全
下载安装 vscode(含汉化、插件的推荐和安装)
下载安装 vscode(含汉化、插件的推荐和安装)
56 0
下载安装 vscode(含汉化、插件的推荐和安装)