Tips for developing Yew applications
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$>
}
}
VS Code
- Navigate to File > Preferences > User Snippets.
- Select Rust as the language.
- 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",
}