L'Editor di Codice in AI Studio ti dà accesso diretto al codice del tuo progetto senza uscire dal builder. Puoi modificare file, cercare nell'intero progetto, individuare rapidamente i problemi e rivedere le modifiche in tempo reale da un unico spazio di lavoro. Questo semplifica il passaggio dall'output generato dall'AI alla rifinitura manuale quando hai bisogno di un maggiore controllo sul progetto.
Importante: AI Studio è disponibile tramite Labs. Attivalo per la tua Location prima di utilizzarlo.
- Cos'è l'Editor di Codice in AI Studio?
Cos'è l'Editor di Codice in AI Studio?
L'Editor di Codice di AI Studio è un ambiente di sviluppo integrato, basato su CodeMirror, disponibile all'interno del builder di AI Studio. Ti consente di visualizzare, modificare e gestire il codice dei tuoi siti web e web app generati dall'AI direttamente in GoHighLevel / Squadd, senza bisogno di un IDE esterno o di una fase di deploy separata! AI Studio genera un progetto funzionante a partire dai tuoi prompt (un'idea, un URL o un design di riferimento), e l'Editor di Codice ti offre un controllo preciso su TypeScript, JSX, CSS, JSON e altri file che alimentano quella esperienza.
Con l'Editor di Codice di AI Studio puoi iterare direttamente dove costruisci: modifica il codice, visualizza aggiornamenti istantanei nell'anteprima live e usa l'AI per diagnosticare e correggere gli errori man mano che li incontri.
Principali vantaggi dell'Editor di Codice
- Maggiore controllo: Apporta modifiche dirette a livello di codice quando hai bisogno di una precisione superiore a quella offerta dalla sola modifica tramite AI.
- Modifiche granulari: Regola testi specifici, stili, componenti, route o comportamento dei file senza dover rielaborare l'intero progetto.
- Nessun cambio di contesto: Modifica il codice direttamente in AI Studio senza scaricare file o uscire da Squadd.
- Debug rapido: Visualizza gli errori non appena compaiono e usa "Prova a correggere" basato sull'AI per generare correzioni suggerite.
- Sperimentazione più sicura: Affidati alla cronologia delle versioni integrata per visualizzare in anteprima, aggiungere segnalibri e ripristinare le modifiche in qualsiasi momento.
- Navigazione più intelligente: Usa Trova e Sostituisci e la Ricerca Globale nel Progetto per passare immediatamente al file, alla riga o al componente giusto.
Funzionalità principali dell'Editor di Codice di AI Studio
L'Editor di Codice include diversi strumenti integrati che semplificano la ricerca nei file di progetto, la revisione delle modifiche, l'individuazione precoce degli errori e la gestione degli aggiornamenti con maggiore sicurezza. Queste funzionalità, nel loro insieme, supportano un'esperienza di modifica più fluida sia per correzioni rapide che per modifiche al codice più avanzate.
Trova e Sostituisci
Trova e Sostituisci ti aiuta a localizzare e aggiornare rapidamente il testo all'interno del file corrente, con un'esperienza di ricerca in stile editor. È particolarmente utile quando devi rinominare componenti, aggiornare testi hardcoded o rifattorizzare nomi di variabili in modo coerente.
Con Trova e Sostituisci puoi:
- Aprire Trova e Sostituisci 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 globale.
Ricerca Globale nel Progetto
La Ricerca Globale nel Progetto ti consente di cercare nell'intero progetto AI Studio, non solo nel file aperto. Questo semplifica il lavoro su progetti più grandi, riducendo il tempo impiegato ad aprire manualmente i file.
La Ricerca Globale nel Progetto ti offre:
- Risultati di ricerca a livello di progetto con ogni corrispondenza raggruppata per file.
- Corrispondenze evidenziate per scorrere rapidamente le righe rilevanti.
- Numeri di riga per ogni risultato, per orientarti facilmente nel file.
- Navigazione con un clic per passare direttamente al file e alla riga corrispondenti nell'Editor di Codice.
Salvataggio Istantaneo e Anteprima Live
Il Salvataggio Istantaneo e l'Anteprima Live ti aiutano a rivedere rapidamente le modifiche mentre lavori. Invece di eseguire il commit delle modifiche e attendere una fase di deploy separata, puoi aggiornare il codice e vedere immediatamente l'effetto nell'anteprima del builder.
Clicca semplicemente il pulsante Salva nel builder e l'anteprima live si aggiorna in pochi secondi.
Rilevamento Intelligente degli Errori
Il Rilevamento Intelligente degli Errori ti aiuta a individuare rapidamente i problemi di build mentre lavori nell'Editor di Codice. Invece di uscire da AI Studio per risolvere gli errori altrove, puoi esaminare la build fallita direttamente nella chat e usare l'AI per tentare una correzione immediata. Questo ti offre un percorso più rapido dal rilevamento dell'errore alla sua risoluzione, mantenendo fluido il flusso di lavoro di modifica.
Come usare il Rilevamento Intelligente degli Errori:
- Esamina l'errore di build e avvia la correzione AI
Dopo aver salvato le modifiche al codice, nella chat potrebbe apparire un errore come Codice modificato con Build non riuscita sottostante.
Clicca Dettagli per esaminare l'errore di build, poi clicca Prova a correggere per fare in modo che l'AI analizzi il problema e tenti una correzione.
- Esamina la correzione AI e visualizza l'anteprima del risultato
L'AI identificherà l'errore, aggiornerà il codice e pubblicherà un messaggio di follow-up che spiega cosa è stato corretto.
Da lì, clicca Dettagli per esaminare le informazioni aggiornate oppure clicca Anteprima per aggiornare l'anteprima e verificare che la correzione abbia funzionato.
Rilevamento Automatico dei Route
Il Rilevamento Automatico dei Route mantiene organizzata la struttura del tuo progetto quando aggiungi nuovi route nel codice. Questo riduce il lavoro manuale successivo e semplifica la gestione della navigazione all'interno del progetto. Quando viene creato un nuovo route nel codice, appare automaticamente nel selettore dei route.
Cronologia delle Versioni
La cronologia delle versioni ti 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 in caso di 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 Orologio 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 chiudere.
Come usare l'Editor di Codice
L'utilizzo dell'Editor di Codice di AI Studio parte da un progetto generato dall'AI e ti offre un maggiore controllo sull'aspetto e sul comportamento di quel progetto. Una volta creato il progetto, puoi aprire l'area Codice per apportare modifiche dirette, esaminarle nell'anteprima e pubblicare quando tutto è pronto.
Segui questi passaggi per iniziare a usare l'Editor di Codice:
Passaggio 1: Apri l'Editor di Codice
Apri il progetto AI Studio che desideri aggiornare. Nell'area di lavoro del progetto, clicca Codice per accedere all'Editor di Codice.
Passaggio 2: Seleziona il file e aggiorna il codice
Apri il file che desideri modificare dalla struttura ad albero dei file, poi apporta le modifiche al codice direttamente nell'editor. Usa Trova e Sostituisci o la Ricerca Globale nel Progetto se hai bisogno di aiuto per individuare il contenuto o il file corretto.
Passaggio 3: Salva le modifiche
Clicca Salva per applicare gli aggiornamenti e aggiornare l'ultima anteprima.
Passaggio 4: Verifica l'anteprima e correggi eventuali errori
Controlla l'anteprima per verificare che il contenuto, il layout e le funzionalità appaiano come previsto.
Se dopo il salvataggio compare un errore di build, clicca Dettagli per esaminare il problema, poi clicca Prova a correggere per lasciare che l'AI tenti una correzione.
Passaggio 5: Pubblica il progetto
Una volta verificate le modifiche e quando il progetto è pronto, pubblica il progetto per mettere online gli aggiornamenti.
Per maggiori informazioni, consulta Pubblicare un Progetto AI Studio
Domande Frequenti
D: Devo necessariamente usare l'Editor di Codice per trarre vantaggio da AI Studio?
No. AI Studio può generare pagine e flussi completi dai tuoi prompt senza alcuna codifica manuale. L'Editor di Codice è pensato per gli utenti che desiderano un controllo più approfondito su layout, stili, logica o integrazioni, al di là di ciò che offre la chat e il builder visuale.
D: Quali linguaggi e tipi di file supporta l'Editor di Codice di AI Studio?
L'Editor di Codice è basato su CodeMirror e supporta la modifica di TypeScript, JSX, CSS, JSON e altri file di testo del progetto utilizzati in AI Studio.
D: L'Editor di Codice salva automaticamente il lavoro?
Le modifiche al codice vengono salvate quando clicchi Salva. AI Studio ti avviserà prima di uscire con modifiche non salvate, riducendo il rischio di perdere il lavoro.
D: Le modifiche nell'Editor di Codice influiscono immediatamente sul mio sito pubblico live?
No. Il salvataggio aggiorna l'anteprima live, ma il tuo sito pubblico dipende dalla pubblicazione del progetto AI Studio. Verifica prima l'anteprima, poi pubblica quando sei pronto a rendere le modifiche visibili online.