Some emojis not displaying correctly in VSCode macOS

[meredithmurfin]

• VS Code Version: 1.54.2
• OS Version: macOS Catalina 10.15.7
• Extensions installed:
  • EditorConfig for VS Code
  • Emoji
  • ESLint
  • eslint-disable-snippets
  • Gatsby Snippets
  • Prettier - Code formatter
  • Prettier ESLint
  • React Native Snippet
  • React Native Tools
  • Sass
  • Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero
  • Simple React Snippets
  • stylelint
  • Visual Studio Code Commitizen Support
  • yarn

Steps to Reproduce:

Problem 1: Some emojis are displaying as small black and white images. I'm expecting them to paste normally (same size as other pasted emojis, with color).

1. Copy these emojis into any file in VS Code:
   • ⚙️ :gear:
   • ⚡️ :zap:
   • ♻️ :recycle:
   • ✔️ :heavy_check_mark:
   • ✏️ :pencil2:
   • ♿️ :wheelchair:
2. You will see that they all look like this:
   
3. I haven't tested all emojis. But most others seem to be displaying as expected. For example,
   
4. I've copied and pasted emojis from many different websites. I get the same results each time.

Problem 2: The reason that I am adding these emojis to my project is to configure git commit prompts using commitizen, specifically with cz-customizable. When the git commit prompts are generated in my terminal, some emojis show inaccurate spacing. Additionally, all of the emojis that are displayed without color in VS Code files are being displayed in Terminal in the same way (no color, inconsistent sizing)

1. I'm adding emojis specifically to my .cz-config.js file (you can see an example of someone else doing this here).

My .cz-config.js file

