エディタの設定
改善ドキュメント
異なるエディタを使用していますか?おすすめがあれば、選択したエディタの説明を自由に追加してください。
コンポーネント作成のためのテンプレートを追加
JetBrains IDEs
- ナビゲーションバーから順に File | Settings | Editor | Live Templates をクリックします。
- Rust を選択し、+ アイコンをクリックして新しい Live Template を追加します。
- 必要に応じて名前と説明を入力します。
- 以下のコードスニペットをテンプレートテキスト部分に貼り付けます。
- 右下の適用範囲を変更し、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
- ナビゲーションバーから順に File > Preferences > User Snippets をクリックします。
- 設定言語として Rust を選択します。
- 以下の 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 拡張機能
> これは**進行中の**、**コミュニティが維持している**プロジェクトです
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",
},
},
},
}