Come personalizzare il codice di Visual Studio

Codice di Visual Studio, il nuovo editore di codice open source di Microsoft offre agli sviluppatori molte caratteristiche fantastiche che significativamente facilitare il processo di modifica del codice sorgente. Inoltre, Visual Studio Code assicura anche che gli utenti non si annoino quando lavorano con esso, in quanto consente loro di farlo personalizzare diverse parti del suo aspetto, come colori, caratteri, spaziatura e formattazione del testo, proprio come molte funzionalità, come ad esempio linting e regole di validazione.

In questo post, in un primo momento daremo un'occhiata come cambiare l'aspetto dello spazio di lavoro del codice di Visual Studio, poi ti mostrerò come personalizzare le impostazioni di default con l'aiuto di due JSON-file di configurazione formattati.

Come impostare un tema di colore su VS Code

Codice di Visual Studio consente di imposta un tema colore personalizzato per il tuo editore.

Per mettere in uso un tema già predisposto, fare clic su File> Preferenze> Tema colore menu nella barra dei menu in alto. Quando colpisci “accedere”, viene visualizzata la palette dei comandi e viene visualizzato un elenco a discesa dei temi tra cui è possibile scegliere.

È possibile ottenere lo stesso effetto se si preme F1 per aprire la palette dei comandi e digitare il Preferenze: Tema colore comando nel campo di input.

Mentre scorri le opzioni nell'elenco a discesa, l'aspetto dello spazio di lavoro cambia in tempo reale, in modo da poter vedere rapidamente quale tema si adatta alle tue esigenze al meglio.

Io scelgo il “Alto contrasto” tema del colore, come i miei occhi non sono i migliori. Ecco come appare la mia vista.

Come installare un tema dal Marketplace VS Code

Se non ti piacciono i temi di colori offerti da VS Code per impostazione predefinita, puoi scaricarne molti altri dal VS Code Marketplace.

Qui puoi dare un'occhiata ai temi che il Marketplace ha attualmente. Se vuoi installare un tema dal Marketplace, premi F1 proprio all'interno del tuo editor di codice VS per aprire la palette dei comandi, quindi digitare il installazione ext comando nel campo di input, infine scegliere il Estensioni: Installa estensione opzione dalla lista che si apre.

Quando fai clic su questa opzione, viene visualizzata una nuova istanza di Command Palette. Digitare il "tema di installazione ext" comando nel nuovo campo di input, e lo farai ottieni una lista di tutti i temi che sono disponibili sul Marketplace VS Code.

Scelgo il tema chiamato “Kit di temi materiali”, e installarlo facendo clic su di esso. Per avere il nuovo tema nell'elenco Temi colore, nello stesso posto in cui sono presenti gli altri temi predefiniti, è necessario riavviare VS Code. Dopo il riavvio, il nuovo tema viene visualizzato nell'elenco dei temi e puoi impostarlo dalla tavolozza dei comandi.

Con il nuovo tema materiale, il mio editor ora appare così:

Puoi tornare al tema precedente (come ho fatto io, perché preferisco ancora quel tema) oppure puoi giocare un po 'di più con altri temi per vedere quale è il più adatto per te.

Se vuoi, puoi anche crea il tuo tema personalizzato, e pubblicarlo su VS Code Marketplace utilizzando lo strumento vsce extension manager.

Modifica impostazioni utente e area di lavoro

VS Code non ti consente solo di impostare un tema personalizzato, ma puoi anche farlo configurare molte altre impostazioni, come regole di formattazione, utilizzo di diverse funzionalità, rapporti sugli arresti anomali, impostazioni HTTP, associazioni di file, regole di linting e altro.

Puoi farlo modificando due file di configurazione, entrambi in formato JSON. Non preoccuparti, non devi essere un professionista, dato che VS Code offre un modo abbastanza semplice e intuitivo per aggiungere rapidamente le tue personalizzazioni.

Inizialmente, vediamo qual è la differenza tra i due file di configurazione. Il codice VS ha due ambiti (globale e Locale) per le impostazioni, quindi i due file separati:

1. il globale settings.json, in cui le regole di configurazione sono valide per ogni area di lavoro
2. lo spazio di lavoro correlato .vscode / settings.json, ciò è correlato solo a un singolo spazio di lavoro

Il globale settings.json il file può essere trovato nella cartella in cui il tuo sistema operativo memorizza ogni altro file di configurazione relativo alle app, rispettivamente:

• Su Windows: % Appdata% \ codice \ User \ settings.json
• su Linux: $ HOME / .config / codice / utente / settings.json
• su Mac: $ HOME / Libreria / Supporto applicazione / Codice / Utente / settings.json

Il lavoro-correlato settings.json il file è memorizzato nella cartella del tuo progetto attuale. Per impostazione predefinita, questo file non esiste, ma non appena si aggiunge un ambiente di lavoro personalizzato, VS Code crea un .vscode / settings.json file in una sola volta e inserisce al suo interno configurazioni personalizzate per lo spazio di lavoro.

Quindi quando usi il settings.json File?

Se si desidera che VS Code utilizzi le regole di configurazione personalizzate in tutti i tuoi progetti, li metti nel globale settings.json file.

Se vuoi che le tue impostazioni siano valide solo nel tuo progetto attuale, metterli nello spazio di lavoro settings.json file.

Le impostazioni dell'area di lavoro prevalgono sulle impostazioni globali, quindi sii attento.

Vengono chiamate le impostazioni globali “Impostazioni utente” in VS Code. Aprili cliccando sul File> Preferenze> Impostazioni utente menu, o iniziando a digitare l'espressione “Impostazioni utente” nella palette dei comandi (aprilo con F1).

Il codice VS apre due riquadri uno accanto all'altro: quello di sinistra contiene tutte le opzioni che è possibile configurare e quello di destra visualizza il globale settings.json file. Devi inserire le tue regole di configurazione personalizzate in questo file.

Come puoi vedere, non devi fare altro, basta copiare e incollare le impostazioni che vuoi modificare da sinistra a destra e aggiungere i valori modificati.

Diamo un'occhiata ad un breve esempio (ma puoi apportare altre modifiche in base alle tue esigenze individuali). Cambierò la famiglia di caratteri, ridurrò la lunghezza di a linguetta dai quattro spazi predefiniti a due, ridurre il numero massimo di file di lavoro da nove a cinque e modificare una delle regole di linting CSS relative agli stili duplicati da "ignorare" a "avvertimento".

Dopo il copia-incolla, il mio globale settings.json il file assomiglia a questo:

 // Posiziona le tue impostazioni in questo file per sovrascrivere le impostazioni predefinite "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "avvertimento" 

Dopo aver salvato la modifica settings.json file, l'aspetto del mio editor cambia in una volta (nella schermata sottostante è visibile solo la modifica della famiglia di font):

È possibile modificare le impostazioni dell'area di lavoro in modo simile. Ora è necessario fare clic sul File> Preferenze> Impostazioni dello spazio di lavoro nella barra dei menu in alto per accedere all'area di lavoro .vscode / settings.json file.

Le impostazioni dell'area di lavoro hanno esattamente le stesse opzioni di configurazione delle Impostazioni utente e puoi utilizzare la stessa tecnica di copia-incolla. Ci sono solo due differenze: l'ambito (locale invece che globale) e il settings.json file in cui verranno salvate le tue configurazioni personalizzate.