AI Studio: Code Editor

De Code Editor in AI Studio geeft je direct toegang tot je projectcode, zonder dat je de builder hoeft te verlaten. Je kunt bestanden aanpassen, door je project zoeken, issues sneller opsporen en wijzigingen direct bekijken in realtime vanuit één werkruimte. Zo kun je makkelijker van AI-gegenereerde output naar handmatige verfijning gaan wanneer je meer controle wilt over je project.

Belangrijk: AI Studio is beschikbaar via Labs. Zet dit aan voor je account voordat je het gebruikt.

Wat is de Code Editor in AI Studio?

De AI Studio Code Editor is een ingebouwde codeomgeving op basis van CodeMirror in de AI Studio builder. Hiermee kun je de code achter je AI-gegenereerde websites en webapps bekijken, aanpassen en beheren, direct in Voluit Suite, zonder externe IDE of apart deploymentproces. AI Studio maakt een werkend project op basis van je prompt, URL of referentiedesign, en de Code Editor geeft je nauwkeurige controle over TypeScript, JSX, CSS, JSON en andere bestanden die deze ervaring mogelijk maken.

Met de AI Studio Code Editor werk je direct in je bouwomgeving: je past code aan, ziet updates meteen in de live preview en gebruikt AI om fouten te analyseren en op te lossen terwijl je bezig bent.

Belangrijkste voordelen van de Code Editor

  • Meer controle: Je kunt rechtstreeks op codeniveau aanpassingen doen wanneer je meer precisie nodig hebt dan AI-bewerking alleen kan bieden.
  • Gerichte wijzigingen: Je kunt specifieke tekst, styling, componenten, routes of bestandsgedrag aanpassen zonder het hele project opnieuw op te bouwen.
  • Geen contextwisseling: Je bewerkt code direct in AI Studio, zonder bestanden te downloaden of de omgeving te verlaten.
  • Sneller debuggen: Fouten verschijnen direct zodra ze optreden en je kunt AI gebruiken om een voorstel voor een oplossing te laten maken.
  • Veiliger experimenteren: Versiegeschiedenis helpt je om wijzigingen te bekijken, te bookmarken en op elk moment terug te draaien.
  • Slimmer navigeren: Met Find & Replace en Global Project Search kom je snel bij het juiste bestand, de juiste regel of het juiste component.

Kernfuncties van de AI Studio Code Editor

De Code Editor bevat meerdere ingebouwde tools waarmee je gemakkelijker door projectbestanden zoekt, wijzigingen beoordeelt, fouten vroeg ontdekt en updates met meer vertrouwen beheert. Samen zorgen deze functies voor een soepelere werkwijze, zowel voor snelle fixes als voor uitgebreidere codewijzigingen.

Find & Replace

Met Find & Replace vind je snel tekst in het huidige bestand en pas je die aan via een zoekervaring zoals je die in een editor gewend bent. Dit is vooral handig wanneer je componenten wilt hernoemen, vaste copy wilt aanpassen of variabelen consistent wilt refactoren.

Met Find & Replace kun je:

  • Find & Replace openen met Cmd/Ctrl + F om in het huidige bestand te zoeken via een zoekervaring zoals in VS Code.
  • Je zoekterm typen om alle matches in het bestand te markeren.
  • De opties voor hoofdlettergevoelig zoeken en hele woorden gebruiken om onbedoelde gedeeltelijke matches te voorkomen.
  • Matches één voor één vervangen of in bulk vervangen.

Global Project Search

Met Global Project Search zoek je door je hele AI Studio-project, niet alleen in het geopende bestand. Dat maakt werken in grotere projecten een stuk overzichtelijker, omdat je minder tijd kwijt bent aan handmatig bestanden openen.

Global Project Search geeft je:

  • Zoekresultaten door het hele project, waarbij elke match per bestand wordt gegroepeerd.
  • Gemarkeerde matches zodat je relevante regels snel kunt scannen.
  • Regelinformatie bij elk resultaat, zodat je direct ziet waar je zit in het bestand.
  • Navigatie met één klik om direct naar het juiste bestand en de juiste regel in de Code Editor te springen.

Instant Save & Live Preview

Instant Save & Live Preview helpen je om wijzigingen snel te beoordelen terwijl je werkt. In plaats van eerst een aparte deploystap af te ronden, werk je code bij en zie je het resultaat meteen in de preview van de builder.

Na het opslaan met de Save-knop wordt de live preview binnen enkele seconden bijgewerkt.

Smart Error Detection

Smart Error Detection helpt je om buildproblemen snel op te sporen terwijl je in de Code Editor werkt. In plaats van AI Studio te verlaten om fouten elders te onderzoeken, kun je de mislukte build direct in de chat bekijken en meteen AI gebruiken om een oplossing te proberen. Daardoor kom je sneller van foutdetectie naar oplossing en blijft je werkwijze in beweging.