module.exports = {
    types: [
        {
            value: 'chore',
            name: 'chore:      ⚙️ Build process or supporting tool changes',
        },
        {
            value: 'ci',
            name: 'ci:         🚀 CI-related changes',
        },
        {
            value: 'docs',
            name: 'docs:       📚 Documentation updates',
        },
        {
            value: 'feat',
            name: 'feat:       ⭐ Adds functionality',
        },
        {
            value: 'fix',
            name: 'fix:        🐞 Fixes a bug',
        },
        {
            value: 'perf',
            name: 'perf:       ⚡️ Changes that improve performance',
        },
        {
            value: 'refactor',
            name: 'refactor:   ♻️ Neither fixes a bug nor adds functionality',
        },
        {
            value: 'release',
            name: 'release:    🔖 Releases a new version',
        },
        {
            value: 'setup',
            name: 'setup:      🎉 Initial setup',
        },
        {
            value: 'style',
            name: 'style:      🎨 Adds or updates styles',
        },
        {
            value: 'test',
            name: 'test:       🧪 Adds or updates tests',
        },
        {
            value: 'ux',
            name: 'ux:         🚸 Changes that improve user experience',
        },
    ],
    scopes: [
        {
            value: 'wip',
            name: 'wip:    🚧 WIP',
        },
        {
            value: 'review',
            name: 'review: 💯 Code review changes',
        },
    ],
    allowTicketNumber: false,
    scopeOverrides: {
        chore: [
            {
                value: 'add-dep',
                name: 'add-dep:    ➕ Adds dependencies',
            },
            {
                value: 'analytics',
                name: 'analytics:  📈 Adds or updates analytics',
            },
            {
                value: 'config',
                name: 'config:     🛠️ Adds or updates configuration files',
            },
            {
                value: 'downgrade',
                name: 'downgrade:  ⬇️ Downgrades dependencies',
            },
            {
                value: 'errors',
                name: 'errors:     🥅 Changes that improve error handling',
            },
            {
                value: 'ignore',
                name: 'ignore:     🙈 Adds or updates .*ignore files',
            },
            {
                value: 'merge',
                name: 'merge:      🔀 Merge branches',
            },
            {
                value: 'pin-dep',
                name: 'pin-dep:    📌 Pins dependencies to specific versions',
            },
            {
                value: 'rem-dep',
                name: 'rem-dep:    ➖ Removes dependencies',
            },
            {
                value: 'scripts',
                name: 'scripts:    📜 Adds or updates development scripts',
            },
            {
                value: 'security',
                name: 'security:   🔒 Security-related changes',
            },
            {
                value: 'upgrade',
                name: 'upgrade:    ⬆️ Upgrades dependencies',
            },
        ],
        docs: [
            {
                value: 'config',
                name: 'config: 🛠️ Adds or updates configuration documentation',
            },
            {
                value: 'logs',
                name: 'logs:   🔊 Adds or updates logs',
            },
            {
                value: 'meta',
                name: 'meta:   📖 Adds or updates metadata',
            },
        ],
        fix: [
            {
                value: 'downgrade',
                name: 'downgrade:  ⬇️ Downgrades dependencies',
            },
            {
                value: 'merge',
                name: 'merge:      🔀 Merge branches',
            },
            {
                value: 'quick',
                name: 'quick:      🚑 Temporarily resolves a critical bug',
            },
            {
                value: 'revert',
                name: 'revert:     🦔 Rolls back to a previous version',
            },
            {
                value: 'style',
                name: 'style:      🎨 Fixes styles',
            },
            {
                value: 'test',
                name: 'test:       ✔️ Fixes tests',
            },
            {
                value: 'typo',
                name: 'typo:       ✏️ Fixes typos',
            },
            {
                value: 'upgrade',
                name: 'upgrade:    ⬆️ Upgrades dependencies',
            },
            {
                value: 'warn',
                name: 'warn:       🚨 Fixes compiler and/or 👕 linter warnings',
            },
        ],
        refactor: [
            {
                value: 'abstract',
                name:
                    'abstract:   〰️ Changes that simplify code through abstraction',
            },
            {
                value: 'move',
                name: 'move:       🚚 Moves files',
            },
            {
                value: 'prune',
                name: 'prune:      🔥 Removes code and/or files',
            },
            {
                value: 'read',
                name: 'read:       💡 Changes that improve code readability',
            },
            {
                value: 'rename',
                name: 'rename:     🏷️ Renames files',
            },
            {
                value: 'reuse',
                name:
                    'reuse:      ➰ Changes that implement or improve code reuse',
            },
        ],
        setup: [
            {
                value: 'config',
                name: 'config: 🛠️ Adds or updates configuration files',
            },
            {
                value: 'init',
                name: 'init:   💃 Initial commit',
            },
            {
                value: 'move',
                name: 'move:   🚚 Moves files',
            },
            {
                value: 'prune',
                name: 'prune:  🔥 Removes code and/or files',
            },
            {
                value: 'rename',
                name: 'rename: 🏷️ Renames files',
            },
        ],
        test: [
            {
                value: 'e2e',
                name: 'e2e:    🎢 Adds or updates end-to-end tests',
            },
            {
                value: 'perf',
                name: 'perf:   ⚡️ Adds or updates performance tests',
            },
            {
                value: 'unit',
                name: 'unit:   🚦 Adds or updates unit tests',
            },
        ],
        ux: [
            {
                value: 'access',
                name: 'access:     ♿️ Changes that improve user accessibility',
            },
            {
                value: 'alt-text',
                name: 'alt-text:   💬 Adds or updates alternative text',
            },
            {
                value: 'android',
                name: 'android:    🤖 Android-specific changes',
            },
            {
                value: 'animation',
                name:
                    'animation:  ✨ Adds or updates animations and transitions',
            },
            {
                value: 'ios',
                name: 'ios:        📱 iOS-specific changes',
            },
            {
                value: 'linux',
                name: 'linux:      🐧 Linux-specific changes',
            },
            {
                value: 'osx',
                name: 'osx:        🍎 OSX-specific changes',
            },
            {
                value: 'responsive',
                name:
                    'responsive: 📲 Changes that affect overall responsive design',
            },
            {
                value: 'style',
                name: 'style:      🎨 Adds or updates styles',
            },
            {
                value: 'ui',
                name: 'ui:         🖥️ General UI-related changes',
            },
            {
                value: 'windows',
                name: 'windows:    🏁 Windows-specific changes',
            },
        ],
    },
    messages: {
        type: "Select the type of change that you're committing:",
        scope: 'Denote the scope of this change (optional):',
        customScope: 'Denote the scope of this change:',
        subject: 'Write a short description describing this change:\n',
        confirmCommit:
            'Are you sure you want to proceed with the commit above?',
    },
    allowCustomScopes: true,
    skipQuestions: ['body', 'breaking', 'footer'],
    subjectLimit: 100,
};

