Vscode-spell-checker: Highlight color

[joshualawson]

It would be awesome if I could change the highlight underline colour from green to something else. In VSCode TypeScript files that uses a standards file uses green underlines for code styling hints.

[Jason3S]

Thank you for the suggestion.

The spell checker uses standard Diagnostic objects to tell VS Code the show the squiggly underlines. I only have control over the severity: [Error, Warning, Information, Hint] . At the moment, the spell checker uses Information.

VS Code controls the color. But it would be possible to enhance the spell checker to allow the severity to be configured.

You could also open a VS Code issue asking for the Diagnostics to be custom colored base upon the Diagnostic.source field.

[joshualawson]

Even being able to change the severity for now would be awesome!

I might also request the custom color to VSCodes repo also!

I might even implement this feature myself today!

[Jason3S]

That would be awesome.

[Jason3S]

@joshualawson did you want to take a crack at changing the Diagnostic level? I can give you some pointers in the right direction. Or are you going to look at enhancing VS Code?

[joshualawson]

Sorry mate, been busy, yeah I will have a crack at it.

Haven't ever looked at VSCode plugins, so some pointers would be helpful!

[Jason3S]

This extension is a bit more complicated than most because it involves a client and a server.

• client runs in VS Code and is used to start the server and send notifications to the server.
• server runs in its own process. This is to prevent it from slowing down VS Code when checking large files.

See README on how to build and run the extension.

This feature requires a minor change to the client and a slightly bigger change to the server.

client/package.json will need to be changed to allow users to set the configuration. I think "cSpell.diagnosticLevel" would be a good name. See "cSpell.showStatus" and "cSpell.checkLimit" as examples.

checkLimit is a good example of how to extend the configuration of the underlying cspell settings. See cspellConfig.ts.

validateTextDocumentAsync in validator.ts is where the Diagnostic is set to DiagnosticSeverity.Information.

[filipemoraisjorge]

Hi guys, I'm also using typescript and the green squiggle is bugging me too.
Some more information about vsc workbench color settings:

editorError.foreground: Foreground color of error squigglies in the editor.
editorError.border: Border color of error squigglies in the editor.
editorWarning.foreground: Foreground color of warning squigglies in the editor.
editorWarning.border: Border color of warning squigglies in the editor.
source

DiagnosticSeverity.Error | editorError, red
DiagnosticSeverity.Warning | editorWarning, green
DiagnosticSeverity.Info | editorWarning, green
DiagnosticSeverity.Hint | no color

so it doesn't look good for us, only if vsc implements the custom color based on Diagnostic.source as @Jason3S suggests...
This is probably the code they need to change: https://github.com/Microsoft/vscode/blob/master/src/vs/editor/browser/widget/codeEditorWidget.ts#L517

[wesbos]

This is a bit of bummer too - impossible to differentiate between what the package thinks are spelling errors and actual ESlint warnings

[Jason3S]

Thank you for the research!

[Jason3S]

I enabled setting the diagnostic level:

"cSpell.diagnosticLevel": "Information",

But it still is not possible to set the color.

I'm going to close this for now.

[alexdevero]

Hi @Jason3S, is there any change about adding a option for custom color?

[Jason3S]

@alexdevero the color is controlled by VS Code. You can make a feature request to be able to control the color per extension.

[royaction123]

workaround for custom highlighting:
https://github.com/Jason-Rev/vscode-spell-checker/issues/266

[Jason-Rev]

This is an issue with VS Code, not the extension. In the latest version of
VS Code, it is possible to change colors.

[webdevnerdstuff]

For anybody wondering how to do it, add the code below into your settings.

"workbench.colorCustomizations": {
    "editorInfo.foreground": "#ff0000"
},

Under "Errors and warnings"
https://code.visualstudio.com/api/references/theme-color#editor-colors