visual-studio-codearabic

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


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

enter image description here

Any solution for this problem?


Solution

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