Masterizza gli snippet di VS Code per una codifica efficiente

Quando scrivi l’ultimo pezzo di codice in Visual Studio Code (VS Code), ti capita mai di trovarti a digitare la stessa cosa più e più volte? Forse hai digitato una dichiarazione di funzione dieci volte oggi o hai definito lo stesso set di parametri su comando per la 20ª volta. Sapevi che puoi recuperare il tuo tempo e la tua sanità mentale utilizzando i snippet di Visual Studio Code?

Gli snippet di Visual Studio Code sono piccoli pezzi di testo memorizzati in VS Code. Puoi richiamare questi snippet tramite un menu o una sequenza di tasti e possono risparmiare un sacco di tempo quando ti ritrovi a ripetere blocchi di testo con poche differenze tra ogni occorrenza.

Ad esempio, di seguito puoi vedere che semplicemente digitando wvb in VS Code, hai l’opzione di espandere molto più testo, come indicato dal testo Write-Verbose nel riquadro. Questa è la potenza degli snippet!

In questo articolo, imparerai come lavorare con gli snippet di VS Code, incluso l’uso di snippet predefiniti, estensioni di snippet e persino la creazione dei tuoi!

Prerequisiti

Questo sarà un articolo passo-passo per mettere le mani in pasta. Se prevedi di seguire imparando come lavorare con gli snippet di VS Code, avrai bisogno della versione 1.17 o superiore di VS Code. Per completezza di informazione, userò VS Code 1.38.1 su Windows.

Puoi scaricare l’ultima versione di VS Code per la tua piattaforma specifica qui.

Trovare gli Snippet di VS Code

Prima di poter iniziare a creare i tuoi frammenti (cosa che farai), è importante imparare come trovare i frammenti incorporati disponibili per te.

Puoi trovare tutti i frammenti nell’interfaccia del menu. L’interfaccia del menu ti permette di visualizzare e utilizzare i frammenti. Per accedere al menu, puoi premere F1 o Ctrl-Shift-P, digitare “frammento” e premere Invio. Vedrai comparire un menu simile a quello mostrato di seguito.

Quando premi Invio su Inserisci frammento, vedrai un menu a tendina con i frammenti disponibili, come mostrato di seguito. Puoi vedere che ci sono diversi frammenti disponibili per impostazione predefinita e ne puoi vedere altri scorrendo verso il basso.

Il menu a tendina dei frammenti disponibili ti permette di visualizzare i frammenti incorporati disponibili attraverso l’aggiunta di un’estensione del linguaggio in VS Code.

Estensioni del linguaggio

Puoi utilizzare VS Code per lavorare con molti linguaggi differenti. Ogni linguaggio ha le sue sfumature. Per supportare queste differenze, VS Code supporta le estensioni del linguaggio.

Le estensioni del linguaggio forniscono a VS Code funzionalità di editing intelligenti per diversi linguaggi di programmazione. Le estensioni del linguaggio forniscono al linguaggio di programmazione un supporto aggiuntivo come:

• Evidenziazione della sintassi
• IntelliSense
• Formattazione
• Controllo degli errori
• Completamento dei frammenti

Le estensioni si installano attraverso il menu delle estensioni di VS Code.

Puoi rivedere la definizione di questi frammenti fornita dalle estensioni del linguaggio aprendo il file JSON su Windows situato in C:\Users<NomeUtente>.vscode\extensions\ms-code.-\snippets.

Le estensioni, di per sé, non hanno nulla a che fare con i frammenti, ma troverai che molte estensioni sono fornite di frammenti incorporati di cui dovresti essere consapevole.

Espansione dei frammenti

Quando selezioni un frammento tramite l’interfaccia del menu, vedrai il contenuto del frammento nel file. Questo processo di conversione delle definizioni dei frammenti in codice utile viene chiamato espansione.

Quando chiami il prefisso, VS Code legge quel prefisso specifico ed esegue le istruzioni che hai definito nel frammento. Queste istruzioni possono variare da un frammento all’altro. Questo intero processo di chiamata, conversione e inserimento del frammento viene chiamato espansione.

Utilizzo dei frammenti delle estensioni di VS Code

Alcuni frammenti sono inclusi di default in VS Code, ma quando installi un’estensione, a volte vengono forniti anche frammenti specifici dell’estensione stessa. Esempi di estensioni con frammenti inclusi sono l’estensione Python di Microsoft, l’estensione PowerShell di Microsoft e l’estensione C# di Microsoft.

Dove sono memorizzati i frammenti delle estensioni.

Queste estensioni sono normalmente installate in Windows nella directory C:\Users<NomeUtente>.vscode\extensions del tuo computer, come puoi vedere di seguito.

