AI Studio: Code Editor

De Code Editor in AI Studio geeft je directe toegang tot je projectcode zonder de builder te verlaten. Je kunt bestanden bewerken, door je project zoeken, problemen snel opsporen en wijzigingen in realtime bekijken vanuit één werkruimte. Dit maakt het makkelijker om van AI-gegenerateerde output over te schakelen naar handmatige verfijning wanneer je meer controle over je project nodig hebt.

Belangrijk: AI Studio is available through Labs. Turn it on for your sub-account before using it. For more, refer to Labs Features - Complete Overview

INHOUDSOPGAVE

Wat is de Code Editor in AI Studio?

De AI Studio Code Editor is een ingebouwde, CodeMirror-aangedreven programmeeromgeving binnen de AI Studio builder. Hiermee kun je de code achter je AI-gegenerateerde websites en web-apps direct in Voluit Suite bekijken, bewerken en beheren, zonder externe IDE of implementatiestap nodig! AI Studio genereert een werkend project vanuit je prompts (idee, URL of referentieontwerp), en de Code Editor geeft je nauwkeurige controle over TypeScript, JSX, CSS, JSON en andere bestanden die die ervaring aandrijven.

Met de AI Studio Code Editor kun je itereren waar je bouwt: code bewerken, direct updates zien in de live preview en AI gebruiken om fouten te diagnosticeren en op te lossen terwijl je bezig bent.

Belangrijkste Voordelen van de Code Editor

  • Krijg Meer Controle: Maak directe updates op codenniveau wanneer je meer precisie nodig hebt dan de AI-bewerking alleen kan bieden.
  • Maak Granulaire Wijzigingen: Pas specifieke tekst, styling, componenten, routes of bestandsgedrag aan zonder het hele project opnieuw te bewerken.
  • Geen Contextwisseling: Bewerk code rechtstreeks in AI Studio zonder bestanden te downloaden of het platform te verlaten.
  • Snel Debuggen: Zie fouten zodra ze verschijnen en gebruik AI-gedreven “Probeer te repareren” om voorgestelde correcties te genereren.
  • Veiliger Experimenteren: Vertrouw op de ingebouwde versiesgeschiedenis om wijzigingen op elk moment te bekijken, te bookmarken en terug te draaien.
  • Slimmere Navigatie: Gebruik Zoek & Vervang en Wereldwijde Project Zoeken om onmiddellijk naar het juiste bestand, regel of component te springen.

Kernfuncties van de AI Studio Code Editor

De Code Editor bevat verschillende ingebouwde tools die het makkelijker maken om projectbestanden te doorzoeken, wijzigingen te beoordelen, fouten vroeg te vangen en updates met meer vertrouwen te beheren. Samen ondersteunen deze functies een soepelere bewerkingservaring voor zowel snelle oplossingen als meer geavanceerde codewijzigingen.

Find & Replace

Zoek & Vervang helpt je snel tekst binnen het huidige bestand te lokaliseren en bij te werken met een zoekervaring in editor-stijl. Dit is vooral handig wanneer je componenten moet hernoemen, hardcoded tekst moet bijwerken of variabelen consistent moet refactoren.


Met Zoek & Vervang kun je:

  • Zoek & Vervang openen met Cmd/Ctrl + F om binnen het huidige bestand te zoeken met een VS Code-stijl zoekervaring.
  • Typ je zoekterm om alle overeenkomsten in het bestand te markeren.
  • Gebruik hoofdlettergevoelige en gehele-woordopties om per ongeluk gedeeltelijke overeenkomsten te vermijden.
  • Vervang overeenkomsten één voor één of pas een bulkvervanging toe.

Wereldwijde Project Zoekfunctie laat je zoeken door je hele AI Studio-project, niet alleen het open bestand. Dit maakt het makkelijker om aan grotere projecten te werken, waardoor de tijd die aan het handmatig openen van bestanden wordt besteed, vermindert.

Wereldwijde Project Zoekfunctie geeft je:

  • Projectbrede zoekresultaten met elke overeenkomst gegroepeerd onder zijn bestand.
  • Gemarkeerde overeenkomsten zodat je snel relevante regels kunt scannen.
  • Regelnummers voor elk resultaat, zodat het gemakkelijk is om jezelf in het bestand te oriënteren.
  • Eén-klik navigatie om direct in het overeenkomende bestand en regel in de Code Editor te springen.

Instant Save & Live Preview

Instant Opslaan & Live Preview helpen je wijzigingen snel te beoordelen terwijl je bezig bent. In plaats van wijzigingen te bevestigen en te wachten op een aparte implementatiestap, kun je code bijwerken en onmiddellijk het effect in de preview van de builder zien.

Klik gewoon op de Opslaan knop in de builder en de live preview updates in enkele seconden.

Smart Error Detection

