Today’s post will be fairly short. We are going to talk about a pair of extensions for Visual Studio Code which make it easy to build markdown files.

Markdown All in One

The first tool of choice is a big one, Yu Zhang’s Markdown All in One. This extension provides several great features. One of my favorites is its support for creating a table of contents. After opening the Command Palette (Ctrl + Shift + P), select Markdown All In One: Create Table of Contents and it creates a ToC for you based on the heading markers you already have.

In addition to this, I also like the ability to create lists rather easily. The extension will help with renumbering and will automatically add the next number when you add a new line. If you tab in one level, it will start a sub-list.

The third critical feature is the ability to preview markdown files within VS Code. This is a major benefit, especially if you have a wide screen and can display text and preview side-by-side. I use this quite frequently when creating markdown-based instructions to ensure that all image links are correct, that lists are as they should be, and that I haven’t messed up any of the formatting along the way.

Finally, its image and text auto-complete are also great, especially when creating long markdown documents with lots of images. There are several other useful features to this extension and if you do any markdown work in Visual Studio Code, this extension is a must-have.

markdownlint

The other tool I want to cover is called markdownlint, by David Anson. This extension follows a set of markdown rules, covering things like header increments, trailing whitespace, bare URLs without descriptive text, and a whole lot more.

The linter runs automatically and adds squiggly lines whenever it spots an error. Here’s an example of one such error:

There’s your problem right there.

In this case, we used hyphens to delimit a list but the standard is asterisks.

Conclusion

If you do any markdown development in Visual Studio Code, get these extensions. They’ll make your life a lot easier. I know that there are other markdown-based extensions in the extension marketplace but these are the two I use on a near-daily basis.

One thought on “Markdown Like a Champ in Visual Studio Code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s