Using Visual Studio Code

Beginner

IDE

Tutorial

Overview

Visual Studio (VS) Code is a widely used open-source IDE which supports canister development in Motoko and Rust.

Motoko

The Motoko VS Code extension provides type checking, formatting, autocompletion, go-to-definition, code snippets, and more for Motoko canister development.

Try the extension in your browser with a full-stack Vite + React + Motoko starter project:

Installation

Install the extension through the VS Marketplace, or alternatively the Extensions panel in your VS Code project.

VSCodium users can download the extension from Open VSX or the GitHub releases page.

Keyboard shortcuts

Below are the default key bindings for commonly used features supported in the extension:

• Code formatter (Shift + Alt + F): format a Motoko file using prettier-plugin-motoko.
• Organize imports (Shift + Alt + O): group and sort imports at the top of your Motoko file.
• Import code action (Ctrl/Cmd + . while hovering over an unresolved variable): show import quick-fix options.
• Go to definition (F12): jump to the definition of a local or imported identifier.
• IntelliSense (Ctrl + Space): view all available auto-completions and code snippets.

Other features

• Vessel and MOPS (the two most popular Motoko package managers) are supported out-of-the-box in this extension.
• Quickly convert between Motoko types using code snippets such as array-2-buffer or principal-2-text.
• In case you're hoping to learn Motoko without installing dfx, the Motoko VS Code extension works standalone on all major operating systems (including Windows).
• This extension also provides schema validation and autocompletion for dfx.json config files.
• View type information and documentation by hovering over function names, imports, and other expressions.

Contributing

The Motoko VS Code extension is completely open-source and available on GitHub.

Rust

Please refer to the official Rust in Visual Studio Code documentation to configure your workspace for developing Rust canisters.