How I Transformed VSCode Into My Favorite Markdown Editor

by
Spread the love

Visual Studio Code (VSCode) is a popular source code editor, thanks to its multi-platform support, lightweight nature, and excellent extensibility. While it’s typically used by software developers, it has much to offer, even to those who write fiction and non-fiction in Markdown. Let me show you how I transformed VSCode into my favorite Markdown editor.

Content

VSCode Versus Dedicated Markdown Editors

Stock markdown editing in VSCode

There’s no shortage of excellent dedicated markdown editors, so why bother with VSCode customization? There are several reasons:

  • Cross-platform compatibility: VSCode runs seamlessly on all major platforms, including Windows, macOS, and Linux.
  • Rich feature set: VSCode has features that can make any writer’s life much easier. For instance, its Git integration allows for version control of your documents.
  • Flexible layout: the ability to display multiple documents or multiple sections of the same document side by side makes writing long-form content far more convenient.
  • Cost and license: unlike some premium Markdown editors, VSCode is completely free and open source.
  • Built-in markdown preview: VSCode can natively preview Markdown-formatted text, allowing you to instantly see what you’re doing.
  • Extensibility: perhaps the most significant advantage is VSCode’s vast ecosystem of extensions that allow you to customize the editor to your specific needs.

If this sounds good to you, go ahead and install VSCode. You’re just a few extensions away from turning VSCode into an excellent Markdown editor.

Essential Extensions for Markdown Editing in VSCode

First, fix the biggest limitation of VSCode as a Markdown editor: the lack of Markdown formatting shortcut support. Choose between Markdown All in One and Markdown Editor.

Markdown All in One extension page

I personally recommend Markdown All in One, as it’s actively developed, whereas Markdown Editor was last updated in 2021. The only reason I even mention Markdown Editor is its What You See Is What You Get (WYSIWYG) nature. Instead of using shortcuts or typing Markdown formatting manually, highlight a piece of text, and press a button to make it bold, turn it into a heading, etc.

To install either of the two extensions, navigate to the Extensions tab, and use the search bar to find the extension you’ve chosen. Click the Install button, and the extension will be activated.

Next, let’s install a spell checker. There’s no doubt that the best option is Code Spell Checker. It supports Markdown documents right out of the gate, and you can install dozens of additional language dictionaries if you write in languages other than English.

Code Spell Checker in action

Once installed, it will highlight misspelled words and suggest fixes. This is invaluable for catching those pesky typos that can slip through even the most careful proofreading.

You’re almost ready to start using VSCode as a powerful Markdown editor, but there’s still one important extension that you’re missing: markdownlint.

Demonstration of the Markdownlint extension

Markdownlint is a linting and style-checking tool for Markdown. It helps enforce consistency and the best practices in your Markdown writing. When you have markdownlint installed, it will highlight any lines that violate its rules with a wavy green underline.

The extension checks for a wide range of potential issues, from inconsistent heading levels and list indentation to trailing spaces and line length. It can even catch more subtle problems, like bare URLs or missing alternate text for images.

You should now have three Markdown extensions installed in VSCode. You can stop here, and move to the next section, or install a couple more extensions: Markdown Links, which adds a “Show Graph” command that displays a visual representation of the local links between Markdown files in your current working directory, and Markdown Preview Github Styling, which makes the native Markdown preview feature mimic the appearance of GitHub’s Markdown rendering.

Recommended Markdown-Friendly VSCode Themes

VSCode with the Dracula Official theme

While VSCode is, in my opinion, a visually appealing editor, even in its stock form, it’s good to know that you can customize its appearance by installing a readily available theme. There are thousands of themes to choose from, but several options stand out when it comes to Markdown editing:

  • Dracula Official: arguably the most popular theme in the world, its high contrast makes it excellent for long writing sessions, and its very active development guarantees compatibility with future versions of VSCode.
  • GitHub Theme: this theme is great for colorblind people and those who frequently publish their Markdown content on GitHub, as it closely reflects GitHub’s own color scheme.
  • Panda Theme: a dark theme with subtle colors that are meant to be easy on the eyes, while still providing clear syntax highlighting.

If you’re dealing with eye strain or find yourself writing for extended periods, you should also check out this list of VSCode themes that are easy on the eyes.

Advanced Features That Make Markdown Editing in VSCode Easier

VSCode offers several advanced features that can be very useful when editing Markdown-formatted fiction and non-fiction text.

Open the Preview to the Side icon in VSCode.

The main feature you should know about is the aforementioned native Markdown preview option. To activate it, click the Open Preview to the Side icon (it looks like a magnifying glass) in the upper-right corner of your editor. This split view lets you write in Markdown on one side, while seeing the formatted output on the other.

Notice there’s another button right next to the Open Preview to the Side icon. This one lets you Split Editor Right, and you can hold down the Option key on Mac or the Alt key on Windows/Linux to Split Editor Down.

Multi-cursor editing in VSCode.

Multi-cursor editing allows you to make identical changes in multiple places at once. Hold down the Option key on Mac or the Alt key on Windows/Linux, and click where you want to place additional cursors. Alternatively, select a word, and press Cmd + D on Mac or Ctrl + D on Windows/Linux to select the next occurrence of that word.

Markdown snippet creation in VSCode.

If you often find yourself writing the same sentences, paragraphs, and blocks of text over and over again, configure the Snippets feature so that you can insert them instantly. Navigate to Code -> Settings -> Configure User Snippets. Choose the New Snippets file for Markdown option, and name the snippet. Follow the official instructions to complete the snippet creation process.

Finally, I strongly recommend you become familiar with Git version control in VSCode. With its help, you can track changes in your writing over time and go back to a previous version of your document if needed. The official introduction to Git in VSCode provides a great starting point.

With the useful extensions, themes, and features described here, editing Markdown documents in VSCode should be efficient and even enjoyable. For larger writing projects, such as novels, you may want to look into Scrivener or one of its alternatives.

All images and screenshots by David Morelo.

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox

Sign up for all newsletters.
By signing up, you agree to our Privacy Policy and European users agree to the data transfer policy. We will not share your data and you can unsubscribe at any time. Subscribe


David Morelo –
Staff Writer

David Morelo is a professional content writer in the technology niche, covering everything from consumer products to emerging technologies and their cross-industry application. His interest in technology started at an early age and has only grown stronger over the years.

Leave a comment