mirror of https://github.com/yewstack/yew
158 lines
5.0 KiB
Plaintext
158 lines
5.0 KiB
Plaintext
---
|
|
title: 'エディタの設定'
|
|
description: 'コードエディタの設定'
|
|
---
|
|
|
|
:::important 改善ドキュメント
|
|
異なるエディタを使用していますか？おすすめがあれば、選択したエディタの説明を自由に追加してください。
|
|
:::
|
|
|
|
## コンポーネント作成のためのテンプレートを追加
|
|
|
|
### JetBrains IDEs
|
|
|
|
1. ナビゲーションバーから順に File | Settings | Editor | Live Templates をクリックします。
|
|
2. Rust を選択し、+ アイコンをクリックして新しい Live Template を追加します。
|
|
3. 必要に応じて名前と説明を入力します。
|
|
4. 以下のコードスニペットをテンプレートテキスト部分に貼り付けます。
|
|
5. 右下の適用範囲を変更し、Rust > Item > Module を選択します。
|
|
|
|
関数型コンポーネントの場合、以下のテンプレートを使用します。
|
|
|
|
- (オプション) 変数を編集し、`tag` に適切なデフォルト値（例："div"）を設定します。
|
|
|
|
```rust ,ignore
|
|
#[derive(PartialEq, Properties)]
|
|
pub struct $Name$Props {
|
|
}
|
|
|
|
#[function_component]
|
|
pub fn $Name$(props: &$Name$Props) -> Html {
|
|
html! {
|
|
<$tag$>$END$</$tag$>
|
|
}
|
|
}
|
|
```
|
|
|
|
構造体コンポーネントの場合、以下のより複雑なテンプレートを使用できます。
|
|
|
|
```rust ,ignore
|
|
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 ファイルにコードスニペットを追加します。
|
|
|
|
````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](https://www.lazyvim.org) 設定および lazy.vim プラグインに適用されます。`lua/plugins/nvim-lspconfig.lua` にファイルを作成するか、既存の `lspconfig` を更新してください：
|
|
|
|
```json
|
|
return {
|
|
{
|
|
"neovim/nvim-lspconfig",
|
|
init_options = {
|
|
userLanguages = {
|
|
eelixir = "html-eex",
|
|
eruby = "erb",
|
|
rust = "html",
|
|
},
|
|
},
|
|
},
|
|
}
|
|
```
|