Custom Emoji Render

Renders custom chat emoji references inline in the editor, so that <:pepega:123456789012345678> in your bot code actually shows the picture instead of a number you have to look up.

What it renders

Do I need an account or a token?

No. The extension never authenticates, never asks for a token, and never calls any web API. It reads emoji IDs out of your text and fetches the matching image from the public emoji CDN, which serves any valid ID unauthenticated:

https://cdn.discordapp.com/emojis/EMOJI_ID.png?size=64
https://cdn.discordapp.com/emojis/EMOJI_ID.gif?size=64   # animated ones

Names are the only thing that needs help, because a bare :name: contains no ID:

• You have <:name:id> in your code → nothing needed. The ID is in the text.
• You have only :name: → teach it the mapping once, with Emoji Render: Import Emoji Mappings… (paste any amount of <:name:id> text or "name": "id" pairs), Emoji Render: Add Emoji Mapping Manually…, or the emojiRender.emojis setting.

To get an ID out of a chat client: type \:youremoji: in a message and send it. The raw form <:youremoji:123456789012345678> is posted — copy that. Selecting your bot's emoji dictionary in your own source and importing it works too.

Install

From a .vsix file (what you send to other people)

Nothing to build and nothing to install first — not even Node. Take the custom-emoji-render-0.1.0.vsix file and either:

• In VS Code: Extensions panel → … menu (top right) → Install from VSIX… → pick the file → Reload Window, or
• From a terminal:

code --install-extension custom-emoji-render-0.1.0.vsix

The file is ~16 KB, so it goes through chat, email or any file share fine. It is not signed, so VS Code will note that it came from outside the Marketplace — that is expected for a sideloaded extension.

To remove it again:

code --uninstall-extension LeonHoletz.custom-emoji-render

Building the .vsix yourself

Only needed if you changed the source. Requires Node:

npx @vscode/vsce package --allow-missing-repository --no-dependencies

Running it from source

Open this folder in VS Code and press F5 ("Run Extension"). There is no build step and no dependencies — the extension is a single JavaScript file.

Commands

Settings

How rendering works

VS Code emits decoration content icons as content: url(...). Chromium ignores width and height on that replaced content, so the image's intrinsic size is the rendered size — there is no way to scale it from CSS. The size therefore has to be decided at download time, and the CDN happily serves arbitrary sizes (?size=17 returns a real 17x17 PNG), so the icon is fetched at exactly the size it will be drawn at. Each emoji is downloaded once and cached under the extension's global storage directory.

Auto sizing aims for round(fontSize × 1.15), capped at lineHeight - 4. The cap matters: an icon taller than the line box stretches the line and drags the icon out of alignment with the text.

The one real trap, if you ever build something similar: context.globalStorageUri uses the vscode-userdata: scheme, not file:. workspace.fs reads and writes it happily, so the cache looks perfectly healthy — but decoration CSS only rewrites file: URIs to the internal vscode-file: protocol the renderer can fetch. Any other scheme is emitted verbatim, the browser never issues a request, and the icon renders as an empty box of exactly the right size with nothing in the logs. Anchor the cache with vscode.Uri.file(context.globalStorageUri.fsPath).

renderMode: "replace" hides the source text via display: none. It looks cleaner but cursor movement through the hidden text feels odd, which is why after is the default.

Troubleshooting

• Nothing renders → check the emoji ID is 15–25 digits, and open View → Output → Emoji Render for fetch errors.
• Deleted emojis return CDN 404 and are skipped (logged once per session).
• Behind a proxy, the CDN fetch will fail; the log shows the error.