Leptos code snippets for VSCode

Useful code snippets for Leptos framework development in VSCode.

Installation

Install through VS Code extensions. Search for Leptos Snippets.

Can also be installed in VS Code. Launch VS Code Quick Open (Ctrl+P), paste the following command, and press Enter.

ext install mondeja.leptos-snippets

Code snippets

`#[component]`

Start typing comp in a Rust file and you will see the snippet #[component] Leptos component.
Select it and press Enter to start writing.
Write the name of the component and press Tab.
Write its documentation and press Tab.
Write the view! body and press Tab.
Write its code and press Tab.

#[component] expansion

`#[server]`

Start typing serv in a Rust file and you will see the snippet #[server] Leptos server function.
Select it and press Enter to start writing.
Write the name of the function and press Tab.
Write its documentation and press Tab.
Write the final match statement and press Tab.
Write the function body and press Tab.

#[server] expansion

`use leptos::prelude::*;`

Import the Leptos prelude. Expands to use leptos::prelude::*;.

`App`

Expands to a basic Leptos App component. It only includes the component structure, not the imports. For imports, see use App below.

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
        <Title text="Welcome to Leptos"/>

        <Router>
            <main>
                <Routes fallback=|| "Page not found.".into_view()>
                    <Route path=StaticSegment("") view=HomePage/>
                </Routes>
            </main>
        </Router>
    }
}

`use App`

Expands to the necessary imports for using the App code snippet.

use leptos::prelude::*;
use leptos_meta::{provide_meta_context, Title};
use leptos_router::{
    components::{Route, Router, Routes},
    StaticSegment,
};

`shell()`

Expands to a basic Leptos shell function.

pub fn shell(options: LeptosOptions) -> impl IntoView {
    use leptos_meta::MetaTags;

    view! {
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8"/>
                <meta name="viewport" content="width=device-width, initial-scale=1"/>
                <AutoReload options=options.clone() />
                <HydrationScripts options/>
                <MetaTags/>
            </head>
            <body>
                <App/>
            </body>
        </html>
    }
}

`Router`

Expands to a basic Leptos Router. It includes only a simple router structure, not including the imports. For imports, see use Router below.

<Router>
    <main>
        <Routes fallback=|| "Page not found.".into_view()>
            <Route path=StaticSegment("") view=HomePage/>
        </Routes>
    </main>
</Router>

`use Router`

Expands to the necessary imports for using the Router code snippet.

use leptos_router::{
    components::{Route, Router, Routes},
    StaticSegment,
};

`SimpleCounter`

Expands to a simple counter Leptos component.

/// A simple counter component.
#[component]
pub fn SimpleCounter() -> impl IntoView {
    let (value, set_value) = signal(0);

    view! {
        <div>
            <button on:click=move |_| set_value.set(0)>"Clear"</button>
            <button on:click=move |_| *set_value.write() -= 1>"-1"</button>
            <span>"Value: " {value}</span>
            <button on:click=move |_| set_value.update(|value| *value += 1)>"+1"</button>
        </div>
    }
}

Leptos Snippets

Álvaro Mondéjar Rubio

Leptos code snippets for VSCode

Installation

Code snippets

#[component]

#[server]

use leptos::prelude::*;

App

use App

shell()

Router

use Router

SimpleCounter