mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
90b4e55ebc
* change suffixes from md to mdx fix broken links for English locale tree shake and update docusaurus add docusaurus ideal image plugin use svg and themed image delete unused static asset * move localized landing page * change GitLocalize project page * nit pick * remove ignore to have the block checked
130 lines
3.0 KiB
Plaintext
130 lines
3.0 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 fixes the bug in the plugin where
|
|
the return type of `html!` can't be resolved.
|
|
|
|
### 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",
|
|
}
|
|
```
|