Some emojis not displaying correctly in VSCode macOS

• 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,
};

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.

   • 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

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> </div> <div> </div> <div> </div> <div> </div> <div> </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": "[e-mail]",
        "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

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

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

🙌