Code Editor in AI Studio
Il Code Editor di AI Studio ti dà accesso diretto al codice del tuo progetto senza uscire dal builder. Puoi modificare file, cercare in tutto il progetto, individuare problemi rapidamente e rivedere le modifiche in tempo reale da un unico spazio di lavoro. Questo rende più semplice passare dall'output generato dall'AI alla revisione manuale quando hai bisogno di un controllo più preciso sul tuo progetto.
Importante: AI Studio è disponibile tramite Labs. Attivalo per il tuo sub-account prima di utilizzarlo. Per ulteriori informazioni, consulta Labs Features - Complete Overview
INDICE
- Cos'è il Code Editor di AI Studio?
- Vantaggi principali del Code Editor
- Funzionalità principali del Code Editor di AI Studio
- Come usare il Code Editor
- Domande frequenti
- Articoli correlati
Cos'è il Code Editor di AI Studio?
Il Code Editor di AI Studio è un ambiente di sviluppo integrato, basato su CodeMirror, all'interno del builder di AI Studio. Ti permette di visualizzare, modificare e gestire il codice dei tuoi siti web e web app generati dall'AI direttamente in HITLEAD, senza bisogno di un IDE esterno o di un passaggio di deploy separato! AI Studio genera un progetto funzionante dai tuoi prompt (idea, URL o design di riferimento), e il Code Editor ti dà un controllo preciso su TypeScript, JSX, CSS, JSON e gli altri file che animano quell'esperienza.
Con il Code Editor di AI Studio puoi lavorare direttamente dove costruisci: modifica il codice, vedi gli aggiornamenti in tempo reale nell'anteprima live e usa l'AI per diagnosticare e correggere gli errori man mano che lavori.
Vantaggi principali del Code Editor
-
Maggiore controllo: Effettua aggiornamenti diretti a livello di codice quando hai bisogno di una precisione che la sola modifica AI non può garantire.
-
Modifiche granulari: Regola testo specifico, stile, componenti, route o comportamento dei file senza rielaborare l'intero progetto.
-
Nessun cambio di contesto: Modifica il codice direttamente in AI Studio senza scaricare file o uscire dalla piattaforma.
-
Debug rapido: Visualizza gli errori non appena compaiono e usa il pulsante "Try to fix" basato sull'AI per generare correzioni suggerite.
-
Sperimentazione più sicura: Affidati alla cronologia delle versioni integrata per visualizzare in anteprima, aggiungere ai preferiti e ripristinare le modifiche in qualsiasi momento.
-
Navigazione più intelligente: Usa Find & Replace e la ricerca globale nel progetto per raggiungere istantaneamente il file, la riga o il componente giusto.
Funzionalità principali del Code Editor di AI Studio
Il Code Editor include diversi strumenti integrati che rendono più semplice cercare nei file del progetto, rivedere le modifiche, individuare gli errori in anticipo e gestire gli aggiornamenti con maggiore sicurezza. Insieme, queste funzionalità supportano un'esperienza di modifica più fluida sia per le correzioni rapide che per le modifiche al codice più avanzate.
Find & Replace
Find & Replace ti aiuta a individuare e aggiornare rapidamente il testo all'interno del file corrente tramite un'esperienza di ricerca in stile editor. È particolarmente utile quando devi rinominare componenti, aggiornare testi statici o rifattorizzare nomi di variabili in modo coerente.
Con Find & Replace puoi:
-
Aprire Find & Replace con Cmd/Ctrl + F per cercare nel file corrente con un'esperienza di ricerca in stile VS Code.
-
Digitare il termine di ricerca per evidenziare tutte le corrispondenze nel file.
-
Usare le opzioni di distinzione maiuscole/minuscole e parola intera per evitare corrispondenze parziali accidentali.
-
Sostituire le corrispondenze una alla volta o applicare una sostituzione in blocco.
Ricerca globale nel progetto
La ricerca globale nel progetto ti permette di cercare in tutto il progetto di AI Studio, non solo nel file aperto. Questo semplifica il lavoro su progetti più grandi, riducendo il tempo dedicato ad aprire i file manualmente.
La ricerca globale nel progetto ti offre:
-
Risultati di ricerca a livello di progetto, con ogni corrispondenza raggruppata sotto il suo file.
-
Corrispondenze evidenziate per scorrere rapidamente le righe rilevanti.
-
Numeri di riga per ogni risultato, che ti aiutano ad orientarti facilmente nel file.
-
Navigazione con un clic per andare direttamente al file e alla riga corrispondenti nel Code Editor.
Salvataggio istantaneo e anteprima live
Il salvataggio istantaneo e l'anteprima live ti permettono di rivedere le modifiche rapidamente mentre lavori. Invece di salvare le modifiche e attendere un passaggio di deploy separato, puoi aggiornare il codice e vedere immediatamente l'effetto nell'anteprima del builder.
Clicca semplicemente il pulsante Save nel builder e l'anteprima live si aggiorna in pochi secondi.
Rilevamento errori intelligente
Il rilevamento errori intelligente ti aiuta a individuare rapidamente i problemi di build mentre lavori nel Code Editor. Invece di uscire da AI Studio per risolvere gli errori altrove, puoi esaminare il build fallito direttamente nella chat e usare l'AI per tentare una correzione immediata. Questo offre un percorso più rapido dal rilevamento dell'errore alla sua risoluzione e ti aiuta a mantenere il flusso di lavoro di modifica attivo.
Come usare il rilevamento errori intelligente:
-
Esamina l'errore di build e avvia la correzione AI
Dopo aver salvato le modifiche al codice, nella chat potrebbe comparire un errore con la dicitura Code edited e Build unsuccessful sotto di essa.
Clicca Details per esaminare l'errore di build, poi clicca Try to fix per far analizzare il problema all'AI e tentare una correzione.
-
Esamina la correzione AI e visualizza il risultato in anteprima
L'AI identificherà l'errore, aggiornerà il codice e pubblicherà un messaggio di follow-up che spiega cosa è stato corretto.
Da lì, clicca Details per esaminare le informazioni aggiornate oppure clicca Preview per aggiornare l'anteprima e confermare che la correzione ha funzionato.
Rilevamento automatico delle route
Il rilevamento automatico delle route mantiene la struttura del tuo progetto organizzata quando aggiungi nuove route nel codice. Questo riduce il lavoro manuale di follow-up e semplifica la gestione della navigazione all'interno del progetto. Quando una nuova route viene creata nel codice, appare automaticamente nel selettore delle route.
Cronologia versioni
La cronologia delle versioni offre un flusso di lavoro di modifica più sicuro preservando gli stati precedenti del tuo progetto. Questo semplifica la revisione delle modifiche, il confronto degli aggiornamenti e il ripristino da errori senza dover ricominciare da capo. Ogni volta che salvi il codice, viene creata una nuova versione.
Per accedere alla cronologia delle versioni, clicca l'icona Clock nella parte superiore del builder.
Protezione delle modifiche non salvate
AI Studio ti avvisa prima che tu esca con modifiche al codice non salvate, aiutando a prevenire la perdita di lavoro. Se tenti di uscire con modifiche non salvate, compare un avviso che ti permette di salvare il lavoro prima di uscire.
Come usare il Code Editor
L'utilizzo del Code Editor di AI Studio parte da un progetto generato dall'AI e ti dà un maggiore controllo sull'aspetto e sul comportamento di quel progetto. Una volta creato il progetto, puoi aprire l'area Code per apportare aggiornamenti diretti, rivederli nell'anteprima e pubblicare quando tutto è pronto.
Segui questi passaggi per iniziare con il Code Editor:
Passaggio 1: Apri il Code Editor
Apri il progetto AI Studio che vuoi aggiornare. Nello spazio di lavoro del progetto, clicca Code per accedere al Code Editor.
Passaggio 2: Seleziona il file e aggiorna il codice
Apri il file che vuoi modificare dall'albero dei file, poi apporta le modifiche al codice direttamente nell'editor. Usa Find & Replace o la ricerca globale nel progetto se hai bisogno di aiuto per individuare il contenuto o il file giusto.
Passaggio 3: Salva le modifiche
Clicca Save per applicare gli aggiornamenti e aggiornare l'anteprima più recente.
Passaggio 4: Esamina l'anteprima e correggi gli eventuali errori
Controlla l'anteprima per confermare che il contenuto, il layout e le funzionalità appaiano come previsto.
Se dopo il salvataggio compare un errore di build, clicca Details per esaminare il problema, poi clicca Try to fix per lasciare che l'AI tenti una correzione.
Passaggio 5: Pubblica il progetto
Una volta che le modifiche sono corrette e il progetto è pronto, pubblica il progetto per rendere gli aggiornamenti live.
Per ulteriori informazioni, consulta Pubblicare un progetto AI Studio
Domande frequenti
D: Devo usare il Code Editor per beneficiare di AI Studio?
No. AI Studio può generare pagine e flussi completi dai tuoi prompt senza alcuna programmazione manuale. Il Code Editor è per gli utenti che vogliono un controllo più approfondito su layout, stile, logica o integrazioni al di là di ciò che la chat e il builder visuale offrono.
D: Quali linguaggi e tipi di file supporta il Code Editor di AI Studio?
Il Code Editor è basato su CodeMirror e supporta la modifica di TypeScript, JSX, CSS, JSON e altri file di testo del progetto utilizzati in AI Studio.
D: Il Code Editor salva automaticamente il mio lavoro?
Le modifiche al codice vengono salvate quando clicchi Save. AI Studio ti avviserà prima di uscire con modifiche non salvate, riducendo il rischio di perdere il lavoro.
D: Le modifiche nel Code Editor hanno effetto immediato sul mio sito pubblico live?
No. Il salvataggio aggiorna l'anteprima live, ma il tuo sito pubblico dipende dalla pubblicazione del progetto AI Studio. Esamina prima l'anteprima, poi pubblica quando sei pronto perché le modifiche vadano live.
Articoli correlati
-
AI Studio in HITLEAD
-
Connetti Forms e Calendari in AI Studio
-
Prezzi dei prodotti AI
-
Supporto SEO avanzato in AI Studio
Questo articolo è stato utile?