ContextQMD
Back to Yew

Editor Setup

website/versioned_docs/version-0.22/getting-started/editor-setup.mdx

0.18.03.7 KB
Original Source

:::important contribute Using a different editor? Feel free 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 the + icon to add a new Live Template.
  3. Give it a name and description of your preference.
  4. Paste the following snippet(s) into the Template Text section.
  5. Change the applicability on the lower right, select Rust > Item > Module

For function components, use the following template.

  • (Optional) Click on Edit Variable and give tag a reasonable default value like "div", with double quotes.
rust
#[derive(PartialEq, Properties)]
pub struct $Name$Props {
}

#[component]
pub fn $Name$(props: &$Name$Props) -> Html {
    html! {
        <$tag$>$END$</$tag$>
    }
}

For struct components, you can use the following more complicated template.

rust
struct $NAME$;

enum $NAME$Msg {
}

impl Component for $NAME$ {
    type Message = $NAME$Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            $HTML$
        }
    }
}

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
{
    "New Yew function component": {
        "prefix": "yewfc",
        "body": [
            "#[derive(PartialEq, Properties)]",
            "pub struct ${1:ComponentName}Props {}",
            "",
            "#[component]",
            "pub fn $1(props: &${1}Props) -> Html {",
            "    let ${1}Props {} = props;",
            "    html! {",
            "        <${2:div}>$0</${2}>",
            "    }",
            "}"
        ],
        "description": "Create a minimal Yew function component"
    },
    "New Yew struct component": {
        "prefix": "yewsc",
        "body": [
            "pub struct ${1:ComponentName};",
            "",
            "pub enum ${1}Msg {",
            "}",
            "",
            "impl Component for ${1} {",
            "    type Message = ${1}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 with a message enum"
    }
}

Support for the html! Macro

JetBrains IDEs

Contribution Welcome!

VS Code

Rust-Yew extension

This is a work in progress, and community maintained project! Please see details and direct related bug reports / issues / questions over to the extension's repository

Rust-Yew extension is available on VSC Marketplace, providing syntax highlight, renames, hover, and more.

Emmet support should work out of the box, if not please fall back to editing the settings.json file:

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

Neovim

Lazyvim

Below configuration works with LazyVim configuration and lazy.vim plugin, create a file in lua/plugins/nvim-lspconfig.lua (or update your lspconfig) with:

json
return {
  {
    "neovim/nvim-lspconfig",
    init_options = {
      userLanguages = {
        eelixir = "html-eex",
        eruby = "erb",
        rust = "html",
      },
    },
  },
}