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

1. Navigate to File | Settings | Editor | Live Templates.
2. Select Rust and click on + icon to add a new Live Template.
3. Give it a name and description of your preference.
4. Paste the following snippet in Template Text section
5. 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:

1. Click on Edit Variable
2. In the func_name row, set the Expression column to snakeCase(NAME) so that ComponentName will be automatically filled as component_name in the function definition.
3. In the func_name row, check "skip if defined" so this autogenerated field won't be navigated to.
4. (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$>
    }
}

VS Code

1. Navigate to File > Preferences > User Snippets.
2. Select Rust as the language.
3. Add the following snippet in the snippet JSON file:

{
    "Create new Yew component": {
        "prefix": "YOUR PREFIX OF CHOICE",
        "body": [
            "use yew::prelude::*;",
            "",
            "pub struct ${1};",
            "",
            "pub enum Msg {",
            "}",
            "",
            "impl Component for ${1} {",
            "    type Message = Msg;",
            "    type Properties = ();",
            "",
            "    fn create(ctx: &Context<Self>) -> Self {",
            "        Self",
            "    }",
            "",
            "    fn view(&self, ctx: &Context<Self>) -> Html {",
            "        html! {",
            "            ${0}",
            "        }",
            "    }",
            "}"
        ],
        "description": "Create a new Yew component without properties but with a message enum"
    }
}

Support for the html! Macro

Jetbrains IDEs

Since April 2021, Jetbrains has started to support proc-macro expansion as an experimental feature. The user has to manually enable it. See the post here.

This still won't enable html autofill and formatting help, but will enable variable resolution for component names and attributes inside the macro. Utilities like Rename, Go to Declaration, Find Usages will work inside the macro.

VS Code

There's no support for specialized syntax of html! but you can use the default HTML IntelliSense by adding the following snippet in your VS Code's settings.json file:

"emmet.includeLanguages": {
    "rust": "html",
}