Shader languages support for VS Code



GitHub issues GitHub license button VS Code marketplace button Gitter chat button


Shader languages support for VS Code

  • HLSL - High-Level Shading Language
  • GLSL - OpenGL Shading Language
  • Cg - C for Graphics

Main Features

All languages

Syntax highlighting for shader languages

Syntax Highlighting


Show Code Completion Proposals

Code Completion

Help With Function and Method Signatures

Signature Help

Show Hover

Show Hover

HLSL Documentation

HLSL Documentation Clicking on the link in the Hover box will open HLSL documentation (when available)

Find References and Definition

Find References

Document and Workspace Symbols

document-symbols workspace-symbols

Formatting Code

(Experimental) Require MS CppTools to be installed


  • hlsl.suggest.basic Configures if the HLSL language suggestions are enabled
  • hlsl.openDocOnSide Open HLSL Documentation link in editor and on the side, instead of in external browser


  1. Install Visual Studio Code (1.17.0 or higher)
  2. Launch Code
  3. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
  4. Select Install Extensions
  5. Choose the extension Shader languages support for VS Code
  6. Reload Visual Studio Code


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


Visual Studio Code v1.17.0




  • [Discussion] [Live Share] Restricting language services to local files

    [Discussion] [Live Share] Restricting language services to local files

    In preparation for Visual Studio Live Share adding support for "guests" to receive remote language services for HLSL, this PR simply updates the current DocumentSelector to be limited to file and untitled (unsaved) files. This way, when someone has this extension installed, and joins a Live Share session (where files use the vsls: scheme), their language services will be entirely derived from the remote/host side, which provides a more accurate and project-wide experience (guests in Live Share don't have local file access to the project they're collaborating with).

    Note: As an example, the TypeScript/JavaScript language services that come in-box with VS Code already have this scheme restriction, and so this PR replicates that behavior.

    opened by lostintangent 7
  • Add enhanced icon

    Add enhanced icon

    I did render a new version of the icon of this addon; correct perspective of texts on the cube and proper transparency. (The current one disturbed me that much in my sidebar, that I thought I create one for you.) I uploaded a 128x128 and a 2048x2048 version. Please replace the current one. Shader-Support-Icon-Small Shader-Support-Icon-Large

    opened by Andari85 3
  • Code completion not working.

    Code completion not working.

    I see on the details page some shots for Completion Proposals and Help With Function and Method Signatures. But non of that works in glsl files? Im on version 1.1.3

    opened by Disar 3
  • C++ raw string highlighting

    C++ raw string highlighting

    Is it possible to highlight shader code inside C++11 raw strings?

    For example, highlight this.

    #version 420 core
    void main(void)
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    enhancement help wanted vscode 
    opened by davl3232 3
  • Extension activation time is really high

    Extension activation time is really high

    With the new "Show Running Extensions" feature I noticed that this extension has an abnormally high start-up time. Most extensions start in 30-100ms, this one in 700+ (tested it multiple times).

    Is there an easy way to fix this?

    • Extension Name: shader
    • Extension Version: 1.1.2
    • OS Version: Windows_NT x64 10.0.16299
    • VSCode version: 1.19.0

    We have written the needed data into your clipboard. Please paste:

    	"activationTimes": {
    		"startup": false,
    		"codeLoadingTime": 731,
    		"activateCallTime": 0,
    		"activateResolvedTime": 12,
    		"activationEvent": "onLanguage:glsl"
    opened by Philip-Trettner 3
  • Incorrect GLSL highlighting

    Incorrect GLSL highlighting

    Writing #ifdef and everything is correctly highlighted. However writing #if defined(...) causes the first line after to not be highlighted, and just plain white. Everything after that line is correctly highlighted again though.


    This also includes #elif defined(...).

    opened by vallentin 3
  • Highlight WebGL shaders embedded in HTML file

    Highlight WebGL shaders embedded in HTML file

    In WebGL we can specify shaders in separate files or embedded in an HTML file like this:

      <script id="vertex-shader" type="x-shader/x-vertex">
        attribute vec4 vPosition;
        void main()
          gl_Position = vPosition;

    VSCode already has highlighting for embedded JS in an HTML file so I think this should be possible, although I'm not sure if it's within the realm of this extension or would require a change in the way VS Code parses HTML. The shader is identifiable as the text inside any