Natuurlijk! Hier is een stapsgewijze gids om aangepaste code- en live-templates in WebStorm te maken voor React-componenten in JavaScript: ### Stap 1: Open de instellingen voor Live Templates 1. Ga naar **File** > **Settings** (op Mac: **WebStorm** > **Preferences**). 2. Navigeer naar **Editor** > **Live Templates**. ### Stap 2: Maak een nieuwe template 1. Klik op het **plus-icoon (+)** bovenaan. 2. Kies **JavaScript** (of selecteer 'Global' als je de template overal wilt kunnen gebruiken). ### Stap 3: Definieer je template Vul de volgende gegevens in: - **Abbreviation**: een korte naam voor je template, bijvoorbeeld `rfc` voor React Function Component. - **Template text**: ```javascript import React from 'react'; const $ComponentName$ = ($props$) => { return ( <div> $END$ </div> ); }; export default $ComponentName$; ``` - **Description**: Bijvoorbeeld "React functionele component". ### Stap 4: Voeg variabelen toe Klik op **Edit variables** onderaan en voeg de variabelen toe: | Variabele | Expressie | Tekstvervanger | Opmerking | |------------|------------------------|--------------------------------|-----------------------------------------| | ComponentName | complete() | `$ComponentName$` | Naam van de component, standaard leeg. | | props | complete() | `$props$` | Optioneel, standaard `$props$`. | Je kunt ook een standaardwaarde instellen voor `$ComponentName$`, bijvoorbeeld `MyComponent`. ### Stap 5: Stel de context in Kies onder **Applicable in** de juiste context, bijvoorbeeld **JavaScript** of **JavaScript React** (indien beschikbaar). ### Stap 6: Gebruik je template 1. Druk in een JavaScript- of JSX-bestand op **Type** en typ je abbreviation (`rfc`). 2. Druk op **Tab** (of de sneltoets die je hebt ingesteld). 3. Je ziet nu de template verschijnen. Voer de naam van je component in en druk op **Enter**. --- ## Extra: Voor class-based React component Hier is een voorbeeld voor een class component: ```javascript import React, { Component } from 'react'; class $ComponentName$ extends Component { render() { return ( <div> $END$ </div> ); } } export default $ComponentName$; ``` Zelfde stappen, maar plak de tekst en voeg een abbreviation zoals `rcc`. --- ## Samenvatting: - Ga naar **Settings > Editor > Live Templates**. - Maak een nieuwe template voor React componenten. - Gebruik variabelen voor naam en props. - Kies de juiste context. - Gebruik de abbreviation in je code en druk op tab om de template uit te breiden. Wil je nog meer geavanceerde templates of voorbeelden?