> For the complete documentation index, see [llms.txt](https://docs.stacks.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stacks.co/clarinet/integrations/clarity-vscode-extension.md).

# Clarity VSCode Extension

<div data-with-frame="true"><figure><img src="https://284917788-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZz9BLmTU9oydDpL3qiUh%2Fuploads%2Fsyu1dBkoGGV6UBPQeEmW%2Fclarity-vsc-extension.png?alt=media&amp;token=c05148a2-198c-4374-9eb4-8ff0aca46a44" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
The [VSCode extension](https://marketplace.visualstudio.com/items?itemName=StacksLabs.clarity-stacks) for Clarity is now published under the Stacks Labs organization.
{% endhint %}

## Features

### Smart auto-completion

The extension provides intelligent code completion that understands Clarity's context. When you start typing any Clarity function, you get instant suggestions with documentation:

```clarity
;; Type "stx-tr" and get:
(stx-transfer? amount sender recipient)
;;             ^      ^      ^
;;             Placeholders for easy navigation
```

Use `Tab` to jump between placeholders and `Escape` to exit placeholder mode.

### Documentation on hover

Access comprehensive documentation without leaving your editor. Hover over any Clarity function or keyword to see:

```clarity
;; Hover over 'map-set' to see:
;; - Function signature
;; - Parameter descriptions
;; - Return type
;; - Usage examples
(map-set my-map {key: "value"} "data")
```

### Go-to definition

Navigate your codebase efficiently with jump-to-definition features:

* `F12` or `Ctrl+Click` - Go to definition
* `Alt+F12` - Peek definition without leaving current file
* Works across contract files and contract calls

### Real-time error checking

The extension validates your code continuously, providing immediate feedback:

* **Red squiggles** - Syntax errors, unknown keywords
* **Yellow squiggles** - Warnings for potentially unsafe code
* **Error list** - All issues in the Problems panel (`Ctrl+Shift+M`)

Common errors caught include undefined variables, type mismatches, missing trait implementations, and invalid function signatures.

### Local contract resolution

Auto-completion works across your entire project. Reference functions from other contracts in your workspace:

```clarity
;; Auto-complete local contract calls
(contract-call? .my-token transfer amount sender recipient)
;;               ^
;;               Suggests contracts in your project
```

### Trait support

When implementing traits (like SIP-009 NFTs or SIP-010 tokens), the extension verifies:

* All required functions are implemented
* Function signatures match trait definitions
* Return types are correct

```clarity
;; Extension warns if missing required trait functions
(impl-trait .sip-010-trait.sip-010-trait)

;; ⚠️ Warning: Missing required function 'get-balance'
```

### Visual debugging

{% stepper %}
{% step %}
**Set breakpoints**

Set breakpoints by clicking line numbers in the editor.
{% endstep %}

{% step %}
**Start debugging**

Press `F5` or use Run → Start Debugging to begin a debugging session.
{% endstep %}

{% step %}
**Step through code**

Step through code line-by-line to follow execution.
{% endstep %}

{% step %}
**Inspect state**

Inspect variables and stack state while paused at breakpoints.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Visual debugging requires VS Code Desktop and Clarinet installed locally.
{% endhint %}

## Comparison table

| Feature               | Basic Editor    | VS Code Extension       |
| --------------------- | --------------- | ----------------------- |
| Syntax highlighting   | Limited         | Full Clarity support    |
| Auto-completion       | None            | Context-aware with docs |
| Error checking        | On deploy only  | Real-time validation    |
| Documentation         | External lookup | Inline hover docs       |
| Debugging             | Console only    | Visual debugger         |
| Cross-file navigation | Manual          | Jump to definition      |

***

### Additional Resources

* \[[zed.dev](https://zed.dev/extensions?query=clarity)] Zed extension for Clarity


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.stacks.co/clarinet/integrations/clarity-vscode-extension.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.