mirror of https://github.com/yewstack/yew
129 lines
3.1 KiB
Plaintext
129 lines
3.1 KiB
Plaintext
---
|
|
title: "Tips for developing Yew applications"
|
|
---
|
|
|
|
:::important contribute
|
|
This document only contains information for adding supporting in Jetbrains IDEs and VS Code.
|
|
Feel free to contribute to add instructions for your editor of choice.
|
|
:::
|
|
|
|
## Add a template for creating components
|
|
|
|
### Jetbrains IDEs
|
|
|
|
1. Navigate to File | Settings | Editor | Live Templates.
|
|
2. Select Rust and click on + icon to add a new Live Template.
|
|
3. Give it a name and description of your preference.
|
|
4. Paste the following snippet in Template Text section
|
|
5. Change the applicability on the lower right, select Rust > Item > Module
|
|
```rust ,ignore
|
|
use yew::prelude::*;
|
|
|
|
struct $NAME$;
|
|
|
|
enum Msg {
|
|
}
|
|
|
|
impl Component for $NAME$ {
|
|
type Message = Msg;
|
|
type Properties = ();
|
|
|
|
fn create(ctx: &Context<Self>) -> Self {
|
|
Self
|
|
}
|
|
|
|
fn view(&self, ctx: &Context<Self>) -> Html {
|
|
html! {
|
|
$HTML$
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
For functional components, use the template below. Additionaly:
|
|
|
|
1. Click on Edit Variable
|
|
2. In the `func_name` row, set the Expression column to `snakeCase(NAME)` so that `ComponentName` will be automatically
|
|
filled as `component_name`
|
|
in the function definition.
|
|
3. In the `func_name` row, check "skip if defined" so this autogenerated field won't be navigated to.
|
|
4. (Optional) give `tag` a reasonable default value like "div", with double quotes.
|
|
|
|
```rust ,ignore
|
|
#[derive(Properties, PartialEq, Clone)]
|
|
pub struct $Name$Props {
|
|
}
|
|
|
|
#[function_component($Name$)]
|
|
pub fn $func_name$(props: &$Name$Props) -> Html {
|
|
|
|
|
|
html! {
|
|
<$tag$>$END$</$tag$>
|
|
}
|
|
}
|
|
```
|
|
|
|
|
|
|
|
### VS Code
|
|
|
|
1. Navigate to File > Preferences > User Snippets.
|
|
2. Select Rust as the language.
|
|
3. Add the following snippet in the snippet JSON file:
|
|
|
|
```json
|
|
{
|
|
"Create new Yew component": {
|
|
"prefix": "YOUR PREFIX OF CHOICE",
|
|
"body": [
|
|
"use yew::prelude::*;",
|
|
"",
|
|
"pub struct ${1};",
|
|
"",
|
|
"pub enum Msg {",
|
|
"}",
|
|
"",
|
|
"impl Component for ${1} {",
|
|
" type Message = 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 without properties but with a message enum"
|
|
}
|
|
}
|
|
|
|
```
|
|
|
|
## Support for the `html!` Macro
|
|
|
|
### Jetbrains IDEs
|
|
|
|
Since April 2021, Jetbrains has started to support proc-macro expansion as an experimental feature.
|
|
The user has to manually enable it.
|
|
[See the post here.](https://blog.jetbrains.com/rust/2021/04/08/intellij-rust-updates-for-2021-1/#proc-macros)
|
|
|
|
This still won't enable html autofill and formatting help, but will enable variable resolution for
|
|
component names and attributes inside the macro.
|
|
Utilities like Rename, Go to Declaration, Find Usages will work inside the macro.
|
|
|
|
### VS Code
|
|
|
|
There's no support for specialized syntax of `html!` but you can use the default HTML IntelliSense by adding the following snippet in your VS Code's `settings.json` file:
|
|
|
|
```json
|
|
"emmet.includeLanguages": {
|
|
"rust": "html",
|
|
}
|
|
```
|