mirror of
https://github.com/yewstack/yew.git
synced 2026-02-01 17:26:28 +00:00
3ad4dbe837
* add prettier * ci * run prettier * run prettier in CI * run prettier --write * ignore README.md * specify googleAnalytics * fmt * npm run write-translations * fmt * ignore i18n json files they're autogenerated and don't like being formatted * post merge fixes & some updates * post merge fixes
125 lines
3.2 KiB
Plaintext
125 lines
3.2 KiB
Plaintext
---
|
|
title: 'Editor Setup'
|
|
description: 'Setting your code editor'
|
|
---
|
|
|
|
:::important contribute
|
|
Using a different editor? Feel free 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 the + 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 function components, use the template below. Additionally:
|
|
|
|
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 with a message enum"
|
|
}
|
|
}
|
|
```
|
|
|
|
## Support for the `html!` Macro
|
|
|
|
### JetBrains IDEs
|
|
|
|
JetBrains added experimental support for proc-macro expansion in April 2021.
|
|
This feature must be enabled before it can be used.
|
|
[See the blog 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, although it 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 isn't support for the specialized syntax of `html!`. However, the default HTML IntelliSense can be used by adding this to your `settings.json` file:
|
|
|
|
```json
|
|
"emmet.includeLanguages": {
|
|
"rust": "html",
|
|
}
|
|
```
|