VScode Extensions for Documentation

Typically, documentation is the last mile of any data (science, engineering, visualization, etc.), engineering, or software-related project. This includes creating and editing documents such as library documentation, README files, tutorials, and others. One of the things I like about VScode is its amazing extension ecosystem, particularly the ones for creating, editing, and working with documentation. This post reviews my favorite extensions for documentation in VScode.

Editing Draw.io diagram with the Draw.io Integration extension (image credit: Rami Krispin)

Quarto

Quarto is an amazing ecosystem for creating scientific documentation in R, Python, Julia, and Observable. It enables the creation and editing of different types of documentation, such as articles, presentations, dashboards, websites, blogs, and books in HTML, PDF, MS Word, ePub, and more. The VScode’s Quarto extension enables seamless editing and rendering of qmd files. It comes with a preview mode that enables you to edit the document code and preview the outcome side-by-side.

The Quarto Preview (image credit: Rami Krispin)

Jupyter

Jupyter is one of the most popular frameworks, mainly in Python, for creating notebooks. I love using Jupyter to prototype Python code and as supporting documentation for Python tutorials, as it renders markdown and Python code nicely, and GitHub supports it. In addition, I recently started using it with Quarto docs for Python. The VScode Jupyter extension integrates the Jupyter notebooks inside the VScode editor, supporting ipynb files.

Jupyter notebook in VScode (image credit: Rami Krispin)

Markdown All in One

One of the reasons that most of my tutorials started as README files is thanks to the Markdown All in One extension. This extension enables the edit markdown documentation interactively, having the code and output side-by-side.

Editing markdown file with the Markdown All in One extension (image credit: Rami Krispin)

Draw.io Integration

I love to use diagrams and workflow chats to illustrate concepts in my tutorials. The main tool I am using to create those diagrams is Draw.io, an open-source tool for diagramming. Typically, I use the desktop version to build complex diagrams and fine-tune and edit on VScode using the Draw.io Integration extension.

Creating a Draw.io diagram with the Draw.io Integration extension (image credit: extension website)

Mermaid

While I am not using Mermaid, I found this tool very useful if you want to create a code base or dynamic diagram. There are mainly two extensions in VScode to work with mermaid format — Mermaid Preview and Markdown Preview Mermaid Support.

Editing mermaid diagram in markdown file using the Markdown Preview Mermaid Support extension (image credit: extension)

Obviously, there are many other good VScode extensions out there that you find useful. Feel free to leave a comment below.

Happy documentation!