Fotoallerlei

Typing en and em dashes in VS Code

May 25, 2020Max Rosin

In written text there are (at least) three different types of dashes: the hypen -, the en dash – and the em dash —. They almost look the same and often the hyphen is wrongly used instead of the en or em dash because it is the easiest to type with the - key on the keyboard. But the hypen is only meant to be used to connect two words, e.g. home-office, or to split words on a line break. The en dash is used to define a range (e.g. timespan or distance) between two things, e.g. 3–4 meters or June–August. And then there is the em dash, it is mostly used to put additional parts in the middle or at the end of a sentence, a bit similar to parentheses. The use of an em dash is a stylistic element that depends on the taste of the author and reader of a text — some like it, some don't. That's only a short summary and there are some additional use-cases and rules but that's not really the point of this post, so please check out the internet if you are interested in this in more detail.

Other then for the hyphen there are no¹ keys for the en and em dashes on the keyboard. Actual word processing software like LibreOffice, Microsoft Word or Google Docs usually detects the context of a used hyphen and replaces it with an en or em dash if necessary. They often also have the option to replace -- with an en dash and --- with an em dash.

But VS Code isn't a word processor, it is an IDE. It is mostly used to write code or other plain text files and it doesn't care about typographic subtleties like en dashes. But I care and I write my blogposts in VS Code in markdown. So I was looking for an easy way to type – and — in VS Code. After searching around for a bit I found this Stack Overflow post that recommends snippets.

Snippets are a way in VS Code to store some small text fragments and easily paste them in the editor later. To find more about snippets please have a look at the documentation. To solve the task at hand go to Configure User Snippets in the command palette and create a new file (or select an existing one). In the file paste the following snippet and save it:

{
  "– en": {
    "prefix": "--",
    "body": "–"
  },
  "— em": {
    "prefix": "---",
    "body": "—"
  }
}

From now on you can type -- or ---, hit Ctrl/Cmd-Space to open the suggestions and select the respective snippet. This will replace -- with – and --- with —. This way it is super easy to use -, – and — in VS Code which makes my life a bit easier.