Le cartelle per le estensioni seguono la convenzione di denominazione ms-vscode.-. Ognuna di queste cartelle contiene una cartella snippet che contiene gli snippet inclusi con l’estensione.

Esempio di snippet di codice di estensione

Per dimostrare come utilizzare uno snippet di estensione, prendiamo ad esempio l’estensione di PowerShell. Questa estensione viene fornita con alcuni snippet utili chiamati region e for per accelerare la creazione di blocchi region di PowerShell e cicli *for*.

Supponiamo che tu abbia bisogno di creare un ciclo for in uno script di PowerShell racchiuso in un blocco di regione. Il codice per farlo è mostrato di seguito. Il codice nella schermata qui sotto è lungo 50 caratteri e crea un ciclo for all’interno di un blocco di regione che itera sui numeri da 1 a 10.

Invece di digitare ogni singolo carattere in questo esempio, puoi utilizzare due snippet installati con l’estensione di PowerShell di Microsoft chiamati region e for.

Dai un’occhiata di seguito per vedere quanto è semplice utilizzare ciascuno di questi snippet per risparmiare un sacco di battitura!

Creazione di snippet personalizzati in Visual Studio Code

Non è necessario limitarsi agli snippet forniti con VS Code o con le estensioni. Forse le estensioni esistenti non contengono il layout di codice di cui hai bisogno o vuoi formattare questi snippet tu stesso. Fortunatamente, puoi creare i tuoi snippet! In questa sezione, vedrai come farlo.

Per creare uno snippet personalizzato, apri i tuoi snippet utente in VS Code facendo clic su File → Preferenze → Snippet utente. Questo aprirà per te la selezione del linguaggio degli snippet. Qui puoi specificare un linguaggio in cui desideri creare lo snippet. Puoi vedere un esempio di come appare questo nella schermata sottostante.

Scegliendo un linguaggio, VS Code creerà un file language.json in C:\Users<UserName>\AppData\Roaming\Code\User\snippets su Windows. Tutti gli snippet utente creati per diversi linguaggi avranno un file in questa directory.

I linguaggi disponibili potrebbero essere diversi da quelli mostrati sopra. Nell’installazione di VS Code sopra, molte estensioni di linguaggio sono già state installate.

Trova il linguaggio per il quale desideri creare lo snippet e premi Invio per aprire il file JSON del linguaggio. In questo file verranno memorizzati i tuoi snippet personalizzati, ed è qui che puoi crearli.

Esistono quattro elementi dati da specificare per uno snippet personalizzato:

1. A snippet name (line 9 below)
2. A prefix, which is what you’ll use to call your snippet (line 8 below)
3. A body, which is your snippet code that is loaded into your scripts (lines 7 to 3 below)
4. A description, which will show up in your IntelliSense (line 2 below)

Creazione di uno snippet Python personalizzato

Vediamo cosa serve per creare un frammento personalizzato per il linguaggio di programmazione Python. In questo esempio, il prefisso dt invoca un frammento personalizzato di Python. Questo frammento stamperà un messaggio con l’ora corrente precompilata.

Crea il file JSON

Prima apri il selettore del linguaggio del frammento, digita Python e premi Invio per creare un file python.json. Questo mostrerà un file python.json nella cartella C:\Users<UserName>\AppData\Roaming\Code\User\snippets di Windows.

Puoi vedere il suo stato predefinito nell’immagine qui sotto.

Assegnazione di un nome e di un prefisso

Ora è il momento di iniziare a modificare il file JSON. Prima di tutto, definisci il nome e il prefisso (dt). I prefissi dei frammenti sono brevi e chiari, in quanto rappresentano il valore digitato per richiamare il frammento. Più breve è il prefisso del frammento, meno caratteri dovrai digitare quando vorrai richiamarlo.

Puoi vedere un esempio di come appare ciò di seguito.

Definizione del corpo

Il corpo contiene il codice che verrà espanso quando il frammento viene chiamato. Questo codice può essere un semplice testo e commenti. Può anche avere altre funzioni che vedrai nelle sezioni successive. Se il corpo ha molte righe, ci sono alcune cose da tenere d’occhio.

• Ogni riga deve essere tra doppi apici
• Ogni riga deve terminare con una virgola
• Tutte le righe devono essere tra parentesi quadre (“[” e “]”)

Puoi vedere un esempio di come appare il corpo del frammento di esempio di seguito.

Definizione della descrizione

La descrizione è un messaggio che descrive il prefisso come mostrato di seguito, definito sotto il corpo.

La descrizione verrà mostrata sotto il prefisso nell’elenco degli snippet e fornisce ulteriori informazioni su ciò che lo snippet fa. Aiuta anche a differenziare lo snippet da quelli simili creati.

Sotto è riportata un’esempio di screenshot degli snippet che identificano i prefissi e le descrizioni.