2. Here are some of the spacing issues I see in my git commit prompts in VS Code node terminal:

   • The text that comes after the ⚙️ :gear:, ♻️ :recycle:, and ⚡️ :zap: emojis are not aligned with the text after all of the other emojis, even though there is only 1 space after each in my .cz-config.js file. The ⚡️ emoji strangely shows what looks to be more than a single space after it.
   
   • The 🛠️ :hammer_and_wrench: and ⬇️ :arrow_down: emojis, although displaying correctly, do not show a space after.
   
   • The ⬆️ :arrow_up: emoji should have a space after it
   
   • The 🖥️ :desktop_computer: emoji should have a space after it
   
   • The 🏷️ :label: emoji should have a space after it
   

3. Here is the results when I attempt to use my new git commit prompts in a non-VS Code terminal (I am using my macOS terminal version 2.10)

   • All of the emojis are being displayed correctly in this terminal (color, size), but there are still some spacing issues. Spacing issues occur with all emojis except ⚡, which appears fine.

My project info:

• My project is a starter template to use for my GitHub projects
• Gatsby, TypeScript, React, ESLint, Stylelint, Prettier, Sass, Husky
  • See package.json for details

My package.json

{
    "name": "ultimate-gatsby-starter",
    "version": "1.0.0",
    "private": true,
    "description": "ultimate-gatsby-starter",
    "keywords": [
        "gatsby",
        "starter",
        "typescript",
        "sass",
        "linting",
        "eslint",
        "prettier",
        "react",
        "yarn"
    ],
    "license": "MIT",
    "author": {
        "name": "name",
        "email": "email@email.com",
        "url": "https://google.com"
    },
    "scripts": {
        "develop": "gatsby develop",
        "start": "gatsby develop --open",
        "build": "yarn install && gatsby build",
        "serve": "gatsby serve",
        "clean": "yarn cache clean",
        "lint:format": "prettier --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\" --write",
        "lint:fix": "eslint --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\" && yarn stylelint \"**/*.scss\" --syntax sass --fix",
        "type-check": "tsc",
        "cm": "cz",
        "install:upgrade": "rm -rf node_modules && yarn upgrade && yarn install",
        "install:audit": "yarn audit && yarn install --audit",
        "install:check": "yarn install --check-files && yarn audit",
        "install:clean": "yarn clean && rm -rf node_modules && yarn install"
    },
    "config": {
        "commitizen": {
            "path": "./node_modules/cz-customizable"
        }
    },
    "dependencies": {
        "@types/node": "^14.14.32",
        "@types/react": "^17.0.3",
        "@types/react-dom": "^17.0.1",
        "gatsby": "^3.0.3",
        "gatsby-cli": "^3.0.0",
        "gatsby-link": "^3.0.1",
        "gatsby-plugin-sass": "^4.0.2",
        "gatsby-plugin-typescript": "^3.0.0",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "sass": "^1.32.8",
        "typescript": "^4.2.3"
    },
    "devDependencies": {
        "@danbruegge/gatsby-plugin-stylelint": "^4.1.0",
        "@types/stylelint": "^9.10.1",
        "@typescript-eslint/eslint-plugin": "^4.16.1",
        "@typescript-eslint/parser": "^4.16.1",
        "commitizen": "^4.2.3",
        "cz-conventional-changelog": "3.3.0",
        "cz-customizable": "^6.3.0",
        "eslint": "^7.21.0",
        "eslint-config-prettier": "^8.1.0",
        "eslint-config-standard-with-typescript": "^20.0.0",
        "eslint-plugin-import": "^2.22.1",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-promise": "^4.3.1",
        "eslint-plugin-react": "^7.22.0",
        "eslint-plugin-react-hooks": "^4.2.0",
        "gatsby-plugin-stylelint": "^3.2.0",
        "husky": "^5.1.3",
        "prettier": "^2.2.1",
        "prettier-eslint": "^12.0.0",
        "prettier-eslint-cli": "^5.0.1",
        "prettier-stylelint": "^0.4.2",
        "stylelint": "^13.12.0",
        "stylelint-config-prettier": "^8.0.2",
        "stylelint-config-sass-guidelines": "^8.0.0",
        "stylelint-config-standard": "^21.0.0",
        "stylelint-order": "^4.1.0",
        "stylelint-prettier": "^1.2.0",
        "stylelint-scss": "^3.19.0",
        "stylelint-webpack-plugin": "^2.1.1"
    }
}

