Natuurlijk! Hier is een gedetailleerde gids om je WebStorm-werkruimte te automatiseren met aangepaste Turbo Tasks en run configurations voor je React webapplicatie. Dit helpt je om je ontwikkelproces te versnellen door repetitieve taken te automatiseren. 1. Turbo Tasks configureren in je project a. Installeer Turbo (als je dat nog niet hebt gedaan): ```bash npm install turbo --save-dev ``` b. Maak een `turbo.json` configuratiebestand aan in de root van je project met de volgende inhoud: ```json { "pipeline": { "lint": { "dependsOn": [], "outputs": [] }, "build": { "dependsOn": ["lint"], "outputs": ["build/**"] }, "test": { "dependsOn": ["build"], "outputs": [] } } } ``` Hiermee definieer je taken die afhankelijk zijn van elkaar: eerst linten, dan builden, en vervolgens testen. 2. NPM-scripts toevoegen in `package.json` Voeg scripts toe om deze taken eenvoudig te kunnen uitvoeren: ```json "scripts": { "lint": "eslint src --max-warnings=0", "build": "react-scripts build", "test": "react-scripts test --watchAll=false", "turbo": "turbo run" } ``` 3. Turbo Tasks in WebStorm integreren a. Run Configuraties maken: - Ga naar **Run > Edit Configurations**. - Klik op het plusje (+) en kies **npm**. - Maak een nieuwe configuratie voor bijvoorbeeld "Lint": - Name: Lint - Package: kies je project - Script: `lint` - Herhaal dit voor "Build" en "Test" met respectievelijk `build` en `test`. b. Een samengestelde run configuratie maken: - Maak een nieuwe configuratie **Compound**. - Voeg de npm-configuraties toe voor lint, build en test. - Noem deze bijvoorbeeld "Full Workflow". 4. Automatiseer met Turbo Tasks In WebStorm kun je nu eenvoudig de `npm run turbo` opdracht gebruiken: - Maak een nieuwe **npm** run configuration: - Name: Turbo Run - Script: `turbo run build test` (of andere combinaties zoals `lint build test`). - Of, gebruik **Terminal** binnen WebStorm en voer uit: ```bash npm run turbo ``` Dit zorgt ervoor dat alle afhankelijkheden automatisch worden afgehandeld volgens je `turbo.json`. 5. Extra optimalisaties - Voeg **file watchers** toe in WebStorm om automatisch te linten en te builden bij wijzigingen. - Gebruik **Pre-commit hooks** (bijvoorbeeld met Husky) om te zorgen dat code altijd linted en getest wordt voor commit. Voorbeeld Husky-configuratie: ```bash npx husky init ``` - Voeg een pre-commit hook toe: ```bash npx husky add .husky/pre-commit "npm run lint && npm run test" ``` Door deze stappen te volgen, automatiseer je je ontwikkelworkflow effectief, bespaar je tijd en voorkom je handmatig herhalen van dezelfde taken. Heeft u nog specifieke wensen of vragen over een bepaald onderdeel?

