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)

[andrewitsover]

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.

[andrewitsover]

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:

[andrewitsover]

@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