Useful VScode extensions for working with documentation

As a rule, working with documentation is the last stage of any project related to data (data science, data visualization, etc.), design and software development. We're talking about creating and editing libraries, README files, tutorials, etc. Among all the advantages of VScode is its unique ecosystem of extensions. And especially impressive are those that help you work with documentation. In this article I will share the most useful of them.

Working with a Draw.io diagram using the Draw.io Integration extension (illustration: Rami Krispin)

Quarto

Quarto – a cool thing for working with documentation for R, Python, Julia and Observable. The extension allows you to create and edit different types of documents in HTML, PDF, MS Word, ePub formats. These could be articles, presentations, dashboards, websites, blogs, books, etc.

Quarto extension for VScode will help you easily edit and render QMD files. It has a preview mode that allows you to change the document code and view the result at the same time.

Quarto preview (illustration: Rami Krispin)

Jupyter

Jupyter is one of the most popular note-taking frameworks, especially in Python. My favorite use of Jupyter is for designing in Python and as supporting documentation for its tutorials. Jupyter does a great job of displaying markup and formatting for Python code, plus it's supported by GitHub. I also recently started using Jupyter along with the Quarto documentation for Python.

Extension VScode Jupyter integrates Jupyter notes into the VScode editor and supports ipynb files.

Jupyter Note in VScode (Illustration: Rami Krispin)

Markdown All in One

Thanks in part Markdown All in One extension most of the tutorials I've written are in the form of README files. With this extension it is convenient to edit documentation in Markdown format. It places two windows side by side: a code editor and then the result.

Draw.io Integration

I like to use diagrams and diagrams to explain concepts in my teaching materials. The main tool I use for this is Draw.io. It is an open source charting tool. I make complex diagrams in the desktop version of the tool, and then modify them in VScode using the extension Draw.io Integration.

Mermaid

Even though I don't use it Mermaid, but I find this tool very useful if you need to create a codebase structure or dynamic diagram. VScode has two extensions for working with Mermaid files − Mermaid Preview And Markdown Preview Mermaid Support.