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:
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:
The traditional source code editor for editing
.qmd
documents as text.The Visual Editor for editing
.qmd
documents using a word-processor style interface.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:
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:
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:
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:
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:
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:
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:
- Help/documentation is shown when editing code
- A realtime preview of equations is shown when editing LaTeX math
- 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:
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:
Here we see a Graphviz diagram preview automatically updated as we edit:
YAML Intelligence
YAML code completion is available for project files, YAML front matter, and executable cell options:
If you have incorrect YAML it will also be highlighted when documents are saved:
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:
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 forPreferences: Open Settings (UI)
orFile
>Preferences
>Settings
- Search for following term
@lang:quarto editor.snippetSuggestions
.Editor: Snippet Suggestions
should show up. - Change value to a not-
none
value.
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:
The Visual Editor for editing
.qmd
documents using a word-processor style interface.The Notebook Editor for editing Jupyter notebooks that you will render with Quarto.