My VS Code settings.json

{
    // Edits to VS Code settings

    // Editor
    "diffEditor.codeLens": true,
    "editor.acceptSuggestionOnCommitCharacter": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.find.autoFindInSelection": "multiline",
    "editor.formatOnSave": true,
    "editor.glyphMargin": false,
    "editor.minimap.enabled": false,
    "editor.tabSize": 4,
    "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace, 'Apple Color Emoji'",
    "editor.inlineHints.fontFamily": "Menlo, Monaco, 'Courier New', monospace, 'Apple Color Emoji'",

    // Files
    "files.trimTrailingWhitespace": true,

    // Search
    "search.collapseResults": "alwaysCollapse",
    "search.exclude": {
        "**/*.lock": true,
        "**/bower_components": true,
        "**/*.code-search": true
    },

    // TypeScript
    "javascript.format.semicolons": "insert",
    "javascript.preferences.quoteStyle": "single",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "javascript.validate.enable": false,
    "typescript.format.semicolons": "insert",
    "typescript.implementationsCodeLens.enabled": true,
    "typescript.preferences.quoteStyle": "single",
    "typescript.referencesCodeLens.enabled": true,
    "typescript.referencesCodeLens.showOnAllFunctions": true,
    "typescript.validate.enable": false,

    // SCSS (Sass)
    "scss.lint.boxModel": "warning",
    "scss.lint.compatibleVendorPrefixes": "warning",
    "scss.lint.duplicateProperties": "error",
    "scss.lint.emptyRules": "ignore",
    "scss.lint.float": "warning",
    "scss.lint.idSelector": "warning",
    "scss.lint.important": "warning",
    "scss.lint.propertyIgnoredDueToDisplay": "error",
    "scss.lint.universalSelector": "warning",
    "scss.lint.zeroUnits": "warning",

    // Git
    "git.allowForcePush": true,
    "git.branchValidationRegex": "/(build|chore|ci|docs|feat|fix|refactor|revert|style|test)/(([a-z|-]{1,20}))/g",
    "git.decorations.enabled": false,
    "git.fetchOnPull": true,
    "git.showPushSuccessNotification": true,

    // Merge Conflict
    "merge-conflict.autoNavigateNextConflict.enabled": true,
    "merge-conflict.decorators.enabled": true,
    "merge-conflict.diffViewPosition": "Beside",

    // Necessary changes to VS Code extension settings
    "npm.packageManager": "yarn",

    // ESLint
    "eslint.alwaysShowStatus": true,
    "eslint.codeActionsOnSave.mode": "all",
    "eslint.debug": false,
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,
    "eslint.onIgnoredFiles": "off",
    "eslint.packageManager": "yarn",
    "eslint.probe": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "html",
        "vue",
        "markdown"
    ],
    "eslint.run": "onSave",
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "html",
        "vue",
        "markdown"
    ],

    // Prettier
    "prettier.enable": true,
    "prettier.tabWidth": 4,
    "prettier.jsxSingleQuote": true,
    "prettier.singleQuote": true,

    // Stylelint
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "stylelint.enable": true,
    "stylelint.packageManager": "yarn",
}

Similar Issues / Attempted Solutions:

• Cannot display emoji ✔️, 🙋‍♂️ #32840
  • This issue is very similar, but it appears to be specific to VS Code on Windows
  • I attempted this solution from this issue's thread, but it did not resolve any of my problems
• Some Unicode characters (emojis) are b/w and others are colored #91357
  • This issue seemed somewhat related, but regardless, it didn't provide a solution for my problem
  • I tried to paste the variation selector Unicode block version of some emojis as mentioned here from this issue's thread, but it didn't resolve my issue

Does this issue occur when all extensions are disabled?: Yes

[p-i-]

Wow. Masterclass in how to file an issue. 💯
I'd like to add:

• 🚀 renders fine on BOTH code window AND terminal
• ☢️ renders fine on terminal, but small/white in code window
• ☎ renders small/white on BOTH code window AND terminal
  (macOS)

[thebinarysearchtree]

