Natuurlijk, ik help je graag met het analyseren van je programmeertaken en het configureren van AWS CodeWhisperer voor gerichte webontwikkelingsaanbevelingen met React en TypeScript. Hieronder vind je een stapsgewijze uitleg en tips voor het aanpassen van aanbevelingen aan jouw codebase en workflow. 1. Analyseer je programmeertaken - Doelen: Ontwikkelen van React-applicaties met TypeScript, optimaliseren van componentstructuren, state management, en best practices voor webontwikkeling. - Huidige workflow: Gebruik je een specifieke IDE (bijvoorbeeld Visual Studio Code), test- en buildtools, en CI/CD-pijplijnen? - Uitdagingen: Wil je hulp bij codegeneratie, foutopsporing, documentatie, of codeverbeteringen? 2. Configureren van AWS CodeWhisperer - AWS Account: Zorg dat je een AWS-account hebt en toegang tot CodeWhisperer. - IDE-integratie: Installeer de AWS Toolkit voor je IDE (bijvoorbeeld de AWS Toolkit voor VS Code). - CodeWhisperer activeren: In je IDE, activeer CodeWhisperer via de extensies of plugins. - Profiel instellen: Maak een profiel aan waarin je je voorkeuren voor taal, frameworks (React, TypeScript) en codegeneratie specificeert. - Context geven: Plaats je code of beschrijf je taak in je IDE zodat CodeWhisperer de context kan analyseren. 3. Gerichte aanbevelingen krijgen - Codevoorbeeld gebruiken: Markeer relevante code of voeg codefragmenten toe zodat CodeWhisperer suggesties kan doen. - Commentaar toevoegen: Voeg duidelijke commentaar toe over wat je wilt bereiken, bijvoorbeeld: ```typescript // Maak een React component met TypeScript die een lijst van items weergeeft ``` - Aanpassingen: Pas de gegenereerde code aan door je specifieke projectstructuur en coding standards toe te voegen. 4. Aanpassen aan je codebase en workflow - Mappen en configuratie: Configureer CodeWhisperer om te werken met jouw mappenstructuur en dependencies. - Custom templates: Maak aangepaste codegeneratie-templates of snippets die aansluiten bij jouw stijl. - Feedback geven: Markeer ongeschikte suggesties als ‘onklaar’ of ‘verbeter’ zodat CodeWhisperer leert en betere aanbevelingen kan doen. - Integratie in workflow: Gebruik CodeWhisperer tijdens code schrijven, reviewen of refactoren om consistentie en efficiëntie te verbeteren. 5. Tips voor optimale resultaten - Consistente code: Houd je code consistent in stijl en structuur. - Documentatie: Voeg duidelijke commentaar en documentatie toe zodat CodeWhisperer de context beter begrijpt. - Regelmatige updates: Update je IDE-extensies en AWS Toolkit voor de nieuwste functies. - Training: Experimenteer met verschillende prompts en observeer welke het beste werken voor jouw projecten. Door deze stappen te volgen, maximaliseer je de effectiviteit van AWS CodeWhisperer voor je React en TypeScript webontwikkeling. Mocht je specifieke vragen hebben over configuratie of voorbeelden nodig hebben, laat het gerust weten!