Zeker! Hier een gedetailleerde handleiding voor het automatiseren van je React workflow in WebStorm met Turbo Tasks en run configurations: ## 1. Turbo Tasks Setup ### Basis Turbo.json configuratie: ```json { "pipeline": { "build": { "outputs": ["dist/**"], "dependsOn": ["^build"] }, "dev": { "cache": false, "persistent": true }, "lint": { "outputs": [] }, "test": { "outputs": [] } } } ``` ### Geavanceerde Turbo Tasks: ```json { "pipeline": { "dev": { "cache": false, "persistent": true, "env": ["NODE_ENV=development"] }, "build": { "outputs": ["dist/**", ".next/**", "build/**"], "dependsOn": ["^build", "lint", "test"], "env": ["NODE_ENV=production"] }, "lint": { "outputs": [], "cache": true }, "test": { "outputs": ["coverage/**"], "cache": true }, "type-check": { "outputs": [] }, "clean": { "cache": false } } } ``` ## 2. WebStorm Run Configurations ### A. Development Server Configuratie - **Naam**: `Dev Server` - **Type**: npm - **Scripts**: `dev` - **Node parameters**: `--max-old-space-size=4096` - **Package.json**: `[jouw-project-root]/package.json` ### B. Build Chain Configuratie - **Naam**: `Build Production` - **Type**: npm - **Scripts**: `build` - **Voorafgaande taken**: 1. `Lint Check` 2. `Test Run` 3. `Type Check` ### C. Lint & Test Automatisering ```json // package.json scripts { "scripts": { "dev": "turbo run dev", "build": "turbo run build --force", "lint": "turbo run lint", "test": "turbo run test", "type-check": "turbo run type-check", "clean": "turbo run clean", "lint:fix": "eslint src/**/*.{js,jsx,ts,tsx} --fix", "test:watch": "jest --watch", "test:coverage": "jest --coverage" } } ``` ## 3. Geïntegreerde Workflow Configuraties ### A. Complete Development Workflow: - **Naam**: `Full Development` - **Type**: Compound - **Configuraties**: 1. `Dev Server` 2. `Lint Watch` 3. `Test Watch` ### B. Pre-commit Validatie: - **Naam**: `Pre-commit Check` - **Type**: Shell Script - **Script**: ```bash turbo run lint test type-check --parallel ``` ## 4. Geavanceerde Turbo Instellingen ### Cache optimalisatie: ```json { "globalDependencies": ["**/.env.*local"], "globalEnv": ["CI", "NODE_ENV"], "tasks": { "build": { "inputs": ["src/**/*", "public/**/*", "package.json"], "outputs": ["dist/**"] } } } ``` ### Parallelle uitvoering: ```json { "pipeline": { "lint": { "dependsOn": [], "outputs": [] }, "test": { "dependsOn": [], "outputs": [] }, "type-check": { "dependsOn": [], "outputs": [] } } } ``` ## 5. WebStorm Specifieke Optimalisaties ### File Watchers: - **Type**: ESLint - **Scope**: Project Files - **Program**: `$ProjectFileDir$/node_modules/.bin/eslint` - **Arguments**: `--fix $FilePathRelativeToProjectRoot$` - **Output**: Console ### Live Templates: ```javascript // Snelkoppeling: rfc → const $TM_FILENAME_BASE$ = () => { return ( <div> $END$ </div> ); }; export default $TM_FILENAME_BASE$; ``` ## 6. Workflow Commando's ### Snelle commando's voor dagelijks gebruik: ```bash # Development turbo run dev # Build met validatie turbo run build --force # Alleen validatie turbo run lint test type-check --parallel # Cache opschonen turbo run clean && git clean -fdx ``` ## 7. Package.json Volledig Voorbeeld ```json { "name": "react-app", "scripts": { "dev": "turbo run dev --parallel", "build": "turbo run build", "lint": "turbo run lint", "test": "turbo run test", "type-check": "turbo run type-check", "clean": "turbo run clean", "lint:fix": "turbo run lint -- --fix", "test:watch": "turbo run test -- --watch", "validate": "turbo run lint test type-check" }, "devDependencies": { "turbo": "^latest" } } ``` ## Tips voor Optimalisatie: 1. **Cache strategie**: Gebruik `--force` flag om cache te omzeilen wanneer nodig 2. **Parallel execution**: Gebruik `--parallel` voor onafhankelijke tasks 3. **Scope beperken**: Gebruik `--filter` voor specifieke packages in monorepo 4. **Memory limits**: Stel Node.js memory limits in voor grote projecten Deze setup zal je ontwikkelproces significant versnellen door: - Parallelle task executie - Slimme caching - Geautomatiseerde validatie - Geïntegreerde workflows in WebStorm Start met de basisconfiguratie en breid geleidelijk uit op basis van je specifieke behoeften!