Come formattare automaticamente il codice in VS Code

Se stai pensando di imparare a programmare, o se lo stai già scrivendo ogni giorno, un editor di codice affidabile come Visual Studio Code è un must. Quando scrivi il codice, dovresti pensare alla formattazione in quanto sarà più facile da leggere per le persone.

Tutte queste regole specifiche sul rientro e l’interlinea sono importanti, ma è facile dimenticarle quando sei concentrato sul tuo lavoro.

Ecco perché VS Code ti consente di utilizzare estensioni di formattazione automatica che possono aiutarti lungo il percorso. Alcune estensioni di formattazione automatica possono formattare più di un linguaggio di programmazione, mentre altre richiedono l’integrazione di estensioni specializzate.

Come formattare automaticamente HTML

Hypertext Markup Language o HTML è un linguaggio di codifica utilizzato per creare e visualizzare pagine Web. Gli sviluppatori Web e gli ingegneri del software utilizzano l’HTML ogni giorno e possono beneficiare di uno strumento di formattazione automatico.

Se preferisci l’editor di codice VS, ecco come puoi trovare Prettier, il popolare formattatore di codice e attivare la funzione di formattazione automatica.

• Apri Visual Studio Code sul tuo computer.

• Fare clic sulla scheda estensioni sul lato sinistro dello schermo. Si presenta sotto forma di quattro blocchi.

• Inserisci “Formattatore di codici più carino” nella casella di ricerca.

• Otterrai più risultati di ricerca, ma scegli quello realizzato da Prettier e non da un’altra persona o azienda.

• Fai clic sul pulsante “Installa” e l’estensione verrà scaricata in pochi secondi.

Installando il formattatore Prettier, puoi attivare la funzione di formattazione automatica e garantire stili coerenti durante la scrittura del codice.

• Apri o crea un nuovo file HTML in VS Code.

• Vai su “Impostazioni” che si trova nell’angolo in basso a sinistra dello schermo.

• Digita “Formato” nella casella di ricerca e fai clic sulla scheda “Utente”.

• Fai clic sull’opzione Formattazione predefinita e seleziona Più carina dall’elenco.

• Scorri un po’ verso il basso finché non vedi l’opzione “Editor: Formatta al salvataggio”.

• Seleziona la casella accanto a questa opzione.

• Torna al tuo file e controlla se l’impostazione funziona.

Prettier dovrebbe formattare automaticamente i file HTML quando li salvi.

Formato JSON automatico

La notazione dell’oggetto JavaScript o JSON è classificata come formato di scambio di dati indipendente dalla lingua. Le applicazioni mobili e i programmi per computer utilizzano i file JSON per leggere i dati dai server e visualizzarli sullo schermo.

Quando crei un file JSON nell’editor di codice di Visual Studio, devi anche prestare attenzione alla formattazione. La buona notizia è che puoi utilizzare le estensioni del formattatore di Prettier in VS Code per garantire uno stile coerente tra i tuoi file JSON.

Ecco tutto ciò che devi fare per abilitare la funzione di formattazione automatica per i file JSON.

• Avvia VS Code e vai alla scheda Estensioni assegnate sul lato sinistro della finestra.

• Cerca “Formattatore di codici più carino” nel campo di ricerca.

• Il primo risultato è solitamente quello su cui si desidera fare clic. Tuttavia, per essere sicuro, scegli quello che dice “Più carino” come sviluppatore.

• Fare clic su “Installa” e attendere alcuni secondi per il caricamento del formattatore.

Una volta installato il formattatore Prettier, assicurati che la funzione di formattazione automatica sia abilitata seguendo i passaggi seguenti.

• Crea un nuovo file JSON o apri un file che non è stato ancora formattato.
• Fai clic su “Impostazioni” nell’angolo in basso a sinistra.

• Trova “Formato”.

• Fare clic sulla sezione Formato predefinito. seleziona “Più bella” dall’elenco a discesa.

• Scorri verso il basso e fermati quando vedi l’opzione “Editor: Formatta al salvataggio”.

• Seleziona la casella accanto a questa opzione.

• Assicurati che la funzione di formattazione automatica funzioni.

È tutto. L’estensione Prettier nell’editor VS Code semplifica la formattazione automatica.