Zo gebruik je Smart Error Detection:

  1. Bekijk de buildfout en start de AI-fix

    Na het opslaan van je codewijzigingen kan er in de chat een foutmelding verschijnen met Code edited en daaronder Build unsuccessful. Klik op Details om de buildfout te bekijken en daarna op Try to fix om AI de fout te laten analyseren en een oplossing te laten proberen.

  2. Bekijk de AI-fix en controleer het resultaat

    AI identificeert de fout, werkt de code bij en plaatst daarna een vervolgmelding waarin staat wat er is aangepast. Daarna kun je op Details klikken om de bijgewerkte informatie te bekijken of op Preview klikken om de preview te verversen en te controleren of de oplossing werkt.

Automatic Route Detection

Automatic Route Detection houdt je projectstructuur overzichtelijk wanneer je nieuwe routes toevoegt in code. Dat scheelt handmatig werk en maakt het makkelijker om navigatie in het project te beheren. Zodra er een nieuwe route in code wordt aangemaakt, verschijnt die automatisch in de routekiezer.

Version History

Version history geeft je meer zekerheid tijdens het bewerken, doordat eerdere versies van je project bewaard blijven. Daardoor kun je wijzigingen makkelijker beoordelen, updates vergelijken en fouten herstellen zonder opnieuw te beginnen. Elke keer dat je je code opslaat, wordt er een nieuwe versie aangemaakt.

Om Version History te openen, klik je op het Clock-icoon bovenin de builder.

Unsaved Changes Protection

AI Studio waarschuwt je voordat je weggaat terwijl je nog niet-opgeslagen codewijzigingen hebt, zodat je minder snel werk verliest. Als je probeert weg te gaan met niet-opgeslagen codewijzigingen, verschijnt er een waarschuwing zodat je je werk kunt opslaan voordat je sluit.

Hoe gebruik je de Code Editor

Werken met de AI Studio Code Editor begint met een AI-gegenereerd project en geeft je meer controle over hoe dat project eruitziet en werkt. Zodra je project is aangemaakt, kun je het Code-gedeelte openen om direct aanpassingen te doen, ze in de preview te bekijken en te publiceren wanneer alles klaar is.

Volg deze stappen om te beginnen met de Code Editor:

Stap 1: Open de Code Editor

Open het AI Studio-project dat je wilt aanpassen. Klik in de projectwerkruimte op Code om de Code Editor te openen.

Stap 2: Selecteer het bestand en pas de code aan

Open het bestand dat je wilt bewerken in de bestandsstructuur en breng daarna je codewijzigingen direct aan in de editor. Gebruik Find & Replace of Global Project Search als je hulp nodig hebt om de juiste inhoud of het juiste bestand te vinden.

Stap 3: Sla je wijzigingen op

Klik op Save om je updates toe te passen en de nieuwste preview te verversen.

Stap 4: Bekijk de preview en los eventuele fouten op

Controleer de preview om te zien of de inhoud, lay-out en functionaliteit er goed uitzien.

Als er na het opslaan een buildfout verschijnt, klik je op Details om het probleem te bekijken en daarna op Try to fix om AI een correctie te laten proberen.

Stap 5: Publiceer je project

Zodra je wijzigingen er goed uitzien en je project klaar is, publiceer je het project om de updates live te zetten.

Veelgestelde vragen

V: Moet ik de Code Editor gebruiken om AI Studio te kunnen gebruiken?

Antwoord: Nee. AI Studio kan complete pagina's en flows genereren op basis van je prompts, zonder handmatig coderen. De Code Editor is bedoeld voor als je meer controle wilt over lay-out, styling, logica of koppelingen dan wat de chat en de visuele builder bieden.

V: Welke talen en bestandstypen ondersteunt de AI Studio Code Editor?

Antwoord: De Code Editor werkt op basis van CodeMirror en ondersteunt TypeScript, JSX, CSS, JSON en andere tekstgebaseerde projectbestanden die in AI Studio worden gebruikt.

V: Slaat de Code Editor mijn werk automatisch op?

Antwoord: Je codewijzigingen worden opgeslagen wanneer je op Save klikt. AI Studio waarschuwt je voordat je weggaat met niet-opgeslagen codewijzigingen, zodat de kans kleiner wordt dat je werk verliest.

V: Hebben wijzigingen in de Code Editor meteen effect op mijn live, openbare site?

Antwoord: Nee. Opslaan werkt de live preview bij, maar je openbare site wordt pas aangepast nadat je het AI Studio-project publiceert. Bekijk eerst de preview en publiceer daarna wanneer je klaar bent om de wijzigingen live te zetten.

Heeft dit je vraag beantwoord? Bedankt voor de feedback! Er was een probleem bij het versturen van je feedback. Probeer later nog eens.