编辑器设置

贡献

使用不同的编辑器？请随时添加您选择的编辑器的说明。

添加用于创建组件的模板

JetBrains IDE

1. 导航至文件 | 设置 | 编辑器 | 实时模板。
2. 选择 Rust，然后单击 + 图标添加新的实时模板。
3. 根据您的喜好为其命名并进行描述。
4. 将以下代码段粘贴到模板文本部分。
5. 更改右下角的适用性，选择 Rust > 项目 > 模块

对于函数组件，使用以下模板。

• （可选）点击编辑变量，并给 tag 一个合理的默认值，如“div”，带双引号。

#[derive(PartialEq, Properties)]
pub struct $Name$Props {
}

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

对于结构组件，可以使用以下更复杂的模板。

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. 导航到文件 > 首选项 > 用户代码段。
2. 选择 Rust 作为语言。
3. 在代码段 JSON 文件中添加以下代码段

{
    "New Yew function component": {
        "prefix": "yewfc",
        "body": [
            "#[derive(PartialEq, Properties)]",
            "pub struct ${1:ComponentName}Props {}",
            "",
            "#[function_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"
    }
}

支持 html! 宏

JetBrains IDE

JetBrains 在 2021 年 4 月添加了对 proc-macro 扩展的实验性支持。此功能必须启用后才能使用。 在此处查看博客文章。

这仍然不会启用 HTML 自动填充和格式化帮助，尽管它将启用宏内组件名称和属性的变量解析。重命名、转到声明、查找用法等实用程序将在宏内工作。

VS Code

Rust-Yew 扩展

这是一个正在进行中，并且社区维护的项目！ 请查看详细信息并直接将相关的错误报告/问题/问题发送到扩展的存储库

Rust-Yew 扩展可在 VSC Marketplace 上获得，提供语法高亮、重命名、悬停等功能。

Emmet 支持应开箱即用，如果没有，请退回到编辑 settings.json 文件

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

Neovim

Lazyvim

以下配置适用于 LazyVim 配置和 lazy.vim 插件，在 lua/plugins/nvim-lspconfig.lua 中创建一个文件（或更新你的 lspconfig）

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