Se non hai già definito snippet personalizzati di Python, quando hai finito di creare lo snippet dovresti avere un file python.json che assomiglia allo snippet di codice seguente.

{
    "DateTime Snippet": {
        "prefix": "dt",
        "body": [
            "import datetime",
            "dt = datetime.datetime.now()",
            "print(f\"The time is {dt} and this is a message\")"
        ],
        "description": "Prints a message with current time"
    }
}

Salva questo file JSON e ora lo snippet personalizzato è disponibile in qualsiasi file Python in VS Code.

Ora, quando apri una scheda di Python e digiti il prefisso dt, lo snippet personalizzato compare sotto. Premendo Invio lo snippet viene espanso nel corpo della scheda di Python.

Come Creare uno Snippet Personalizzato di JavaScript Utilizzando il Testo Incluso

Gli snippet non sono isolati dalle parole che si definiscono nel corpo dello snippet. Gli snippet possono anche includere testo dal file da cui li chiami.

VS Code ha variabili interne che puoi usare. Questi sono segnaposti che prendono il testo attualmente selezionato e lo inseriscono nello snippet. Ad esempio, inserendo la variabile $TM_SELECTED_TEXT nello snippet, puoi mostrare il testo selezionato. Dai un’occhiata alla pagina di riferimento delle variabili di VS Code per una panoramica completa di tutte le variabili interne di VS Code.

Per dimostrare, creiamo uno snippet che semplicemente crea una riga per visualizzare il testo selezionato sulla console chiamato log-it.

Apri il selettore del linguaggio dello snippet, digita JavaScript e premi Invio per creare un file javascript.json. Questo file sarà simile al file python.json creato nella sezione precedente. Questa volta, però, conterrà del codice JavaScript di esempio anziché codice Python. Puoi vedere il suo stato predefinito nello screenshot sottostante.

Ora crea uno snippet utilizzando il seguente JSON:

{
	"Print selected line to console": {
		"prefix": "log-it",
		"body": [
			"console.log('$TM_SELECTED_TEXT');"
		],
		"description": "Log highlighted text output to console"
	}
}

Salva il file JSON e potrai utilizzare questo snippet nei tuoi file JavaScript.

Quando chiami questo snippet con un testo evidenziato, sostituirà $TM_SELECTED_TEXT con il testo che hai evidenziato. Quando chiami questo snippet senza testo evidenziato, $TM_SELECTED_TEXT sarà vuoto. Puoi vedere questo in azione nello screenshot sottostante.

Creazione di uno snippet personalizzato di PowerShell con punti di tabulazione

Fino ad ora, gli esempi che hai visto sono stati completi quando chiamati. Anche lo snippet JavaScript assume che tu abbia evidenziato del testo in precedenza. Ma cosa succede nei casi in cui devi digitare dei valori nello snippet dopo che è stato chiamato?

Cosa succede se vuoi digitare il valore all’interno di console.log() anziché utilizzare il testo evidenziato? E se vuoi digitare in vari punti dello snippet?

In questa sezione, imparerai come utilizzare tabulazioni per consentirti di digitare del testo nel codice prodotto a cui si espande lo snippet. Le tabulazioni sono posizioni predefinite nel tuo snippet in cui il cursore si posizionerà. Questi punti vengono visitati in ordine ogni volta che premi tabulazione. Con queste tabulazioni, puoi digitare valori nello snippet dopo che è stato espanso.

Le tabulazioni, definite utilizzando le variabili dello snippet $0, $1, $2 e così via nel corpo dello snippet, indicano allo snippet dove si posizionerà il cursore successivamente quando chiami lo snippet e premi tabulazione.

Le tabulazioni seguono un ordine normale (1 segue 2 segue 3, ecc.) con un’eccezione: la tabulazione 0 è il punto in cui il cursore si troverà dopo tutte le altre tabulazioni. Per dimostrarlo, lo snippet qui sotto si espande in un messaggio Write-Output con la data corrente e uno spazio per altro testo.

Questo corpo con due tabulazioni

• $1 alla fine del messaggio Write-Output
• $0 nella riga successiva in modo che lo snippet termini su una riga vuota

{
    "DateTime Snippet PS": {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message "The time is $((Get-Date).ToLocalTime()) and $1"","$0"
        ]
        "description": "PSCustomObject with 3 lines"
    }
}

Salva questo snippet e chiamalo digitando il prefisso dtPS in un file PowerShell.

Quando lo snippet si espande, il cursore si sposta alla posizione della tabulazione 1. Da qui, aggiungi il valore o il codice desiderato e premi tabulazione per spostare il cursore alla prossima tabulazione. Questo continuerà fino a quando avrai attraversato tutte le tabulazioni specificate.

Puoi vedere questo in azione nella schermata sottostante.