All of the emojis that work can be represented by a single 5 character long Unicode value. For example, in JavaScript, the books emoji would be '\u{1F4DA}'.

All of the emojis that don’t work are represented by two 4 character long Unicode values. For example, the gear emoji is '\u2699\ufe0f'. If you only take the first Unicode value, you get a black and white gear.

Vscode is treating emojis with two Unicode values as two separate characters. I haven’t looked at the code, but I would guess vscode has HTML tags around each Unicode value or something like that so that they are treated as separate values.

[meredithmurfin]

Thanks for the explanation @thebinarysearchtree! I assumed the issue was related to how the unicode was being interpreted by VSCode. Do you know how to resolve the issue? I'm also curious if the unicode variations are to blame for the spacing issue.

[alexdima]

This appears to be something specific to Menlo, which happens to be the default editor font on macOS.

[thebinarysearchtree]

Yeah. There is a workaround, but it depends if that workaround is a good idea or not. The case to be made is that users expect the new Emoji style symbols because that is what GitHub and so on use, but the fonts used for programming, at least on MacOS, have the old style of symbols.

Maybe the web browsers should fall back through the fonts in this situation, but they obviously don't. I don't know if that is a bug or a spec issue or whatever else.

The only way to fix it in VSCode while still using the same fonts is to add this to the css:

@font-face {
  font-family: 'Emoji';
  src: local('Apple Color Emoji');
  unicode-range: U+2600-27BF;
}

and then somehow ask or require or something to put Emoji as the first font in the font-family above Menlo.

[alexdima]

All the text rendering in the editor is delegated to Chromium. I think it would be best if you would please open an issue directly against Chromium at https://bugs.chromium.org/p/chromium/issues/list and then please link to it here.

I have created a simple test page at https://jsfiddle.net/zvqpghod/ which can be used as a repro when creating the issue.

<div style="font-family:Menlo">
⚙️ :gear:
⚡️ :zap:
♻️ :recycle:
✔️ :heavy_check_mark:
✏️ :pencil2:
♿️ :wheelchair:
</div>
<div style="font-family:Monaco">
⚙️ :gear:
⚡️ :zap:
♻️ :recycle:
✔️ :heavy_check_mark:
✏️ :pencil2:
♿️ :wheelchair:
</div>

Chrome:

Safari:

[thebinarysearchtree]

@alexdima this is what I am suggesting as a workaround for the font issue: https://jsfiddle.net/c0nj79ek/

[alexdima]

Thanks for the workaround idea, in the meantime I have created https://bugs.chromium.org/p/chromium/issues/detail?id=1190093

[meredithmurfin]

@alexdima Thanks for the suggested workaround. I updated this line in my settings.json so that I no longer include Menlo and instead I have Monaco as the first font listed:

"editor.fontFamily": "Monaco, 'Courier New', monospace, 'Apple Color Emoji'"

My VS Code files now show the Emojis fine. However, I'm still experiencing Problem 2 (inconsistent spacing in my termina)l:

I'm assuming that this is an issue specific to commitizen? This is occurring in both my VS Code terminal and in my Mac OS terminal. I'll open an issue there and I will link it here in case anyone else comes across this issue and is looking for a resolution. But definitely let me know if this could somehow be traced back to VS Code.

Additionally, I do agree with @thebinarysearchtree that users expect Emojis to work in VS Code, regardless of the font-family selected (within reason). Users especially expect the default font to display Emojis correctly.

[alexdima]

cc @Tyriar @meganrogge for the terminal . The terminal rendering might be a different issue than the editor rendering.

[Tyriar]

The size of the characters in the terminal is determined by the unicode version used (terminal.integrated.unicodeVersion), we support 6 (all emoji single cell) and 11 (most emoji double cell). Unfortunately in the terminal it's a bit of a mess because ideally this value will also be in sync with whatever unicode version the application inside the terminal is running, I don't think there's any way we can determine. If we use a version other than what the program is, weird things may happen with wrapping, so the current approach is to use the most common version which I believe is 11.

Here's the issue that tracked supporting the setting of a unicode version in xterm.js xtermjs/xterm.js#1709

[yorks-dev]

I used this on Arch Linux to solve the Issue. On Mac OS Use Apple Color Emoji instead of Noto color emoji. It should Fix the problem.

