Repository: vscode
Issue: Some emojis not displaying correctly in VSCode macOS
Labels: upstream,macos,font-rendering,upstream-issue-linked

<!-- ⚠️⚠️ Do Not Delete This! bug_report_template ⚠️⚠️ -->
<!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ -->
<!-- 🕮 Read our guide about submitting issues: https://github.com/microsoft/vscode/wiki/Submitting-Bugs-and-Suggestions -->
<!-- 🔎 Search existing issues to avoid creating duplicates. -->
<!-- 🧪 Test using the latest Insiders build to see if your issue has already been fixed: https://code.visualstudio.com/insiders/ -->
<!-- 💡 Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. -->
- VS Code Version: 1.54.2
- OS Version: macOS Catalina 10.15.7
- Extensions installed:
    - [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
    - [Emoji](https://marketplace.visualstudio.com/items?itemName=Perkovec.emoji)
    - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
    - [eslint-disable-snippets](https://marketplace.visualstudio.com/items?itemName=drKnoxy.eslint-disable-snippets)
    - [Gatsby Snippets](https://marketplace.visualstudio.com/items?itemName=nickytonline.vscode-gatsby-snippets)
    - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
    - [Prettier ESLint](https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint)
    - [React Native Snippet](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native)
    - [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native)
    - [Sass]( https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented)
    - [Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero](https://marketplace.visualstudio.com/items?itemName=Wscats.eno)
    - [Simple React Snippets](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets)
    - [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
    - [Visual Studio Code Commitizen Support](https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-commitizen)
    - [yarn](https://marketplace.visualstudio.com/items?itemName=gamunu.vscode-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:
    <img width="181" alt="Screen Shot 2021-03-13 at 10 27 29 PM" src="https://user-images.githubusercontent.com/62190025/111056216-55b0dd00-844b-11eb-8955-5aaa15f04304.png">
3. I haven't tested all emojis. But most others seem to be displaying as expected. For example, 
    <img width="198" alt="Screen Shot 2021-03-13 at 10 31 21 PM" src="https://user-images.githubusercontent.com/62190025/111056289-d8d23300-844b-11eb-8914-08bf4bd274cd.png">
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](https://www.npmjs.com/package/commitizen), specifically with [cz-customizable](https://www.npmjs.com/package/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](https://gist.github.com/leohxj/7bc928f60bfa46a3856ddf7c0f91ab98)). 

<details>
    <summary>My .cz-config.js file</summary>

    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,
    };

</details>

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.
    <img width="422" alt="Screen Shot 2021-03-13 at 11 04 32 PM" src="https://user-images.githubusercontent.com/62190025/111056852-7c254700-8450-11eb-9bcf-b18f2ec10e76.png">
    
    - The 🛠️ `:hammer_and_wrench:` and ⬇️ `:arrow_down:` emojis, although displaying correctly, do not show a space after.
    <img width="396" alt="Screen Shot 2021-03-13 at 11 06 06 PM" src="https://user-images.githubusercontent.com/62190025/111056870-b55db700-8450-11eb-8ab8-8f93194d2c42.png">

    - The :arrow_up: `:arrow_up:` emoji should have a space after it
    <img width="399" alt="Screen Shot 2021-03-13 at 11 06 52 PM" src="https://user-images.githubusercontent.com/62190025/111056877-cefefe80-8450-11eb-9159-bb1325ce5cfe.png">

    - The 🖥️ `:desktop_computer:` emoji should have a space after it
    <img width="451" alt="Screen Shot 2021-03-13 at 11 09 12 PM" src="https://user-images.githubusercontent.com/62190025/111056909-21401f80-8451-11eb-8a84-056b9b416967.png">

    - The 🏷️ `:label:` emoji should have a space after it
    <img width="439" alt="Screen Shot 2021-03-13 at 11 08 00 PM" src="https://user-images.githubusercontent.com/62190025/111056890-f655cb80-8450-11eb-8791-3a8ac784d7a5.png">

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.
 
<div>
    <img width="419" alt="Screen Shot 2021-03-13 at 11 21 42 PM" src="https://user-images.githubusercontent.com/62190025/111057120-e17a3780-8452-11eb-9adc-a800709e6239.png">
</div>
<div>
    <img width="379" alt="Screen Shot 2021-03-13 at 11 22 11 PM" src="https://user-images.githubusercontent.com/62190025/111057126-f22aad80-8452-11eb-9079-130bf36698fa.png">
   </div>
<div>
     <img width="395" alt="Screen Shot 2021-03-13 at 11 22 46 PM" src="https://user-images.githubusercontent.com/62190025/111057142-066eaa80-8453-11eb-87d7-e3f5f84a49ea.png">
    </div>
<div>
    <img width="448" alt="Screen Shot 2021-03-13 at 11 23 21 PM" src="https://user-images.githubusercontent.com/62190025/111057156-1b4b3e00-8453-11eb-8659-18e52daac662.png">
    </div>
<div>
    <img width="450" alt="Screen Shot 2021-03-13 at 11 24 06 PM" src="https://user-images.githubusercontent.com/62190025/111057167-35851c00-8453-11eb-8a90-549659dfabba.png">
 </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

<details>
    <summary>My package.json</summary>

    {
        "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"
        }
    }

</details>

<details>
    <summary>My VS Code settings.json</summary>

    {
        // 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",
    }

</details>

### Similar Issues / Attempted Solutions:
- [Cannot display emoji ✔️, 🙋‍♂️ #32840](https://github.com/microsoft/vscode/issues/32840)
    - This issue is very similar, **but** it appears to be specific to VS Code on Windows
    - I attempted [this solution](https://github.com/microsoft/vscode/issues/32840#issuecomment-389704418) 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](https://github.com/microsoft/vscode/issues/32840)
    - 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](https://github.com/microsoft/vscode/issues/91357#issuecomment-611608143) from this issue's thread, but it didn't resolve my issue

<!-- 🔧 Launch with `code --disable-extensions` to check. -->
Does this issue occur when all extensions are disabled?: **Yes**

<!-- 🪓 If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. -->
<!-- 📣 Issues caused by an extension need to be reported direct to the extension publisher. The 'Help > Report Issue' dialog can assist with this. -->