VS Code

Overview

Quarto can render Jupyter notebooks represented as plain text (.qmd) or as a normal notebook file (.ipynb). The Quarto VS Code Extension includes many tools that enhance working these documents, including:

  • Integrated render and preview for Quarto documents.
  • Syntax highlighting for markdown and embedded languages
  • Completion and diagnostics for YAML options
  • Completion for embedded languages (e.g. Python, R, Julia, etc.)
  • Commands and key-bindings for running cells and selected lines.
  • Live preview for LaTeX math as well as Mermaid and Graphviz diagrams

The Quarto extension integrates directly with the Jupyter, R, and Julia extensions. For example, here the Quarto extension runs a Python cell and shows contextual help for Python functions:

Screen shot of VS Code editor with three vertical sections. The leftmost includes the file explorer, and quarto help. The second pane is the source code for a quarto file with python code. The third is interactive with Python running and output of the code cells shown.

You can install the Quarto extension from the VS Code Extension Marketplace or the Open VSX Registry.

VS Code Editors

Depending on your prefernces and the task at hand, you can author documents for rendering by Quarto using three different editors within VS Code:

  1. The traditional source code editor for editing .qmd documents as text.

  2. The Visual Editor for editing .qmd documents using a word-processor style interface.

  3. The Notebook Editor for editing Jupyter notebooks that you will render with Quarto.

We’ll cover the the source code editor below, however you might also want to consult the documentation for the Visual Editor or Notebook Editor after you’ve become familar with the basics.

Render and Preview

The Quarto VS Code extension includes commands and keyboard shortcuts for rendering Quarto documents (both standalone and within websites or books). After rendering, quarto preview is used behind the scenes to provide a preview pane within VS Code alongside your document:

Two windows arranged side by side. The window on the left is a qmd file opened in VSCode. The contents of this document are the same as the first part of the Getting Started: Welcome section of this website. The contents of this document are rendered by Quarto in the window on the right.

To render and preview, execute the Quarto: Render command. You can alternatively use the Ctrl+Shift+K keyboard shortcut, or the Render button at the top right of the editor:

The top of the Visual Studio code editor. The right side of the editor tab area includes a Render button.

Note that on the Mac you should use Cmd rather than Ctrl as the prefix for all Quarto keyboard shortcuts.

Additionally, there are commands available to render specific formats. Here is a complete list of the supported render commands:

  • Quarto: Render
  • Quarto: Render HTML
  • Quarto: Render PDF
  • Quarto: Render DOCX

The Quarto: Render command renders the default format of the currently active document. The other commands render specific formats (regardless of the document’s default format). The Ctrl+Shift+K keyboard shortcut will re-execute the most recently executed render command.

Embedded preview is currently supported for HTML and PDF based formats (including revealjs and beamer slideshows). However, for Word and other formats you need to use an appropriate external program to preview the output.

Render on Save

By default Quarto does not automatically render .qmd or .ipynb files when you save them. This is because rendering might be very time consuming (e.g. it could include long running computations) and it’s good to have the option to save periodically without doing a full render.

However, you can configure the Quarto extension to automatically render whenever you save. You can do this either within VS Code settings or within the YAML options for your project or document. To configure the VS Code setting, search for quarto.render in settings and you’ll find the Render on Save option:

The Visual Studio Code Quarto render settings. The Render on Save option is checked.

You might also want to control this behavior on a per-document or per-project basis. If you include the editor: render-on-save option in your document or project YAML it will supersede whatever your VS Code setting is. For example:

editor:
  render-on-save: true

External Preview

If you prefer to use an external browser for preview (or have no preview triggered at all by rendering) you can use the Preview Type option to specify an alternate behavior:

VS Code settings interface with 'quarto preview type' entered into the search bar. User settings reveals Quarto > Render: Preview Type, with a dropdown to select location for document preview after render. The default, internal, is selected, which previews using a side-by-side panel in VS Code. The other two options in the dropdown are external and none.

Code Cells

There are a variety of tools that make it easier to edit and execute code cells. Editing tools include syntax highlighting, code folding, code completion, and signature tips:

A Quarto document in VS Code with a python code cell. There is a code completion helper active in the python cell.