Aggiunta di valori predefiniti ai punti di tabulazione

Mentre i punti di tabulazione sono ottimi per iniziare, cosa succede se hai bisogno di valori specifici di solito in quei punti ma desideri la possibilità di cambiarli, se necessario? Ora è il momento di includere i valori predefiniti.

L’esempio sopra aveva un punto di tabulazione, ma quando lo snippet si espandeva, non c’era testo al suo posto. Il cursore saltava alla posizione del punto di tabulazione e poi l’utente doveva intervenire.

Se solo ci fosse un modo per avere un valore lì dove si trova il punto di tabulazione, in modo che lo snippet possa espandersi e quel valore si espanda con esso. Quando il punto di tabulazione arriva a quella posizione, il valore predefinito potrebbe essere sovrascritto o si potrebbe passare oltre con il tabulatore.

Andiamo a vedere come aggiungere valori predefiniti agli snippet personalizzati. Lo farai modificando il file JSON di snippet PowerShell sopra.

Per iniziare, apri il selettore di lingua per lo snippet, scegli PowerShell e cambia i punti di tabulazione da $1 a ${1:questo è il mio messaggio predefinito}. Il valore dopo i due punti diventa il valore predefinito. Questo valore viene espanso con lo snippet.

Quando si raggiunge quel punto di tabulazione, possono accadere due cose. Il valore predefinito può essere sovrascritto o può essere passato con il tabulatore mantenendo il suo valore predefinito.

Di seguito puoi vedere il cambiamento nel corpo dello snippet.

{
	"DateTime Snippet PS" {
		"prefix": "dtPS",
		"body" : [
			"Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and $1{1:this is my default message}\"",
			"$0"
		],
		"description": "PSCustomObject with 3 lines"
	}
}

Dopo l’aggiornamento e il salvataggio, questi valori predefiniti vengono espansi e vengono visualizzati anche nella finestra IntelliSense quando vengono richiamati, come mostrato nella schermata sottostante.

I messaggi predefiniti sono buoni esempi di ciò che puoi fare con i tabulati. I tabulati ti offrono anche l’opzione di scelta. Nella sezione successiva, vedrai un esempio di come aggiungere scelte ai tuoi tabulati.

Aggiunta di scelte ai tabulati

I tabulati non sono limitati a avere un valore predefinito o nessun valore. Possono essere definiti nella definizione dello snippet di VS Code per offrire all’utente opzioni quando lo snippet si espande.

Forse hai una situazione in cui desideri scegliere un valore o un comando diverso in uno snippet. Invece di creare tre snippet diversi con scelte diverse, puoi modificare lo snippet per presentare una scelta con un tabulato, come mostrato nella schermata sottostante.

I tabulati presenteranno una scelta quando viene utilizzata la seguente sintassi nel corpo dello snippet:

${N|Choice1,Choice2,Choice3[,Choice]|}

Il tabulato mostrato sopra è stato modificato per offrire la scelta di:

• Write-Output
• Write-Warning
• Write-Error

Ciò è stato fatto inserendo due caratteri di pipe ( | ) dopo il tabulato. Le scelte vengono inserite all’interno dei caratteri di pipe, separati da virgole. Puoi vedere questo nel blocco di codice sottostante.

${1|
    Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Scelta 1 
    Write-Warning -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Scelta 2
    Write-Error -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\" // <-- Scelta 3
|}

Di seguito puoi vedere lo snippet di esempio.

{
    "DateTime Snippet PS" {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", Write-Warning -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\", Write-Error -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\"|}",
            "$0"
        ],
        "description": "PSCustomObject with 3 lines"
    }
}

Quando lo snippet personalizzato si espande ora, la scelta di quale opzione scegliere apparirà in una finestra di IntelliSense, come mostrato nella schermata sottostante.

Da qui, puoi selezionare la scelta che desideri e osservare come si espande in quella scelta. Nell’esempio di screenshot qui sotto, l’intera riga di codice viene sostituita con l’opzione di scegliere tra tre diversi comandi di scrittura, e viene mostrato che ognuno può essere chiamato ed eseguito senza problemi.

Riepilogo

Le snippet personalizzate possono essere testo o codice semplice. Possono avere punti di interruzione in modo da poter includere messaggi, valori predefiniti o scelte, così come testo evidenziato.

Non è necessario un compito arduo di digitare ogni singolo carattere di ogni singolo blocco di codice. Con gli snippet, non devi ricordare la sintassi esatta per un ciclo for, un ciclo foreach, o una dichiarazione switch ogni volta. Gli snippet sono perfetti per questa nicchia.

I’ve shown Python, JavaScript, and PowerShell snippets in this post. VS Code snippets are available for many, many more languages. Your limits are only what you use and what you can think of!

Ulteriori letture

• Introduzione alle funzioni di PowerShell