Formato Python automatico

Python è uno dei linguaggi di programmazione più popolari in questi giorni ed è ampiamente utilizzato dagli sviluppatori web e dagli appassionati di programmazione. Viene utilizzato per progettare e creare software e siti Web, analizzare dati, automatizzare attività e altro ancora.

Se stai usando VS Code per modificare un file Python, dovrai usare il formattatore corretto. Sebbene Prettier funzioni con molti linguaggi di programmazione, non è compatibile con Python.

Fortunatamente, VS Code offre una soluzione. Uno dei migliori formattatori Python in VS Code è Black e può essere utilizzato per formattare il codice ogni volta che si salva automaticamente un file. Tuttavia, prima di utilizzare Black, è necessario scaricare l’estensione Microsoft Python per VS Code:

• Apri VS Code e cerca “Python” nella casella di ricerca.

• Assicurati che sia un’estensione Microsoft e fai clic su Installa.

• Per installare il formattatore Phyton, inserisci il seguente testo nell’ambiente virtuale: “$ pip install black”.
• Vai su “Impostazioni” in VS Code e cerca “Phyton Formatting Provider”.

• Seleziona “Nero” dal menu a discesa.

• Scorri verso il basso e cerca l’opzione “Editor: Formatta al salvataggio”.

• Seleziona la casella accanto a questa opzione.

Nero, il formattatore Python ora formatterà automaticamente il codice ogni volta che salvi un file.

VS Code si formatta automaticamente al momento del salvataggio

Puoi attivare la funzione di formattazione automatica indipendentemente dal linguaggio di programmazione o dal formattatore di codice che utilizzi in VS Code.

La maggior parte degli sviluppatori utilizza diverse estensioni di formattazione del codice in VS Code, quindi puoi assicurarti che ognuna di esse formatti automaticamente il file quando viene salvato.

Ecco come funziona.

• Aprire l’editor di codice di Visual Studio.

• Fai clic sull’icona a forma di ingranaggio “Impostazioni” nell’angolo in basso a sinistra.

• Trova “Formatter” e fai clic su “Editor: Default Formatter”.

• Seleziona il formattatore di codice che desideri utilizzare dal menu a discesa.

• Scorri un po’ verso il basso e seleziona la casella accanto all’opzione “Editor: Formatta al salvataggio”.

Puoi ripetere questo processo per ogni formattatore di codice che usi in VS Code.

Domande frequenti

Perché il “Formatta al salvataggio” automatico non funziona?

Se hai l’opzione “Formatta al salvataggio” nel formattatore di VS Code e non funziona correttamente, probabilmente hai a che fare con un bug.

La tua versione del formattatore potrebbe avere problemi ed è necessario verificare se è disponibile un aggiornamento. Tuttavia, il problema potrebbe non dipendere da te e l’arresto anomalo verrà risolto dagli sviluppatori di VS Code.

Come disabilitare la formattazione automatica in VS Code?

Disabilitare la funzione di formattazione automatica è molto semplice. Segui i passaggi seguenti per disattivare la formattazione automatica.

1. Aprire l’editor VS Code e fare clic sull’icona “Impostazioni”.

2. Trova “Formattatore” e seleziona il formattatore per il quale desideri disabilitare la formattazione automatica.

3. Trova l’opzione “Editor: Formatta al salvataggio” e deseleziona la casella accanto ad essa.

Facile formattazione automatica del codice in Visual Studio Code

Uno degli aspetti migliori dell’utilizzo di VS Code è l’interfaccia ben progettata che consente anche ai principianti di navigare nell’editor.

La formattazione del codice corretta e continua è essenziale per il codice leggibile, ma queste convenzioni possono essere ingombranti se devi eseguirle manualmente.

Ma la buona notizia è che l’editor VS Code ha molti strumenti di formattazione del codice che possono rendere più semplice e veloce la scrittura di codice leggibile.

Che si tratti di Prettier, Black o qualsiasi altra estensione, gli utenti hanno sempre la possibilità di formattare automaticamente il codice nel momento in cui il file viene salvato.

Quale linguaggio di programmazione usi e quale formattatore funziona meglio? Fateci sapere nei commenti qui sotto.