For Python, R, and Julia cells, commands are available to execute the current cell, previous cells, or the currently selected line(s). Cell output is shown side by side in the Jupyter interactive console:

VS Code with two panes open, vscode.qmd source code on the right, and the interactive output of that code shown in a second pane on the left.

Here are all of the commands and keyboard shortcuts available for executing cells:

Quarto Command Keyboard Shortcut
Run Current Cell ⇧⌘ Enter
Run Selected Line(s) ⌘ Enter
Run Next Cell ⌥⌘ N
Run Previous Cell ⌥⌘ P
Run All Cells ⌥⌘ R
Run Cells Above ⇧⌥⌘ P
Run Cells Below ⇧⌥⌘ N

Enhanced features for embedded languages (e.g. completion, code execution) can be enabled by installing the most recent version(s) of these extensions:

Note that you can quickly insert a new code cell using the Ctrl+Shift+I keyboard shortcut.

Contextual Assistance

Execute the Quarto: Show Assist Panel command to show a panel in the sidebar that shows contextual assistance depending on the current cursor location:

  1. Help/documentation is shown when editing code
  2. A realtime preview of equations is shown when editing LaTeX math
  3. Thumbnail previews are shown when your cursor is located on a markdown image.

For example, below help on the matplotlib plot() function is shown automatically when the cursor is located on the function:

Screenshot of VS Code editor with three vertical sections. The leftmost includes the file explorer, and quarto help. The second pane is the source code for a quarto file with python code. The third is interactive with Python running and output of the code cells shown.

Live Preview

While editing LaTeX math or Mermaid and Graphviz diagrams, click the Preview button above the code (or use the Ctrl+Shift+L keyboard shortcut) to open a live preview which will update automatically as you edit.

Here we see a preview of the currently edited LaTeX equation displayed in the Quarto assist panel:

Quarto document open in VS Code with a LaTeX equation shown in the 'Quarto Equation' section of the panel to the left of the document.

Here we see a Graphviz diagram preview automatically updated as we edit:

A Quarto document being edited in Visual Studio Code, with a live preview of the currently edited diagram shown in a pane to the right

YAML Intelligence

YAML code completion is available for project files, YAML front matter, and executable cell options:

Quarto document with YAML being edited. Next to the cursor code completion helper is open showing YAML options beginning with the letters preceding the cursor ('co').

If you have incorrect YAML it will also be highlighted when documents are saved:

Quarto document YAML metadata with an incorrect option underlined in red.

Code Snippets

Code snippets are templates that make it easier to enter repeating code patterns (e.g. code blocks, callouts, divs, etc.). Execute the Insert Snippet command within a Quarto document to insert a markdown snippet:

Quarto document with dropdown 'Select a snippet' dropdown, the first item (bold - insert bold text) is selected.

IntelliSense

VSCode uses IntelliSense to suggest snippets or possible values for a specific function while typing. This is turned off by default for snippets, but not for values. To enable snippet suggestions in IntelliSense while typing or when selecting a text snippet and pressing ctrl+space, the setting editor.snippetSuggestions needs to be set to a value other than none (for example to inline).

  • Press F1 and search for Preferences: Open Settings (UI) or File > Preferences > Settings
  • Search for following term @lang:quarto editor.snippetSuggestions. Editor: Snippet Suggestions should show up.
  • Change value to a not-none value.

Document Navigation

If you have a large document use the outline view for quick navigation between sections:

Quarto document with outline view shown in left-hand panel. The outline shows the section headers of the quarto documents.

You can also use the Go to Symbol in Editor command or keyboard shortcut Ctrl+Shift+O for type-ahead navigation of the current document’s outline.

Use the Go to File command Ctrl+P to navigate to other files and the Go to Symbol in Workspace command Ctrl+T for type-ahead navigation to all headings in the workspace:

Quarto document in VS Code with command palette open showing the files in the project with the entered term, 'margin'.

Learning More

Besides the traditional source editor described above, you can also use one of the following other editors depending on your preferences and task at hand:

  1. The Visual Editor for editing .qmd documents using a word-processor style interface.

  2. The Notebook Editor for editing Jupyter notebooks that you will render with Quarto.