編輯器設定

使用不同的編輯器？歡迎加入你選擇的編輯器指示。

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