Strumento di conversione da codice online a snippet, supporto JavaScript / TypeScript / React / JSX / TSX      

Inserisci un nome di frammento (name)
Inserisci un prefisso di frammento (prefix)
Inserisci una descrizione snippet (description)
Inserisci il testo del codice (code body)
Tipo di generazione
Risultato del frammento generato

VSCode Come utilizzare i frammenti di codice


Snippets in Visual Studio Code
Gli snippet di VS Code sono un modo potente per aumentare la produttività della codifica automatizzando l'inserimento di blocchi di codice comunemente utilizzati. Possono essere semplici espansioni di testo o modelli più complessi con segnaposto e variabili. Ecco come sfruttarli:

Creazione di snippet:

Accedi alle impostazioni degli snippet: vai su File > Preferenze > Snippet utente (Codice > Preferenze > Snippet utente su macOS). In alternativa, usa la palette dei comandi (Ctrl+Maiusc+P o Cmd+Maiusc+P) e digita "Preferenze: Configura snippet utente".

Scegli una lingua: ti verrà chiesto di selezionare una lingua per lo snippet (ad esempio, javascript.json, python.json, ecc.). Ciò garantisce che lo snippet sia disponibile solo per quella lingua specifica. Puoi anche creare un file "Snippet globali" se desideri che lo snippet sia accessibile in tutte le lingue.

Definisci lo snippet: gli snippet sono definiti in formato JSON. Ogni snippet ha un nome, un prefisso (la scorciatoia che digiterai per attivare lo snippet), un corpo (il codice da inserire) e una descrizione facoltativa.

Esempio (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
In questo esempio:

"For Loop": il nome dello snippet (per riferimento).
"forl": il prefisso. Digitando "forl" e premendo Tab verrà inserito lo snippet.
"body": il codice da inserire. $1, $2, ecc. sono tabstop (segnaposto). $0 è la posizione finale del cursore.
"description": una descrizione facoltativa mostrata nei suggerimenti di IntelliSense.
Utilizzo di snippet:

Digita il prefisso: in un file del tipo di linguaggio corretto, inizia a digitare il prefisso che hai definito (ad esempio, forl).

Seleziona lo snippet: IntelliSense di VS Code suggerirà lo snippet. Selezionalo con i tasti freccia o cliccando.

Utilizza Tabstop: premi Tab per navigare tra i tabstop ($1, $2, ecc.) e inserisci i valori.

Variabili:

Gli snippet possono anche utilizzare variabili come $TM_FILENAME, $CURRENT_YEAR, ecc. Per un elenco completo, consulta la documentazione di VS Code.

Esempio con variabili (Python):
{
  "New Python File": {
    "prefix": "newpy",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "",
      "# ${TM_FILENAME}",
      "# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ]
  }
}
Padroneggiando gli snippet, puoi ridurre significativamente la digitazione ripetitiva e garantire la coerenza nel tuo codice. Sperimenta la creazione dei tuoi snippet per i pattern di codice comunemente usati e guarda la tua efficienza di codifica salire alle stelle.