---
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 fixes the bug in the plugin where 
the return type of `html!` can't be resolved.

### 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",
}
```