---
title: 'Tips for developing Yew applications'
---

:::important 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

```rust ,ignore
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.

```rust ,ignore
#[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:

```json
{
    "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.](https://blog.jetbrains.com/rust/2021/04/08/intellij-rust-updates-for-2021-1/#proc-macros)

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:

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