Linting GLSL Files and Setup for Vscode

Here is the example project for download. Make sure to install the extensions - look in the extensions file in the .vscode folder.

Here is my version of vscode and also don’t forget you need to download the extension I use to do this:

• vscode = v1.85.0 (user setup)
• extension = raczzalan.webgl-glsl-editor
• computer = windows Desktop

This is a really quick demo of linting in GLSL files in a React project. This can be very useful for modularizing the shader files and not having to try and do the impossible, lint or format (although highlighting is easy) a template literal 😂

Loaders for GLSL files

If you are going to load glsl files (.glsl / .vert / .frag) you will need to have special loaders for these file types, as per any other file type like .mp4 or .png etc.

This is a basic setup in a nextjs project. Obviously project to project you will need to place the loaders in the specific config files.

Copy 
1/** @type {import('next').NextConfig} */
2const nextConfig = {
3  webpack: (config, options) => {
4    config.module.rules.push({
5      test: /\.(glsl|vs|fs|vert|frag|glslx)$/,
6      use: ['raw-loader', 'glslify-loader'],
7    })
8
9    return config
10  },
11}
12
13module.exports = nextConfig

This went in the next.config.js and allows you to load glsl files. This is the first step to having standalone glsl files.

Installing the Linter / Checker

The package which allows for the correction and formatting is this one:

There’s not much to it after this, install this package, maybe a reload and then you should get auto correction on the files. You may have to enable `formatOnSave“ in vscode but this is trivial when you google this online.

Hope this helps structure your larger projects abit more!

Template Literal syntax Highlighting

One very quick example is this:

Copy 
1const shader = /* glsl */`
2  void main () {
3    gl_Position = projectionMatrix * ModelViewMatrix * vec4(position, 1.0);
4  }
5`;

This probably wont show here, but if you do this in your react projects components, you will get syntax highlighting. An alternative light weight method to add some style to your shaders.

Really hope you find this useful, let me know if you have any questions.