vscode: Some emojis not displaying correctly in VSCode macOS

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: Screen Shot 2021-03-13 at 10 27 29 PM
  3. I haven’t tested all emojis. But most others seem to be displaying as expected. For example, Screen Shot 2021-03-13 at 10 31 21 PM
  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,
};

  1. 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. Screen Shot 2021-03-13 at 11 04 32 PM

    • The 🛠️ :hammer_and_wrench: and ⬇️ :arrow_down: emojis, although displaying correctly, do not show a space after. Screen Shot 2021-03-13 at 11 06 06 PM

    • The ⬆️ :arrow_up: emoji should have a space after it Screen Shot 2021-03-13 at 11 06 52 PM

    • The 🖥️ :desktop_computer: emoji should have a space after it Screen Shot 2021-03-13 at 11 09 12 PM

    • The 🏷️ :label: emoji should have a space after it Screen Shot 2021-03-13 at 11 08 00 PM

  2. 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.
<div> Screen Shot 2021-03-13 at 11 21 42 PM </div> <div> Screen Shot 2021-03-13 at 11 22 11 PM </div> <div> Screen Shot 2021-03-13 at 11 22 46 PM </div> <div> Screen Shot 2021-03-13 at 11 23 21 PM </div> <div> Screen Shot 2021-03-13 at 11 24 06 PM </div>

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:

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

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Reactions: 18
  • Comments: 23 (9 by maintainers)

Most upvoted comments

@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:

Screen Shot 2021-03-20 at 4 44 46 PM Screen Shot 2021-03-20 at 4 44 25 PM

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.

+16
meredithmurfin on Mar 20, 2021

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.

🙌

+6
DYW972 on Jan 21, 2022

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’”,

image

+5
yorks-dev on May 27, 2021

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

image

image

+5
alexdima on Mar 18, 2021

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)
+4
p-i- on Mar 16, 2021

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

+2
thebinarysearchtree on Mar 19, 2021

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:

image

Safari:

image

+2
alexdima on Mar 19, 2021

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.

+2
thebinarysearchtree on Mar 19, 2021

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?

+1
anodetamer on Dec 8, 2022

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.

+1
jeanlescure on Jun 24, 2021
Read more comments on GitHub
← vscode: Snippets | Clipboard is not working
vscode: Some shells don't remember history →