"editor.fontFamily": "'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji'",
"terminal.integrated.fontFamily": "'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji'",

[jeanlescure]

I'm on Arch Linux and tried the fix suggested by @yorks-dev , sadly it did not work.

I did try setting Noto Color Emoji as the first font, and it did work to show the missing emojis, but messed up every other non-emoji character.

[thebinarysearchtree]

Yeah on mac it is a problem with the fonts not falling through to the end so it doesn't work. I spent a few hours creating a new setting called "Partial Fonts" that allows you to specify different fonts for specific ranges of characters as per the concept I mentioned earlier. It works well but I didn't really figure out where the most appropriate place would be to insert the css that is created from the user's settings.

[DYW972]

2022 thanks to @alexdima !
I solved this issue on my macOS by removing Menlo in editor.fontFamily": "Monaco, 'Courier New', monospace",

Now everything works like expected.

🙌

[call0fcode]

2022 thanks to @alexdima ! I solved this issue on my macOS by removing Menlo in editor.fontFamily": "Monaco, 'Courier New', monospace",

Now everything works like expected.

🙌

Same for me, I removed Menlo and everything works as expected so far.

I've also added my favourite font for coding, Cascadia Code so the fonts I got are:
'Cascadia Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'

Summarizing, just remove the font causing the issue: Menlo

[anodetamer]

On macOS, some emojis will not resolve by adding Apple Color Emoji to editor.fontFamily.
At least the ones I have noticed are these emojis.
‼️ (double exclamation mark)
⁉️ (exclamation question mark)

Is anyone else having the same problem?

[jquast]

@meredithmurfin U+FE0F is "Variation Selector-16", for some emojis from the earliest Emoji Unicode release are displayed as narrow (1 cell), and are partially occluded/blocked by any next character. This is probably an error by the Unicode standard, or perhaps some compatibility layer for the Japanese phone market, I can't be sure -- the purpose of U+FE0F is to be combined with these Emojis to make them become wide and occupy two cells.

I have completed an automatic testing suite for VS-16, ZWJ, Wide, and Zero-width character support by unicode version, you can view the results of xterm.js (tested via visual studio code) here, https://ucs-detect.readthedocs.io/sw_results/VisualStudioCode.html#variation-selector-16-support and you can run the tests locally while developing by using ucs-detect

The full list of Emoji characters that become wide when joined by VS-16 is here, https://unicode.org/Public/15.1.0/ucd/emoji/emoji-variation-sequences.txt

Some additional documentation in the code generation function that parses this unicode data file,
https://github.com/jquast/wcwidth/blob/3a9f471acc936740fbfd268ea9120eb1ca17822d/bin/update-tables.py#L363-L402

And the code tables generated by that code,
https://github.com/jquast/wcwidth/blob/master/wcwidth/table_vs16.py

I hope this is helpful, these results are preliminary and they may change in the coming weeks as I make minor changes, and I will also be publishing a detailed article. Best wishes!

[nguyendviet]

Hey. I have the same problems with these emojis/icons

I've tried different fonts as suggested above but they don't work for me.

[azzamsa]

@nguyendviet Have you found the solution?

Most emojis displayed correctly on my end, but the warning emoji. It is displayed as a symbol.

[nguyendviet]

@azzamsa No. I still have this issue.

[PremBharwani]

@jeanlescure
Were you able to solve this for linux? I am facing the same issue. TIA!

[CoryLR]

I'm facing this issue on macOS. I'd like to use the warning emoji (⚠️), but it's showing up like a white outline (⚠) in VS Code. Removing Menlo from my font list does not resolve the issue. Adding "Apple Color Emoji" to the font list does work, but it makes other things like regular integer numbers look really bad. Anyone have a fix?

Here's my VS Code version information:

Version: 1.87.0 (Universal)
Commit: 019f4d1
Date: 2024-02-27T23:42:56.944Z
Electron: 27.3.2
ElectronBuildId: 26836302
Chromium: 118.0.5993.159
Node.js: 18.17.1
V8: 11.8.172.18-electron.0
OS: Darwin arm64 23.3.0

[p-i-]

Monaco, 'Apple Color Emoji' works on my mac.
✏️ ⚠️ ☣️ ♻️ ☎️ ‼️ ⁉️ all render, although the last 2 come out white (not red).
ref #223483