メインコンテンツまでスキップ
Version: Next

エディタの設定

改善ドキュメント

異なるエディタを使用していますか？おすすめがあれば、選択したエディタの説明を自由に追加してください。

コンポーネント作成のためのテンプレートを追加​

JetBrains IDEs​

  1. ナビゲーションバーから順に File | Settings | Editor | Live Templates をクリックします。
  2. Rust を選択し、+ アイコンをクリックして新しい Live Template を追加します。
  3. 必要に応じて名前と説明を入力します。
  4. 以下のコードスニペットをテンプレートテキスト部分に貼り付けます。
  5. 右下の適用範囲を変更し、Rust > Item > Module を選択します。

関数型コンポーネントの場合、以下のテンプレートを使用します。

  • (オプション) 変数を編集し、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. ナビゲーションバーから順に File > Preferences > User Snippets をクリックします。
  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 IDEs

JetBrains は 2021 年 4 月にプロシージャルマクロ拡張の実験的サポートを追加しました。
この機能を有効にする必要があります。
[詳細については、このブログを参照してください。](https://blog.jetbrains.com/rust/2021/04/08/intellij-rust-updates-for-2021-1/#proc-macros)

これにより、HTML の自動補完やフォーマット支援は有効になりませんが、マクロ内のコンポーネント名やプロパティの変数解析が有効になります。
リネーム、宣言へのジャンプ、使用箇所の検索などのツールがマクロ内で動作します。

### VS Code

#### Rust-Yew 拡張機能

> これは**進行中の**、**コミュニティが維持している**プロジェクトです！[詳細を確認し、関連するバグ報告/問題/質問を直接拡張機能のリポジトリに送信してください](https://github.com/TechTheAwesome/code-yew-server)

Rust-Yew 拡張機能は [VSC Marketplace で見つけることができます](https://marketplace.visualstudio.com/items?itemName=TechTheAwesome.rust-yew)、シンタックスハイライト、リネーム、ホバーなどの機能を提供します。

Emmet サポートは直接使用できるはずですが、できない場合は `settings.json` ファイルを編集してください：

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