Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add VSCode extension documentation #20385

Merged
merged 25 commits into from
Nov 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/content/guides/developer/getting-started/sui-install.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,14 @@ Sui requires the following additional tools on computers running Windows.

With Sui installed, you can interact with Sui networks using the Sui CLI. For more details, see the [Sui CLI](/references/cli.mdx) reference.

## Installing Sui developer tools

If you use VSCode, you can install the [Move extension](https://marketplace.visualstudio.com/items?itemName=mysten.move) to get language server support for Move, as well as support for building, testing, and debugging Move code within the IDE.
You can install the extension either by searhing the fully-qualified extension name, `Mysten.move`, in the extension view, or by pressing `Ctrl-P` or `Cmd-P` and typing `ext install mysten.move`.
Installing the Move extension also installs the appropriate `move-analyzer` binary for your operating system, as well as the [Move Trace Debugger](https://marketplace.visualstudio.com/items?itemName=mysten.move-trace-debug) extension, and [Move Syntax](https://marketplace.visualstudio.com/items?itemName=damirka.move-syntax) extension.

There are also community Move packages for [Emacs](https://github.com/amnn/move-mode) and [Vim](https://github.com/yanganto/move.vim).

## Next steps {#next-steps}

Now that you have Sui installed, it's time to start developing. Check out the following topics to start working with Sui:
Expand Down
11 changes: 11 additions & 0 deletions docs/content/references.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,17 @@ Access Sui Move functions on chain using the Sui Move CLI.
</Card>
</Cards>

## Sui IDE support

Use the [Move](https://marketplace.visualstudio.com/items?itemName=mysten.move) and [Move Trace Debugger](https://marketplace.visualstudio.com/items?itemName=mysten.move-trace-debug) extensions for VSCode to quickly navigate and edit your Move codebase, and debug execution traces.

<Cards>
<Card title="Move" href="references/ide/move"/>
<Card title="Move Trace Debugger" href="references/ide/debugger"/>
</Cards>



## Sui software development kits

Official software development kits (SDKs) available for Sui include the TypeScript SDK and Rust SDK.
Expand Down
4 changes: 4 additions & 0 deletions docs/content/references/cli/cheatsheet.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,10 @@ The cheat sheet highlights common Sui CLI commands.
<td class="w-2/3">`sui move test`</td>
<td class="w-1/3">Test the Move project in the current directory</td>
</tr>
<tr>
<td class="w-2/3">`sui move test --trace-execution`</td>
<td class="w-1/3">Create an execution trace for the Move tests in the current directory. Use with the [Move Trace Debugger](https://marketplace.visualstudio.com/items?itemName=mysten.move-trace-debug) extension.</td>
</tr>
</tbody>
</table>

Expand Down
66 changes: 66 additions & 0 deletions docs/content/references/ide/debugger.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
title: Move Trace Debugger
description: Debug Move execution traces directly in VS Code to understand how your code executes.
---
tedks marked this conversation as resolved.
Show resolved Hide resolved

The [Move Trace Debugger](https://marketplace.visualstudio.com/items?itemName=mysten.move-trace-debug) extension for Visual Studio Code provides a familiar debugging interface for Move unit tests. You can step through code execution, track local variable values, and set line breakpoints to understand how your Move code executes.

## Install

tedks marked this conversation as resolved.
Show resolved Hide resolved
:::info
You must have the [Move extension](./move.mdx) installed to use the debugger. The Move extension includes the Move Trace Debugger so you should not need to install it separately. The install instructions are included for rare cases where an individual install might be necessary.
:::

The Move Trace Debugger extension is available in the Visual Studio Code Marketplace. Search for `Move Trace Debugger` in the **Extensions** view, or press <kbd>Ctrl</kbd> + <kbd>P</kbd> or <kbd>⌘</kbd> + <kbd>P</kbd> and type `ext install mysten.move-trace-debug`.

Alternatively, run `code --install-extension mysten.move-trace-debug` to install the extension from the command line.

## Usage

:::tip[Tracing]

To use the debugger, you must also have the `sui` binary installed with the `tracing` feature flag enabled. The `sui` binaries in release tarballs, Homebrew, and Chocolatey have this feature enabled. See [Install Sui](../../guides/developer/getting-started/sui-install.mdx) for more information, including how to build from source.

:::

Debugging a Move unit test is a two-step process:

**I. Generate execution traces**
1. Open the command palette (<kbd>Shift</kbd> + <kbd>⌘</kbd> + <kbd>P</kbd> on macOS, <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> on Windows/Linux).
1. Run the `Move: Trace Move test execution` command.

![Move Trace generation in the command palette](./images/trace_palette.png)
1. The extension displays a filter prompt. Either type a filter string to target specific tests or leave the field blank to run all tests and press <kbd>Enter</kbd>.

![Move Trace generation filter string](./images/filter_string.png)
1. Find the generated traces in the `traces` directory.

**II. Start debugging**
1. Open the Move file containing your test.
1. Select **Run** -> **Start Debugging** from the menu.

![Start debugging](./images/start_debugging.png)
1. If the file has multiple tests, select the specific test from the dropdown menu.

![Test selection](./images/test_selection.png)


## Features

tedks marked this conversation as resolved.
Show resolved Hide resolved
Currently, the Move Trace Debugger supports basic forward debugging through test execution traces.

Support for reverse debugging and watch expressions is not currently available.

### Stepping through code execution

Move Trace Debugger supports standard debugging features like step over, step into, step out, continue, and stop. You can step through normal code and Move macros.

![Stepping through code execution](./images/debugger_running.png)

### Tracking variable values

Move Trace Debugger supports displaying the values of primitive types, Move structs, and references.

At present, the debugger doesn't support setting watch points on variables.

![Variable values](./images/variables.png)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/content/references/ide/images/commands.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/content/references/ide/images/hover_fun.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/content/references/ide/images/inlay_hint.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/content/references/ide/images/variables.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
94 changes: 94 additions & 0 deletions docs/content/references/ide/move.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
---
title: Move Analyzer VS Code Extension
sidebar_label: Move Analyzer
description: The Move extension provides language support features like code navigation, completion, and diagnostics for Move source code.
---
tedks marked this conversation as resolved.
Show resolved Hide resolved

The Move Analyzer extension for Visual Studio Code provides language support features for the Move programming language. It enables syntax highlighting, code completion, and advanced features like definition linking and type checking.

## Install

You can install the Move extension from the Visual Studio Code Marketplace:

1. Open VS Code.
1. Open the **Extensions** view (<kbd>⇧</kbd> + <kbd>⌘</kbd> + <kbd>X</kbd> on macOS, <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> on Windows/Linux).
1. Search for `mysten.move`.
1. Click **Install** on the Move extension by Mysten Labs.

Alternative install methods include:

- Use <kbd>Ctrl</kbd> + <kbd>P</kbd> or <kbd>⌘</kbd> + <kbd>P</kbd> and type `ext install mysten.move`.
- Use the command line:

```bash
code --install-extension mysten.move
```

The following extensions are included in the Move extension install:

- [Move Syntax](https://marketplace.visualstudio.com/items?itemName=damirka.move-syntax)
- [Move Trace Debugger](https://marketplace.visualstudio.com/items?itemName=mysten.move-trace-debug)

### Install move-analyzer

The Move extension attempts to install the appropriate `move-analyzer` binary for your platform. If this doesn't work, or you prefer to install it manually, build it with Cargo:

```bash
cargo install --git https://github.com/MystenLabs/sui.git sui-move-lsp
```

By default, the Move extension expects to find the `move-analyzer` binary in `~/.sui/bin`. You can either copy the binary to this location, or configure the extension to use a different path.

## Features

tedks marked this conversation as resolved.
Show resolved Hide resolved
The Move extension supports most Language Server Protocol features, as well as basic commands for building, testing, and tracing Move code.

### Build, test, and trace

The Move extension installs command palette commands for building, testing, and tracing Move code.

![Move commands in the command palette](./images/commands.png)

These commands find the `Move.toml` file for the open Move source file and open a terminal to run the appropriate `sui move` command.

To generate a trace, you must have a trace-capable `sui` binary. See [Debugger](./debugger.mdx) for more information.

### Syntax highlighting

The [Move Syntax](https://marketplace.visualstudio.com/items?itemName=damirka.move-syntax) extension provides syntax highlighting.

### Hover information

Hovering over identifiers shows type information, struct fields and attributes, and docstrings (if any) for the identifier. This works for all Move symbols including macros.

- Hover over structs to see structure and definition.

![Struct hoverover](./images/hover_struct.png)

- Hover over functions for details and definition.

![Function hoverover](./images/hover_fun.png)

- Hover over macros for their functionality.

![Macro hoverover](./images/hover_macros.png)

### Code completion

The Move extension autocompletes upon a dot operator, displaying the available methods and fields for the type.

![Code completion](./images/dot_completion.png)

The Move extension also autocompletes after a `::` operator.

![Type completion](./images/colon_completion.png)

Finally, the Move extension provides "inlay hints," where the plugin automatically inserts the correct type after a variable declaration, unpack, function parameters, and other places.

![Inlay hints](./images/inlay_hint.png)

### Navigation

The Move extension supports `go-to-definition` navigation for all Move symbols including types, functions, and macros, as long as the type was present when `move-analyzer` last built the file.

The extension also supports `find-references` for functions, macros, constants, and types.
9 changes: 9 additions & 0 deletions docs/content/sidebars/references.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,15 @@ const references = [
'references/cli/validator',
],
},
{
type: 'category',
label: 'Sui IDE Support',
collapsed: false,
items: [
'references/ide/move',
'references/ide/debugger',
],
},
{
type: 'category',
label: 'Sui SDKs',
Expand Down