Useful code snippets for Leptos framework development in VSCode.
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- Start typing
compin 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](https://raw.githubusercontent.com/mondeja/vscode-leptos-snippets/master/assets/component.gif)
- Start typing
servin 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](https://raw.githubusercontent.com/mondeja/vscode-leptos-snippets/master/assets/server.gif)
Import the Leptos prelude. Expands to use leptos::prelude::*;.
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>
}
}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,
};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>
}
}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>Expands to the necessary imports for using the Router code snippet.
use leptos_router::{
components::{Route, Router, Routes},
StaticSegment,
};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>
}
}