Natuurlijk! Hier is een gids om je WebStorm-omgeving te optimaliseren voor React en TypeScript, gericht op snelle navigatie en debugging: 1. Aangepaste sneltoetsen instellen: - Navigatie: - Ga naar **File > Settings > Keymap**. - Stel sneltoetsen in voor veelgebruikte acties zoals: - "Navigate to Declaration" (bijvoorbeeld `Ctrl + B` of `Cmd + B` op Mac). - "Navigate to File" (`Ctrl + Shift + N`). - "Navigate to Symbol" (`Ctrl + Alt + Shift + N`). - "Recent Files" (`Ctrl + E`). - Refactoring: - "Rename" (`Shift + F6`). - "Extract Method" (`Ctrl + Alt + M`). - Debugging: - "Toggle Breakpoint" (`F8` of een eigen sneltoets). - "Run" (`Shift + F10`). - "Debug" (`Shift + F9`). 2. Instellingen voor React en TypeScript: - Zorg dat de juiste TypeScript SDK is geselecteerd: - **File > Settings > Languages & Frameworks > TypeScript**. - Selecteer de project- of globale TypeScript-versie. - React plugin en instellingen: - Installeer de React plugin via **Plugins**. - Enable de JSX ondersteuning onder **Languages & Frameworks > JavaScript > Libraries**. 3. Snelle navigatie en code-ondersteuning: - Gebruik **Go to Declaration / Implementation** (`Ctrl + B`). - Gebruik **Find Usages** (`Alt + F7`) om snel alle plaatsen te vinden waar een component wordt gebruikt. - Maak gebruik van **Code Completion** (`Ctrl + Space`). - Activeer **Navigate to Test** (`Ctrl + Shift + T`) voor snelle toegang tot testbestanden. 4. Debugging optimaliseren: - Stel een debug-configuratie in: - **Run > Edit Configurations**. - Voeg een nieuwe **JavaScript Debug** configuratie toe. - Gebruik de ingebouwde Chrome debugger voor React: - Installeer de Chrome plugin indien nodig. - Start een debug sessie en stel breakpoints in je componenten. 5. Workflow automatisering: - Maak gebruik van **File Templates** voor React componenten. - Gebruik **Live Templates** voor veelgebruikte code snippets. - Automatiseer linting en formattering met Prettier en ESLint, geïntegreerd in WebStorm. 6. Extra tips: - Gebruik **Local History** (`VCS > Local History`) om wijzigingen snel te herstellen. - Stel **Post-compile** hooks of scripts in voor snelle builds. Door deze instellingen en sneltoetsen aan te passen, wordt je ontwikkelproces efficiënter en aangenamer. Veel succes!

