How to add and use emojis in VS Code?

Emojis have revolutionized our communication, adding playful and expressive elements to our messages. But what about code? Are they actual, valuable tools for your coding toolkit?

Visual Studio Code (VS Code) lets you seamlessly integrate emojis into your code, comments, and documentation, adding a touch of creativity and clarity to your projects. That said, you don’t want to overdo it and look silly – just a touch of creativity and you’re good to go.

Let’s start with how to add emojis in VS code and we’ll figure out the usage afterwards. Here’s how you can use emojis in VS Code:

1. Native emoji Keyboard shortcuts:

Windows and MacOS have built-in emoji keyboards, which you can access with keyboard shortcuts. For Windows, use Windows Logo + ‘. ’; for MacOS, use control + command + spacebar; and for Linux, use Windows Logo + ‘; ’.

2. Emoji extensions in VS Code:

There are quite a few extensions you can search and download from the VS Code marketplace that let you put emojis in your code files.

You can search for these emoji extensions in VS Code’s extension marketplace. You can visit the marketplace from the icon in the left (vertical) menu bar or using a shortcut (use Ctrl+Shift+X on Windows or Cmd+Shift+X on macOS).

As I said, there are quite a few of these extensions. The one that I would recommend is emojisense. Here’s how you can use them:

How to use emojisense: in VS Code?

To use emojisense: with any programming language you will need to download the extension and set it up. Here’s a step-by-step guide to how you can do it:

Step 1: Install the extension from the VS code marketplace.

Step 2: After you have installed the extension, go to settings>extensions>: emoji sense: and select edit in settings.json.

Step 3: Once the JSON file opens, you can add the language of your choice under “emojisense. languages” and set its value to “true.” Then, save the changes and close settings.json.

Step 4: To use EmojiSense, simply type a colon (:) followed by the start of the emoji name in any text file. A popup should appear with emoji suggestions. For example, typing: smile will show the ???? emoji and similar ones. Select the desired emoji from the list to insert it into your document.

Step 5: If you notice any issues after installation, restarting VS Code can help ensure that all features of the EmojiSense extension are active and functioning correctly.

3. Unicode Hex Code:

Another neat way to add emojis directly to your code is using Unicode escape sequences. These sequences usually look something like this: \u{1F600}, where 1F600 is the hex code for the grinning face emoji ????. You can find the specific Unicode for any emoji by checking out sites like Unicode.org or other catalogues.

Just a heads up, to make sure these emojis appear correctly in your code, you’ll need to save your file with UTF-8 encoding. UTF-8 can handle all Unicode characters, ensuring your emojis appear as intended.

You can easily set this up in VS Code by clicking on the encoding status in the bottom status bar—it might show something like UTF-8 or UTF-16. From there, just choose “Save with Encoding” and select “UTF-8”.

This method is handy and works seamlessly across different platforms, so your emojis will always look right, no matter where your code ends!

4. Code Snippets:

You can create custom snippets in VS Code for frequently used emojis. Each snippet can be configured to insert specific emojis when a certain keyword is typed. Creating snippets can be particularly useful if you often use certain emojis in your comments or documentation.

Here’s how to set up and use custom snippets for emojis in VS Code for Python:

1. Open VS Code.
2. Go to the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
3. Type “Configure User Snippets” and select it.
4. Type “python” to select the Python-specific snippets file, or choose “New Global Snippets file” if you want your snippets to be available across all languages.
5. In the JSON file that opens, you can define your snippets. Here’s an example of two Python-specific snippets that include emojis:
   • Happy Comment: Add a comment line with a smiling face emoji.
   • TODO Comment: Insert a TODO comment with a thinking face emoji.
6. Once you’ve saved your snippets file, you can start using them in your code by typing the snippet prefix (e.g., happy comment or todo comment), then pressing Tab or Enter when the snippet suggestion pops up. This will insert the snippet’s content where your cursor is.

You can add as many snippets as you want, following the same format, tailoring them to your specific needs and commonly used emojis.

Using snippets like this speeds up coding and can help standardise comments or notes across projects, making them more readable and fun.

Why use emojis in VS Code?

Emojis have burst onto the scene in Visual Studio Code, turning ordinary lines of code into fun, engaging scripts. They can help convey emotions and add more context to your code, making it more expressive and engaging.

Emojis can be added not only to your code comments but also to your commit messages and markdown files. Some ways emojis help improve your code are:

• Enhanced Readability: Emojis can break up text-heavy comments or documentation, making scanning and understanding easier.
• Visual Cues: Emojis can help highlight important sections of code or denote specific functionalities, acting as visual cues that speed up the development process.
• Engagement: Documentation with emojis tends to be more engaging and less daunting for new developers or non-technical stakeholders who might be reviewing project files.
• Personalisation: Emojis allow programmers to express their personality and creative flair in their work environment, making routine coding tasks more enjoyable.

For example, when writing a code I often use backhand index finger emojis (????) in the comments after writing something like “the function below executes the following task.”

Incorporating emojis into your coding practice with VS Code can not only make your projects more lively but also contribute to clearer and more effective communication within your development team.