How do I prevent the slash key from popping up code snippet shortcuts while editing CSS in VS Code?

Question

When I attempt to close a comment in a CSS file in VS Code and hit enter to go to a new line, I regularly unintentionally end up with @at-root appended to the end of my comment because of the code snippet popup that automatically displays when I type the slash / character. (This happens because @at-root is the first item in this popup and it is automatically selected, so when I press enter to try to go to a new line VS Code inserts that code snippet.)

How do I disable this code suggestion/snippet popup when typing / in CSS files?

Answer 1

This one has driven me up the wall as well. After searching through the VS Code source code it seems that the 'trigger characters' are hard-coded for the built-in combined CSS/SCSS/Less extension and I haven't been able to find a configuration point for them. The TS file involved is extensions/css-language-features/server/src/cssServer.ts which includes this..

const capabilities: ServerCapabilities = {
            textDocumentSync: TextDocumentSyncKind.Incremental,
            completionProvider: snippetSupport ? 
            { resolveProvider: false, triggerCharacters: ['/', '-', ':'] } : undefined,
            hoverProvider: true,
            documentSymbolProvider: true,
            referencesProvider: true,
            definitionProvider: true,
            documentHighlightProvider: true,
            documentLinkProvider: {
                resolveProvider: false
            },
            codeActionProvider: true,
            renameProvider: true,
            colorProvider: {},
            foldingRangeProvider: true,
            selectionRangeProvider: true
        };

There are some options for working around this:

• Global setting editor.suggestOnTriggerCharacters. Set this to false to turn off suggestions altogether. While you probably don't want to lose suggestions permanently this is a good option if you are about to do a lot of SCSS commenting which would otherwise keep prompting with the suggestions box.

• Change the code locally. It is possible to change cssServerMain.js which lives in [VS Code Installation Directory]\resources\app\extensions\css-language-features\server\dist\node (restart required). Clearly this is not ideal since any changes in here will be overriden during the next update.

• Create a custom build. Clone the repo and make the change in extensions/css-language-features/server/src/cssServer.ts before rebuilding.

• Raise an issue / create a pull request. See if there's support to have this made configurable.