How to edit Markdown files in VSCode with live preview of changes

Visual Studio Code (VSCode) is a great tool for editing Markdown files. It’s not immediately obvious that VSCode comes out of the box with the capability to preview Markdown files and even provide a side by side live preview view so you can see the result as you are modifying the file.

In VSCode opening the file will provide the standard file editing experience (as shown on the right hand side of the image below). Without having to remember VSCode keyboard shortcuts, you can simply right click the markdown file and select Open Preview.

This will result in the preview of the markdown file being opened in a new tab.

We can go one step further using the Split Editor button in VSCode to get both the editing experience and preview side by side.

You now have a live preview, any changes made in the editor (left side) are immediately reflected in the preview (right side)