Tips for developing Yew applications
contribute
This document only contains information for adding supporting in Jetbrains IDEs and VS Code. Feel free to contribute to add instructions for your editor of choice.
Add a template for creating components
Jetbrains IDEs
- Navigate to File | Settings | Editor | Live Templates.
- Select Rust and click on + icon to add a new Live Template.
- Give it a name and description of your preference.
- Paste the following snippet in Template Text section
- Change the applicability on the lower right, select Rust > Item > Module
use yew::prelude::*;
struct $NAME$;
enum Msg {
}
impl Component for $NAME$ {
type Message = Msg;
type Properties = ();
fn create(ctx: &Context<Self>) -> Self {
Self
}
fn view(&self, ctx: &Context<Self>) -> Html {
html! {
$HTML$
}
}
}
For functional components, use the template below. Additionaly:
- Click on Edit Variable
- In the
func_name
row, set the Expression column tosnakeCase(NAME)
so thatComponentName
will be automatically filled ascomponent_name
in the function definition. - In the
func_name
row, check "skip if defined" so this autogenerated field won't be navigated to. - (Optional) give
tag
a reasonable default value like "div", with double quotes.
#[derive(Properties, PartialEq, Clone)]
pub struct $Name$Props {
}
#[function_component($Name$)]
pub fn $func_name$(props: &$Name$Props) -> Html {
html! {
<$tag$>$END$</$tag$>
}
}