Visual Studio shader syntax highlighting part 2

I have updated the NShader syntax highlighter to allow adding extra extensions dynamically via the Visual Studio settings. This is one of the most requested features, and it really is a feature that makes sense. The plugin was previously hard-coded to specific file extensions. The reason for this is because that’s just the way you define what file extensions your language service is for in a Visual Studio plugin; you add a bunch of attributes to your Package implementation.

However if you implement the IVsEditorFactory interface, you can get an entry to show up in the VS settings page! You don’t even have to implement the full interface yourself because there is a built-in implementation that does most of the hard work called EditorFactory.

To use this updated version, in Tools->Options->Text Editor->File Extension, add a file extension, select “NShader Editor” in the dropdown, and click “Add”. Then when you open a file with any of those extensions they will use the NShader syntax highlighter. Files will default to using the HLSL highlighter, so if you want to force them to use GLSL, CG, or Unity, you can use the shadertype tag I mentioned in my previous post.

Note that all the file extensions that NShader previously recognised are still recognised, so if you are using any of those file types you don’t have to do anything extra.

It seems that there is a bug in at least Visual Studio 2013 and possibly earlier versions where the setting can be forgotten and when you open a file in the list the syntax highlighting is not applied. However, the extension still appears in the list. To work around this you must remove and re-add the extension to the list. Also in Visual Studio 2015 if you load a file from the “recently used” list it doesn’t seem to use the syntax highlighter, but if you load it from elsewhere (e.g. File->Open or the Solution Explorer) it will work. This seems like a bug in Visual Studio, because it worked in 2013.

If you add a file extension or use the shadertype tag you will need to close and re-open any currently open files to reflect the changes.

An installer for NShader can be downloaded here. The installer can be used to install into both Visual Studio 2013 and 2015.

The source code is available on github here.

15 Responses to “Visual Studio shader syntax highlighting part 2”

  1. 8Observer8 on Reply

    Hello!

    Can I use it for shaders like those?

    attribute vec4 a_Position;
    void main()
    {
    gl_Position = a_Position;
    }

    void main()
    {
    gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
    }

        • Sam on Reply

          Ahh I see! That’s a bit more complicated but I think it might work if you associate NShader with the file extension of your html file. But it would then apply the syntax highlighting to the entire file.

          • 8Observer8 on

            It will work for highlighting but I’m not sure that Ctrl+K, Ctrl+D will work corrently for html files.

            May be it will usefull for somebody who want to use WebGL shader from files:

            var VSHADER_SOURCE = null;
            var FSHADER_SOURCE = null;

            function main()
            {
            // …

            readShaderFile(gl, ‘vShader.glsl’, ‘v’);
            readShaderFile(gl, ‘fShader.glsl’, ‘f’);
            }

            function readShaderFile(gl, fileName, shader)
            {
            var request = new XMLHttpRequest();

            request.onreadystatechange = function ()
            {
            if (request.readyState === 4 && request.status !== 404)
            {
            onReadShader(gl, request.responseText, shader);
            }
            }

            request.open(‘GET’, fileName, true);
            request.send();
            }

            function onReadShader(gl, fileString, shader)
            {
            if (shader == ‘v’)
            {
            VSHADER_SOURCE = fileString;
            }
            else if(shader == ‘f’)
            {
            FSHADER_SOURCE = fileString;
            }

            if (VSHADER_SOURCE != null && FSHADER_SOURCE != null)
            {
            start(gl);
            }
            }

            function start(gl)
            {
            // Initialize the shaders
            if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
            {
            console.log(“Failed to initialize the shaders”);
            return;
            }
            // …
            }

  2. 8Observer8 on Reply

    It is very nice tool. I use shader files now (not in scripts tags)

    Please, add two checkboxes to Options -> Formatting -> “New Lines”:
    - “Place open brace on new line for functions and structures”
    - “Place open brace on new line for control blocks”

    How it is made for JavaScript. Thank you.

    I found mistake. Please press Ctrl+K, Ctrl+D in .glsl file. You will see new line for every pressing.

    • Sam on Reply

      Thanks! Unfortunately I can’t add those options because at the moment NShader doesn’t do any code completion or any of that stuff for formatting. That’s why I suggested HLSL Tools for Visual Studio. That plugin has those features.

  3. Alex on Reply

    Hey,

    It seems to work in Visual Studio 2017 as well :).

    Thank you very much for this, @Sam!! :)

    • Sam on Reply

      Thanks! Some people have had some problems, but they’ve been hard to reproduce, so it’s great to hear it’s working for most people in 2017!

  4. StanleyW on Reply

    Hello!

    there are some problems.

    I have Visual Studio 2015 (with Nsight) and Visual Studio 2017. NShader just working on Visual Studio 2017. When using Visual Studio 2015 (with Nsight) to open the GLSL file, it’s just a normal text editor.

    But on my other computer only Visual Studio 2015 (with Nsight), NShader can work.

    So I think it’s not Nsight’s problem, right?
    And how can I solve this problem? :D

Leave a Reply to Sam

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *