Leptos Rust Suite VS Code Extension

A comprehensive VS Code extension that provides a complete Rust development experience with smart formatting, beautiful themes, and productivity snippets. Automatically formats Rust files using leptosfmt for Leptos components and rustfmt for regular Rust code.

Features

🚀 Smart Formatting

• ✅ Automatic formatting of Rust files (.rs) on save
• ✅ Smart formatter: uses leptosfmt for Leptos components, rustfmt for regular Rust code
• ✅ Automatic detection of Leptos components based on code patterns
• ✅ Configurable enable/disable formatting on save
• ✅ Customizable leptosfmt and rustfmt executable paths
• ✅ Error handling with helpful installation instructions
• ✅ No confirmation prompts - works seamlessly like Prettier

🎨 Visual Experience

• ✅ Leptos Rust color theme with eye-friendly dark colors
• ✅ Enhanced icon theme for Rust and Leptos files
• ✅ Professional GitHub-inspired color palette
• ✅ Optimized for long coding sessions

⚡ Productivity Tools

• ✅ 65+ Leptos code snippets for rapid development
• ✅ Rust-specific snippets for common patterns
• ✅ Smart autocomplete and IntelliSense support
• ✅ Context-aware formatting for different code types

Quick Start

1. Install Rust toolchain (includes rustfmt): curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
2. (Optional) Install leptosfmt for Leptos components: cargo install leptosfmt
3. Install this extension from the VS Code Extension Store
4. Open a Rust file and save - formatting happens automatically!
5. Switch to the "Leptos Rust" theme for the complete experience
6. Start using the 65+ code snippets for faster development

Prerequisites

The extension requires Rust toolchain for rustfmt (included with Rust). For Leptos components, you can optionally install leptosfmt:

Install Rust Toolchain (Required)

Install Rust (includes rustfmt):

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Verify installation:

rustfmt --version

Install leptosfmt (Optional, for Leptos components)

Install from crates.io:

cargo install leptosfmt

Verify installation:

leptosfmt --version

Platform-specific notes:

• Windows: Make sure rustfmt and leptosfmt are in your PATH or specify the full path in settings
• macOS/Linux: Should work out of the box if installed via rustup/cargo

Installation

From VS Code Extension Store (Recommended)

1. Open VS Code
2. Go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Leptos Rust Suite" or "leptos-rust-suite"
4. Click Install
5. The extension will be automatically enabled

Theme

The extension includes a beautiful "Leptos Rust" color theme with professional, eye-friendly colors:

• 🎨 GitHub-inspired color palette with coral-orange (#f78166) accents
• 🌙 Dark theme optimized for long coding sessions
• ⚡ Enhanced syntax highlighting for Rust and Leptos
• 🔧 Rust-specific styling for macros, traits, and components
• 👁️ Eye-friendly colors that reduce strain during extended use

Activating the Theme

1. Press Ctrl+Shift+P (or Cmd+Shift+P on macOS)
2. Type "Preferences: Color Theme"
3. Select "Leptos Rust" from the list

For detailed theme information, see THEME.md.

Configuration

The extension provides the following settings:

• leptosFormatter.enableOnSave (boolean, default: true): Enable/disable automatic formatting on save
• leptosFormatter.leptosfmtPath (string, default: "leptosfmt"): Path to the leptosfmt executable
• leptosFormatter.rustfmtPath (string, default: "rustfmt"): Path to the rustfmt executable

Settings Example

Add to your VS Code settings.json:

{
  "leptosFormatter.enableOnSave": true,
  "leptosFormatter.leptosfmtPath": "leptosfmt",
  "leptosFormatter.rustfmtPath": "rustfmt",
  "[rust]": {
    "editor.defaultFormatter": "MorshedulMunna.leptos-rust-suite",
    "editor.formatOnSave": true
  }
}

Usage

Automatic Formatting

1. Open any Rust file (.rs)
2. Make changes to your code
3. Save the file (Ctrl+S / Cmd+S)
4. The file will be automatically formatted:
   • Leptos components: Uses leptosfmt (if available)
   • Regular Rust code: Uses rustfmt

You can also manually format by:

• Using the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and searching for "Format Document"
• Right-clicking in the editor and selecting "Format Document"

Code Snippets

The extension includes 65+ Leptos-specific code snippets to speed up development. Simply type the snippet prefix and press Tab to expand:

Imports & Setup

• limports - Common Leptos imports
• lrouter - Leptos with router imports
• lserver_imports - Leptos with server function imports
• lfull - Complete Leptos imports with router and server
• ldeps - Common Leptos Cargo dependencies
• ldeps_ssr - Leptos Cargo dependencies for SSR

Core Components

• lc - Basic Leptos component
• lcp - Component with props
• lcc - Component with children and optional class
• lcpc - Component with props and children
• lv - View block
• lapp - App component

Reactivity & State

• ls - Create signal
• le - Create effect
• lr - Create resource
• lmemo - Create memo
• lderived - Create derived signal
• laction - Create action
• lmulti - Create action with pending state
• ltoggle - Create toggle state
• lcounter - Create counter with increment/decrement

Conditional Rendering

• lshow - Show component
• lshowf - Show with fallback
• lsuspense - Suspense boundary
• lerror - Error boundary

Lists & Loops

• lf - For loop
• lul - Unordered list
• lol - Ordered list
• lli - List item

HTML Elements

• lbtn - Button
• linput - Input field
• lform - Form
• ldiv - Div with class
• lspan - Span
• lp - Paragraph
• lh - Heading

Routing

• lroute - Router route
• lroutes - Router routes container
• llink - Router link

Server Functions & Actions

• lserver - Server function
• lmain - Main function with setup

App Lifecycle

• lmount - Mount app to body
• lhydrate - Hydrate app to body
• lssr - Server-side render app

Meta Tags & Head

• ltitle - Set page title
• ldesc - Set meta description
• lcss - Link CSS file
• lscript - Include JavaScript file

Event Handling

• lwindow - Window event listener
• ldoc - Document event listener

Timers & Async

• linterval - Create interval timer
• ltimeout - Create timeout
• lfetch - Create resource with HTTP fetch

Storage

• llocal - Get local storage handle
• lsession - Get session storage handle
• llocal_signal - Signal synced with local storage

State Management

• lerror_handle - Error handling pattern
• lloading - Loading state pattern
• lform_state - Form state management
• lcontext - Context provider
• luse_context - Use context in component

Debugging & Logging

• ldebug - Debug logging
• lconsole - Console log in browser

Browser APIs

• lwindow_size - Track window size
• lhash - Track URL hash changes

Example Usage

// Type 'limports' + Tab to get:
use leptos::prelude::*;

// Type 'lc' + Tab to get:
#[component]
pub fn ComponentName() -> impl IntoView {
    view! {
        // Component content
    }
}

// Type 'lcp' + Tab to get:
#[component]
pub fn ComponentName(props: Props) -> impl IntoView {
    view! {
        // Component content
    }
}

// Type 'ls' + Tab to get:
let (value, set_value) = create_signal(initial_value);

// Type 'lbtn' + Tab to get:
button {
    on:click=click_handler,
    "Button text"
}

// Type 'lshow' + Tab to get:
Show {
    when=condition,
    children=|| view! {
        // Content to show
    }
}

// Type 'lfetch' + Tab to get:
let data = create_resource(
    move || (),
    move |_| async move {
        let response = reqwest::get("https://api.example.com/data").await?;
        let data: DataType = response.json().await?;
        Ok::<_, reqwest::Error>(data)
    }
);

// Type 'lcontext' + Tab to get:
#[derive(Clone)]
pub struct ContextData {
    pub value: ReadSignal<String>,
    pub set_value: WriteSignal<String>,
}

pub fn provide_ContextData() {
    let (value, set_value) = create_signal("default".to_string());
    provide_context(ContextData { value, set_value });
}

Troubleshooting

rustfmt not found

If you see an error that rustfmt is not installed:

1. Make sure Rust toolchain is installed: curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
2. Check the leptosFormatter.rustfmtPath setting if you installed it in a custom location
3. Restart VS Code after installing Rust

leptosfmt not found

If you see an error that leptosfmt is not installed:

1. Make sure leptosfmt is installed and available in your PATH: cargo install leptosfmt
2. Check the leptosFormatter.leptosfmtPath setting if you installed it in a custom location
3. Restart VS Code after installing leptosfmt
4. Note: The extension will fall back to rustfmt if leptosfmt is not available

Formatting not working

1. Ensure the extension is enabled in VS Code
2. Check that leptosFormatter.enableOnSave is set to true
3. Verify that the file has a .rs extension
4. Check the VS Code Output panel for any error messages
5. Ensure at least rustfmt is available (required for all Rust files)

Support

If you encounter any issues or have questions, please open an issue on the GitHub repository. Git: https://github.com/morshedulmunna/leptos-rust-suite

Support: https://buymeacoffee.com/moshedulmunna

Contact

Morshedul Islam Munna Software Engineer Email: morshedulmunna1@gmail.com