Absoluut! Laten we dit systematisch aanpakken. Hier is een complete analyse en handleiding voor het configureren van Amazon CodeWhisperer voor React/TypeScript webontwikkeling. ## 📋 Analyse van je programmeertaken Voor React/TypeScript ontwikkeling focus je waarschijnlijk op: - Componentenbouw met TypeScript interfaces - Hooks (useState, useEffect, useContext) - API-integratie en data fetching - State management (Redux, Context API) - TypeScript type-definities - Testing met Jest/React Testing Library ## ⚙️ CodeWhisperer Configuratie voor React/TypeScript ### 1. IDE-installatie en authenticatie ```bash # Installeer de AWS Toolkit extensie in VS Code # Authenticeer met AWS Builder ID voor volledige functies ``` ### 2. Optimaliseer je prompt-stijl Gebruik specifieke React/TypeScript gerichte comments: ```typescript // React component met TypeScript interface voor User interface UserProps { id: number; name: string; email: string; } // Functioneel component met useState hook voor gebruikersbeheer const UserProfile: React.FC<UserProps> = ({ id, name, email }) => { // [Prompt] Maak een state hook voor gebruikersgegevens met TypeScript type ``` ### 3. Contextuele prompts voor betere suggesties ```typescript // [CodeWhisperer] Genereer een custom hook voor API fetching // TypeScript interface voor API response // Error handling en loading states includeren // [React] Maak een form component met form validation // Gebruik React Hook Form met TypeScript types // Validatie regels voor email en wachtwoord ``` ## 🎯 Gerichte aanbevelingen aanpassen ### 1. Codebase-specifieke patronen Creëer reference files in je project: ```typescript // .codewhisperer/context.ts export interface StandardApiResponse<T> { data: T; error?: string; status: number; } // Voeg deze reference toe aan je workspace voor consistente type suggesties ``` ### 2. Workflow-integratie ```typescript // Gebruik deze patronen in je dagelijkse workflow: // 1. Start met een TypeScript interface interface Product { id: string; name: string; price: number; category: string; } // 2. Vraag component suggesties // [CodeWhisperer] Maak een ProductCard component met deze props // Inclusief styling met Tailwind CSS // 3. Vraag hook suggesties // [React] Custom hook voor product fetching met error boundary ``` ### 3. Project-specifieke configuratie Maak een `.codewhispererrc` bestand: ```json { "preferences": { "language": "typescript", "framework": "react", "patterns": [ "functional-components", "hooks", "typescript-interfaces", "async-await" ], "avoid": [ "class-components", "any-types", "inline-styles" ] } } ``` ## 🔧 Praktische voorbeelden ### Voor API integration: ```typescript // [CodeWhisperer] Maak een service laag voor gebruikers API // Gebruik axios met TypeScript generics // Inclusief error handling en interceptors // Suggestie zal komen met: const apiService = { async getUsers(): Promise<StandardApiResponse<User[]>> { try { const response = await axios.get('/api/users'); return { data: response.data, status: response.status }; } catch (error) { return { data: [], error: error.message, status: error.response.status }; } } } ``` ### Voor component generation: ```typescript // [React] Maak een modal component met Portal // TypeScript props inclusief onClose callback // Accessibility attributes toevoegen // CodeWhisperer zal een complete modal component genereren ``` ## 📊 Performance optimalisatie 1. **Gebruik reference comments**: ```typescript // Reference: ../types/User.ts // Reference: ../hooks/useApi.ts ``` 2. **Specifieke context geven**: ```typescript // [Context] Ons project gebruikt Redux Toolkit voor state management // [Context] Styling met Tailwind CSS utility classes // [Context] API base URL: https://api.mijnapp.nl/v1 ``` ## 💡 Tips voor beste resultaten 1. **Wees expliciet in prompts**: ```typescript // [CodeWhisperer] Genereer een React hook voor form validation // Gebruik Yup voor validation schema // TypeScript types voor form values en errors ``` 2. **Iteratief refinement**: - Accepteer suggesties - Pas aan naar je codebase stijl - CodeWhisperer leert van je aanpassingen 3. **Security focus**: ```typescript // [Security] Sanitize user input voor XSS prevention // [Security] HTTPS alleen voor API calls ``` ## 🚀 Workflow integration 1. **Tijdens development**: - Schrijf eerst TypeScript interfaces - Gebruik prompts voor component structuur - Vraag test suggesties 2. **Code review**: - Gebruik CodeWhisperer voor alternatieve implementaties - Vergelijk suggesties met bestaande patterns 3. **Refactoring**: - Vraag suggesties voor performance optimalisaties - Gebruik voor test coverage verbetering Met deze aanpak krijg je highly targeted suggesties die perfect aansluiten bij je React/TypeScript codebase en persoonlijke workflow!