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

Question

When I type a ا letter in the Arabic language it is surrounded with a colored border box in vscode.

Any solution for this problem?

Answer 1

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.

• from v1.65 Release notes; 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:

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:

We see we need fr as the code.

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

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

Before these changes:

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.]