Visual Studio Code, popolarmente noto come VS Code, è uno degli editor di codice più utilizzati. VS Code ha il supporto integrato per Node.js, JavaScript e TypeScript. Tuttavia, puoi utilizzare varie estensioni per renderlo accessibile alla maggior parte degli altri linguaggi e runtime.
Microsoft è la società che ha sviluppato questo editor di codice gratuito e open source.
VS Code è popolare grazie a queste funzionalità;
- Intellisense: VS Code fornisce il completamento automatico del codice e l’evidenziazione della sintassi.
- Multipiattaforma: puoi utilizzare questo editor di codice su sistemi operativi Linux, Windows e macOS.
- Disponibilità di varie estensioni: la disponibilità di varie estensioni può anche trasformare VS Code in un ambiente di sviluppo integrato (IDE).
- Supporto multilingue: puoi utilizzare questo strumento con quasi tutti i linguaggi di programmazione tramite le estensioni VS Code.
- Terminale integrato: il terminale integrato in VS Code consente agli sviluppatori di eseguire comandi Git direttamente dall’editor di codice. Puoi quindi eseguire il commit, il push e il pull delle modifiche da questo editor.
Sommario:
Formattazione automatica in VS Code
Prerequisiti
- VS Code: questo editor di codice può essere scaricato gratuitamente. Se non lo hai installato sul tuo computer, scaricalo dal sito ufficiale, a seconda del tuo sistema operativo.
- Selezionare la lingua da utilizzare: è necessario decidere la lingua da utilizzare in quanto esistono diversi formattatori per lingue diverse.
- Un formattatore: VS Code utilizza le estensioni per la formattazione del codice. Useremo Prettier in questo articolo. Tuttavia, sei libero di utilizzare qualsiasi formattatore adatto alla lingua che stai utilizzando.
La formattazione automatica è una funzionalità che formatta automaticamente blocchi/righe di codice o un file nell’editor di codice in base a regole e linee guida specifiche. Questa funzione si basa su un file di configurazione che specifica le regole di formattazione su rientro, interruzioni di riga e spaziatura.
Quando la funzione di formattazione automatica è abilitata, tutte queste regole verranno applicate a tutti i file nella tua base di codice mentre la scrivi.
Tuttavia, puoi anche disabilitare la formattazione automatica per un blocco di codice specifico se vuoi che si distingua dagli altri. Per ottenere ciò, puoi avvolgere il pezzo di codice in un blocco di commento che specifica le regole da applicare.
Vantaggi dei codici di formattazione automatica nel codice VS
- Risparmio di tempo: la scrittura del codice e la formattazione possono richiedere molto tempo. La formattazione automatica ti fa risparmiare tempo e puoi quindi concentrarti maggiormente sul processo di scrittura e sulla sintassi.
- Coerenza: anche se il codice sorgente non appare sul lato client, dovrebbe esserci una certa coerenza. La formattazione automatica è utile, soprattutto per progetti di grandi dimensioni con più contributori.
- Rispetta le migliori pratiche: la funzione di formattazione automatica è utile per applicare convenzioni di indentazione, spaziatura e denominazione coerenti.
- Per una facile lettura del codice: il codice ben formattato è facile da seguire durante le revisioni del codice. I nuovi sviluppatori che entrano a far parte della tua organizzazione capiranno facilmente il codice ben formattato.
Come abilitare il formato automatico nel codice VS e personalizzarlo
Segui questi passaggi per abilitare la formattazione automatica:
Una volta installato Prettier sul tuo VS Code, puoi abilitare la funzione di formattazione automatica.
Utilizziamo un semplice file HTML di una pagina di accesso per dimostrare come abilitare la formattazione automatica.
Useremo questo codice:
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body style> <h2 style="text-align: center; margin-top: 50px;">Login </h2> <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);"> <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label> <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label> <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;"> </form> </body> </html>
Anche se il codice sopra è funzionale, è difficile da leggere e seguire poiché non è rientrato come previsto. Useremo Prettier per formattare automaticamente il codice.
Segui questi passi.
3. Digitare Formatter nella barra di ricerca e selezionare Prettier nella scheda Editor:Formattatore predefinito.
4. Individua Editor: Formato su Salva e seleziona la casella.
5. Salvare il file HTML, selezionare gli input nel documento HTML, fare clic con il pulsante destro del mouse e selezionare Formatta documento.
6. Controlla se il tuo documento è stato formattato. Questa estensione formatterà automaticamente tutto il resto del codice che scrivi sul tuo VS Code.
6. Regola le impostazioni di configurazione di Prettier: Prettier è impostato per eseguire molte cose per impostazione predefinita. Tuttavia, puoi comunque personalizzarlo in base alle tue esigenze. Vai su Impostazioni sul tuo VS Code, cerca Prettier e regola le impostazioni a tuo piacimento.
7. Crea un file di configurazione più carino: le impostazioni che hai configurato sulla tua macchina potrebbero differire dalle altre se lavori in gruppo. Un file di configurazione Prettier ti garantirà uno stile di codice coerente per il tuo progetto. Crea un file .prettierrc con estensione .json per configurare le impostazioni del tuo progetto. Possiamo aggiungere questo codice al file JSON a scopo dimostrativo;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Il blocco di codice sopra specifica quattro cose, virgole finali, la larghezza della tabulazione, l’uso del punto e virgola e se usare virgolette singole o doppie. In questo caso;
- Una virgola finale verrà aggiunta solo quando il codice viene trasferito in es5.
- La larghezza della tabulazione, il numero di spazi per ogni tabulazione, è impostata su 4.
- Semi indica se aggiungere o meno il punto e virgola al codice alla fine delle istruzioni. L’abbiamo impostato come falso, il che significa che i punti e virgola non verranno aggiunti.
- Puoi utilizzare virgolette singole o doppie nel codice. Abbiamo specificato che dovremmo usare virgolette singole per questo progetto.
Puoi controllare i documenti Prettier per capire come creare impostazioni di configurazione coerenti.
Best practice per il formato automatico in VS Code
Usa il formato corretto
Anche se abbiamo utilizzato Prettier in questo articolo a scopo dimostrativo, ciò non significa che si applichi a tutte le lingue. Esistono centinaia di estensioni di formattazione per VS Code e spetta a te determinare quale si adatta alle tue esigenze. Ad esempio, formattatori come Prettier e Beautify si adattano a HTML e CSS. D’altra parte, puoi usare le estensioni Black o Python per formattare il tuo codice Python.
Usa uno stile di codice coerente
Come hai visto, puoi personalizzare le impostazioni del formattatore. Se lavori in team, assicurati di avere le stesse configurazioni per creare uno stile di codice coerente. L’approccio migliore è creare un file .prettierrc.extension per includere tutte le configurazioni per il tuo progetto.
Usa linter
Puoi utilizzare i linter per verificare la presenza di violazioni di stile, errori di sintassi ed errori di programmazione nel codice. La combinazione di linter con la formattazione automatica ti farà risparmiare un sacco di tempo e fatica nel rendere il tuo codice leggibile e nel debug.
Utilizza le scorciatoie da tastiera
VS Code ha centinaia di scorciatoie per farti risparmiare tempo nella formattazione. Puoi persino personalizzare questi comandi in qualcosa di memorabile.
Controlla il tuo codice prima di impegnarti
Anche se il linting e la formattazione automatica possono risolvere alcuni problemi sul tuo codice; devi ancora rivedere il tuo codice prima di inserire il comando commit.
Scorciatoie per la formattazione del codice
VS Code è un editor di codice multipiattaforma che puoi utilizzare su sistemi basati su Windows, Mac e Linux come Ubuntu. È possibile utilizzare le seguenti scorciatoie per formattare l’intero documento o aree del codice evidenziate in modo specifico;
finestre
- La combinazione Maiusc + Alt + F formatta l’intero documento.
- La combinazione Ctrl + K, Ctrl + F formatta una sezione del codice che hai selezionato. Ad esempio, un div.
Mac OS
- La combinazione Maiusc + Opzione + F formatta l’intero documento.
- La combinazione Ctrl + K, Ctrl + F formatta una sezione del codice che hai selezionato. Ad esempio, un div.
Ubuntu
- La combinazione Ctrl + Maiusc + I formatta l’intero documento.
- La combinazione Ctrl + K, Ctrl + F formatta una sezione del codice che hai selezionato. Ad esempio, un div.
Tuttavia, tieni presente che alcune di queste scorciatoie potrebbero non riuscire se hai personalizzato il tuo VS Code con varie scorciatoie.
Puoi controllare le tue scorciatoie VS Code seguendo questi passaggi;
- Apri VS Code e fai clic sulla voce File nell’angolo in alto a sinistra.
- Scorri fino a Preferenze
- Fai clic su Scorciatoie da tastiera per visualizzare tutte le scorciatoie che puoi utilizzare.
Conclusione
La formattazione automatica può farti risparmiare un sacco di tempo quando la abiliti. La scelta di un’estensione sarà diversa a seconda della lingua che stai utilizzando. Puoi installare più formattatori di codice a seconda dei linguaggi di programmazione che utilizzi per i tuoi progetti.
Controlla sempre la documentazione del formattatore che scegli per il tuo codice. Questo ti assicurerà di comprendere le lingue che supporta e come sfruttarle al meglio.
Dai un’occhiata al nostro articolo sulle migliori estensioni VS Code che gli sviluppatori dovrebbero utilizzare.