Zeker, hier is een uitgebreide handleiding om je WebStorm-omgeving te optimaliseren voor React en TypeScript ontwikkeling, met focus op sneltoetsen en instellingen voor snelle navigatie en debugging. ### **Essentiële Sneltoetsen (Windows/Linux | Mac)** Eerst, zorg dat je het juiste keymap gebruikt: `File > Settings > Keymap` (kies "VS Code" als je daar vandaan komt). **Navigatie:** * **Ga naar Bestand:** `Ctrl+Shift+N` | `Cmd+Shift+O` * **Ga naar Klasse:** `Ctrl+N` | `Cmd+O` * **Ga naar Symbool (functies, variabelen):** `Ctrl+Alt+Shift+N` | `Cmd+Alt+O` * **Ga naar Declaratie:** `Ctrl+B` | `Cmd+B` (ook voor imports) * **Recente Bestanden:** `Ctrl+E` | `Cmd+E` * **Laatst Bewerkte Locatie:** `Ctrl+Shift+Backspace` | `Cmd+Shift+Backspace` * **Omliggende Methodes (in bestand):** `Alt+Up`/`Alt+Down` | `Ctrl+Up`/`Ctrl+Down` **Codebewerking (React/TS specifiek):** * **Vouw/ontvouw codeblok:** `Ctrl+Num+`/`Ctrl+Num-` | `Cmd+Num+`/`Cmd+Num-` * **Snel Importeren (auto-import):** `Alt+Enter` | `Alt+Enter` (als er een lampje staat) * **Hervormat Code:** `Ctrl+Alt+L` | `Cmd+Alt+L` * **Imports optimaliseren:** `Ctrl+Alt+O` | `Ctrl+Alt+O` * **Genereer code (Constructor, e.d.):** `Alt+Insert` | `Cmd+N` * **Omring met codeblok (JSX):** `Ctrl+Alt+T` | `Cmd+Alt+T` (kies b.v. "if" of "try/catch") * **Extract variabele/constante/methode:** `Ctrl+Alt+V`/`Ctrl+Alt+C`/`Ctrl+Alt+M` | `Cmd+Alt+V`/`Cmd+Alt+C`/`Cmd+Alt+M` **Refactoring:** * **Hernoemen:** `Shift+F6` | `Shift+F6` * **Wijzig Handtekening:** `Ctrl+F6` | `Cmd+F6` **Debugging:** * **Toggle Breakpoint:** `Ctrl+F8` | `Cmd+F8` * **Debug starten:** `Shift+F9` | `Ctrl+D` * **Stap over:** `F8` | `F8` * **Stap in:** `F7` | `F7` * **Stap uit:** `Shift+F8` | `Shift+F8` * **Hervatten:** `F9` | `Cmd+Alt+R` --- ### **Aanbevolen Instellingen (Settings > Editor / Languages & Frameworks)** 1. **TypeScript & JavaScript:** * **Languages & Frameworks > JavaScript:** Kies **React JSX** als JavaScript taalversie. * **Languages & Frameworks > TypeScript:** Vink "Use TypeScript Service" aan voor betere integratie en automatische imports. 2. **Opmaak (Code Style):** * **Code Style > TypeScript:** Pas onder "Spaces", "Punctuation" en "Wrapping and Braces" aan naar jouw voorkeur (bijv. voor haakjes, komma's). * **Code Style > HTML:** Ga naar "Other" en zet "Add line break before first attribute" op "Never" voor schonere JSX. 3. **Inspections (Helderheid):** * **Editor > Inspections:** Zorg dat **TypeScript** en **React** inspections ingeschakeld zijn. Dit geeft de meest nuttige tips en foutmeldingen direct in de editor. 4. **Live Templates (Snel code genereren):** * **Editor > Live Templates:** Maak of bewerk templates voor snelle code-aanmaak. * **Voorbeeld: Maak een `tsrfce` template voor een React Function Component met TypeScript:** * Afkorting: `tsrfce` * Omschrijving: "Creates a React TS Function Component" * Template code: ```typescript interface $COMPONENT_NAME$Props { $END$ } const $COMPONENT_NAME$: React.FC<$COMPONENT_NAME$Props> = (props) => { return ( <div> </div> ); }; export default $COMPONENT_NAME$; ``` * Applicatiecontext: TypeScript JSX. --- ### **Workflow-specifieke Optimalisaties** 1. **Snelle Debugging met Chrome:** * Maak een **JavaScript Debug** run configuration die naar je dev server (bijv. `http://localhost:3000`) wijst. WebStorm koppelt dan de transpileerde code aan je originele broncode. 2. **Aangepaste Sneltoetsen:** * **Open Settings snel:** `Ctrl+Alt+S` | `Cmd+,` * **Projectweergave:** `Alt+1` | `Cmd+1` * **Terminal:** `Alt+F12` | `Alt+F12` (maak een makkelijkere sneltoets als je deze vaak gebruikt). * **Commit Changes:** `Ctrl+K` | `Cmd+K` (VS Code style). 3. **Plugins (Settings > Plugins):** * **GitToolBox:** Geeft inline git blame en andere handige git-info. * **String Manipulation:** Handige acties voor case-changing (camelCase, kebab-case, etc.). **Stap-voor-stap om een sneltoets aan te passen:** 1. Ga naar `File > Settings > Keymap`. 2. Zoek in het zoekveld naar de actie (bijv. "Open in Terminal"). 3. Rechtsklik op de actie en kies "Add Keyboard Shortcut". 4. Voer je gewenste sneltoetscombinatie in (bijv. `Ctrl+`` voor Terminal). 5. Klik "OK". **Tip:** Begin met de basis sneltoetsen voor navigatie (`Ctrl+B`, `Ctrl+N`, `Ctrl+E`) en debugging (`F8`, `F7`). Integreer ze in je dagelijkse workflow en breid langzaam uit. Consistentie is key om er sneller van te worden.