Slimme Foutdetectie helpt je bouwproblemen snel op te sporen terwijl je werkt in de Code Editor. In plaats van AI Studio te verlaten om fouten elders op te lossen, kun je de mislukte build rechtstreeks in de chat bekijken en AI gebruiken om onmiddellijk een oplossing te proberen. Dit biedt je een snellere weg van foutdetectie naar oplossing en helpt je je bewerkingsworkflow soepel te houden.

Hoe gebruik je Slimme Foutdetectie:

  1. Beoordeel de Bouwfout en Start de AI Refix

    Nadat je codewijzigingen hebt opgeslagen, kan er een fout in de chat verschijnen als Code bewerkt met Build niet succesvol eronder.

    Klik op Details om de bouwfout te bekijken, klik vervolgens op Probeer te repareren zodat AI het probleem kan analyseren en een poging kan doen om het op te lossen.

  2. Beoordeel de AI Refix en Bekijk het resultaat

    AI zal de fout identificeren, de code bijwerken en vervolgens een opvolgbericht plaatsen waarin wordt uitgelegd wat er is gerepareerd.

    Van daaruit klik je op Details om de bijgewerkte informatie te bekijken of klik je op Bekijk om de preview te verversen en te bevestigen dat de fix werkte.

Automatic Route Detection

Automatische Route Detectie helpt je de projectstructuur georganiseerd te houden wanneer je nieuwe routes in code toevoegt. Dit vermindert handmatig vervolgwerk en maakt het makkelijker om de navigatie binnen het project te beheren. Wanneer een nieuwe route in de code wordt gemaakt, verschijnt deze automatisch in de route-selector.

Version History

Versiesgeschiedenis geeft je een veiligere bewerkingsworkflow door eerdere staten van je project te bewaren. Dit maakt het makkelijker om wijzigingen te beoordelen, updates te vergelijken en van fouten te herstellen zonder opnieuw te hoeven beginnen. Elke keer dat je je code opslaat, wordt er een nieuwe versie gemaakt.

Om toegang te krijgen tot Versiesgeschiedenis, klik je op het Klok pictogram bovenin de builder.

Unsaved Changes Protection

AI Studio waarschuwt je voordat je vertrekt met onopgeslagen codewijzigingen, wat helpt om verloren werk te voorkomen. Als je probeert te vertrekken met onopgeslagen codewijzigingen, verschijnt er een waarschuwing zodat je je werk kunt opslaan voordat je verlaat.

Hoe de Code Editor te Gebruiken

Gebruik van de AI Studio Code Editor begint met een AI-gegenerateerd project en geeft je meer controle over hoe dat project er uitziet en zich gedraagt. Zodra je project is gemaakt, kun je het Code-gedeelte openen om directe updates te maken, deze in de preview te beoordelen en te publiceren wanneer alles klaar is.

Volg deze stappen om aan de slag te gaan met de Code Editor:

Step 1: Open the Code Editor

Open het AI Studio-project dat je wilt bijwerken. Klik in de projectwerkruimte op Code om toegang te krijgen tot de Code Editor.

Step 2: Select the file and update the code

Open het bestand dat je wilt bewerken vanuit de bestandsstructuur, en maak je codewijzigingen direct in de editor. Gebruik Zoek & Vervang of Wereldwijde Project Zoekfunctie als je hulp nodig hebt bij het vinden van de juiste inhoud of bestand.

Step 3: Save your changes

Klik op Opslaan om je updates toe te passen en de laatste preview te verversen.

Step 4: Review the preview & fix any errors

Controleer de preview om te bevestigen dat de inhoud, lay-out en functionaliteit er uitziet zoals verwacht.

Als er een bouwfout verschijnt na het opslaan, klik dan op Details om het probleem te bekijken, klik vervolgens op Probeer te repareren zodat AI een correctie kan proberen.

Step 5: Publish your project

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

Voor meer informatie, zie link onderaan.

Veelgestelde Vragen

Q: Moet ik de Code Editor gebruiken om van AI Studio te profiteren?

Nee. AI Studio kan complete pagina's en flows genereren vanuit je prompts zonder enige handmatige codering. De Code Editor is voor gebruikers die diepere controle willen over lay-out, styling, logica of integraties boven wat de chat en visuele builder bieden.

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

De Code Editor is CodeMirror-aangedreven en ondersteunt het bewerken van TypeScript, JSX, CSS, JSON en andere tekst-gebaseerde projectbestanden die binnen AI Studio worden gebruikt.

Q: Slaat de Code Editor automatisch mijn werk op?

Wijzigingen aan je code worden opgeslagen wanneer je op Opslaan klikt. AI Studio waarschuwt je voordat je vertrekt met onopgeslagen codewijzigingen, zodat het risico op het verliezen van werk vermindert.

Q: Hebben bewerkingen in de Code Editor onmiddellijke invloed op mijn live, openbare site?

Nee. Opslaan werkt de live preview bij, maar je openbare site hangt af van het publiceren van het AI Studio-project. Bekijk eerst de preview en publiceer wanneer je klaar bent voor de wijzigingen om live te gaan.

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

Gerelateerde artikelen