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.
#[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.
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>
}
}