polymeilex / vscode-wgsl

VsCode Syntax highlight for WGSL files

WGSL Syntax Highlight For Visual Studio Code

Install

• vscode marketplace
• open vsx registry

For rust users:

I also created cargo-wgsl crate that validates your shaders.

Just run cargo install cargo-wgsl to install it.

The extension will detect it in the path, and start a validation server for you.

Autocompletion (only for globals for now)

Real time validation using cargo-wgsl

Cargo-wgsl can also be used as cli:

vscode-wgsl's Issues

Can't install in VS Codium

I tried to install this extension in VS Codium (FOSS fork of vs code without the telemetry), but it is not showing up:

Most other extensions show up just fine, but not all as some insist on a proprietary VS Code build. It would appear that this plugin is in that category (although it might be something else; I don't know enough about VS Code to know for sure), although that seems unusual for this sort of plugin, so perhaps it is an error?

Doesn't handle block comments?

Handling of `#import`

I am using the bevy engine and it uses #import. Here is an example shader.

In VS-Code I get this error when I enable v0.1.16 of vscode-wsgl:

error: expected global item ('struct', 'const', 'var', 'alias', ';', 'fn') or the end of the file, found '#'
  ┌─ wgsl:1:1
  │
1 │ #import bevy_pbr::forward_io::VertexOutput;
  │ ^ expected global item ('struct', 'const', 'var', 'alias', ';', 'fn') or the end of the file

It would be nice if somehow this import statement could be processed or ignored.

Red arrow points

For some reason, the points of arrows in function returns are red...

Seems to be an issue in most colour schemes, except where the entire arrow is red (e.g. vscode default monokai scheme).

Seems not to be an issue when I use SpaceMono, maybe something to do with the ligatures.

Support for others shading languages

Looking at the code, it should be fairly easy to add support for other shading languages such as HLSL based on DXC or GLSL based on glslangvalidator.
Is this something you would be interested in ? I was looking at it and could write some code for this, I like the base code & rust server

Formatter server

It would be very helpful if this extension could serve as a formatting server for VS Code so formatting could be applied on save.

how to add custom keywords/apis for Autocompletion?

Thanks for this extension, works well for most cases.

For large projects, we want to expend this extension to support more keywords in Autocompletion，but I'm new to vscode extenstions, how can we add custom autocompletions in this project? e.g. support struct inner vars?

Hope I can make some contribution to the Autocompletions

Error on const, shader validation on older shader language version ?

Hi,
first of all, this extension is great. GG

I tried to use in vscode but it seems that the validation produces errors when chrome canary is fine with the shader. It seems like the validation is not up to date with the shading language.
on this one the first line produces an error.

--> webgpu-experiment/src/node-functions.wgsl:2:1
error: error: expected global item ('struct', 'let', 'var', 'type', ';', 'fn') or the end of the file, found 'const'
┌─ wgsl:2:1
│
2 │ const NodeMaxLevel = 14;
│ ^^^^^ expected global item ('struct', 'let', 'var', 'type', ';', 'fn') or the end of the file

Note that this shader is injected a bit like include in a more complex compute shader and vertex shader. Still It feels that it validates on a different version and the language.

node-functions.txt

Rewrite Syntax Definition

• WGSL has changed significantly since its inception, and syntax definitions in vscode-wgsl became quite messy because of that, there are a lot of new cases that were not initially taken into account (good example of this would be #4)
• JSON turned out to not be the best choice IMO, I would rather use YAML and compile it to JSON on every publish
• Rewriting the whole thing from the ground up with current WGSL specs in mind will yield a lot cleaner result.

Add vite build configuration

I have almost no experience with gulp and webpack. For my projects I have almost exclusively used Vite. I'd like to provide a way to develop this extension with Vite instead of webpack.

Maybe this might make contributing more accessible as many people seem to be more comfortable with Vite over webpack.
In the Stack Overflow developer survey Vite was admired by 78.94%, webpack only by 38.26%.

Some words are not colored

Types like vecX<> are not colored, also in the parameter list, everything has the same color.

It would be nice if types were recognized if they are pascal case, like VertexOutput.

Support Predeclared aliases

The WGSL standard declares some aliases for some vector types.

Among these are:

alias vec2i = vec2<i32>
alias vec3i = vec3<i32>
alias vec4i = vec4<i32>
alias vec2u = vec2<u32>
alias vec3u = vec3<u32>
alias vec4u = vec4<u32>
alias vec2f = vec2<f32>
alias vec3f = vec3<f32>
alias vec4f = vec4<f32>
alias vec2h = vec2<f16>
alias vec3h = vec3<f16>
alias vec4h = vec4<f16>

Sadly the extension currently doesn't recognize these as built-in types. Since they are used in some popular tutorials and are part of the standard, it would probably be good to include them.

If this is not the right repo to add these, please tell me where to look.