Fix issue With VS Code: yellow orange border box around characters

Your specific case – a series of Arabic characters – might no longer be highlighted in vscode (even with the following settings enabled) as vscode is getting a little smarter about strings of characters it would otherwise highlight.

Contextual Unicode Highlighting

To report fewer false positives, ambiguous and invisible unicode
characters are no longer highlighted if the surrounding characters
visually indicate a non-ASCII script.

Thus, in trusted workspaces, only characters that are invisible or can
be confused with ASCII characters are highlighted, except those that
are contained in a word of non-ASCII characters where at least one
character cannot be confused with an ASCII character.

before and after with contextual unicode highlighting


Try disabling one or more of these settings (set to false):

Editor > Unicode Highlight: Non Basic ASCII

Editor > Unicode Highlight: Ambiguous Characters

also see https://stackoverflow.com/a/70293571/836330 for more on the Unicode Highlighting options. And https://stackoverflow.com/a/70297896/836330 and https://github.com/microsoft/vscode/issues/138767.


There is also a way in vscode v1.64 to add another locale to your environment so that its characters will not be highlighted as questionable unicode characters.

New setting: Editor > Unicode Highlight: Allowed Locales

Use this when your display language is something other than the language you are using in your files, like French, Russian, Japanese, etc. that is causing the unwanted unicode warning highlights.

Download the language pack you need:

French Language Pack extension

Search in the Extensions view for “language packs”. I believe only the Microsoft language packs are supported in the Allowed Locales at this time. The picture above shows the French Language Pack. Install it.

Add its language code to the Allowed Locales setting.

To find the right “code”, the easiest is to open your Command Palette after installing the language pack and search for Configure Display Language. You don’t want to change your display language but it will show the available language codes:

configure display language locales

We see we need fr as the code.

Allowed Locales add a language

It will make a setting like this in your settings.json:

"editor.unicodeHighlight.allowedLocales": {
  "fr": true
}

Before these changes:

unicode highlighting before

After: In theory, with the default options for the other unicode highlight setting, the unicode highlighting should be gone.

[It still seems a little rough to me, you may have different results.]

Leave a Comment