VS Code extension

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:

;; 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:

;; 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:

;; 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

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

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

Visual debugging

The extension includes a visual debugger for step-by-step code execution:

1. 1Set breakpoints by clicking line numbers
2. 2Press F5 or use Run → Start Debugging
3. 3Step through code line-by-line
4. 4Inspect variables and stack state

Comparison table

Best practices

• Hover before assuming - Check function documentation inline
• Let auto-completion guide you - Use suggestions to avoid typos
• Pay attention to squiggles - They catch real issues early
• Use the debugger - Step through complex logic visually

Common misconceptions

Further reading

• Installation guide
• Setting up VS Code for Clarity
• Debugging with Clarinet