M

MLOG

Italiano

Sfrutta la potenza di VS Code imparando a creare estensioni personalizzate. Questa guida fornisce una panoramica completa, dall'installazione alla pubblicazione.

Padroneggiare lo Sviluppo di Estensioni VS Code: Una Guida Completa per Sviluppatori Globali

Visual Studio Code (VS Code) è diventato l'editor di codice di riferimento per milioni di sviluppatori in tutto il mondo. La sua popolarità deriva dalla sua natura leggera, dalle potenti funzionalità e, soprattutto, dalla sua estendibilità. La possibilità di creare estensioni personalizzate consente agli sviluppatori di adattare l'editor alle proprie esigenze specifiche, aumentando la produttività e semplificando i flussi di lavoro. Questa guida completa ti guiderà attraverso il processo di creazione delle tue estensioni VS Code, dall'impostazione iniziale alla pubblicazione della tua creazione affinché il mondo la utilizzi.

Perché sviluppare estensioni VS Code?

Lo sviluppo di estensioni VS Code offre numerosi vantaggi, sia per i singoli sviluppatori che per le organizzazioni:

Prerequisiti

Prima di immergerti nello sviluppo di estensioni, assicurati di aver installato quanto segue:

Configurazione del tuo ambiente di sviluppo

Con i prerequisiti in atto, sei pronto per configurare il tuo ambiente di sviluppo:

  1. Crea un nuovo progetto di estensione: apri il tuo terminale ed esegui il seguente comando per avviare il generatore di estensioni:
    2. yo code
  2. Rispondi ai prompt: il generatore porrà una serie di domande sulla tua estensione. Ecco una ripartizione dei prompt comuni e delle risposte consigliate:
    • Che tipo di estensione vuoi creare? Scegli "Nuova estensione (TypeScript)" per un'estensione basata su TypeScript, che è l'approccio consigliato.
    • Qual è il nome della tua estensione? Scegli un nome descrittivo e univoco per la tua estensione. Esempi: "Controllo ortografico del codice", "Snippet JavaScript", "Completamento automatico Python".
    • Qual è l'identificatore della tua estensione? Questo è un identificatore univoco per la tua estensione, in genere nel formato `publisher.extension-name`. Scegli un nome di editore (ad esempio, il tuo nome utente di GitHub o il nome dell'azienda).
    • Qual è la descrizione della tua estensione? Fornisci una descrizione concisa e informativa di cosa fa la tua estensione.
    • Inizializzare un repository git? Scegli "Sì" per inizializzare un repository Git per il controllo delle versioni.
    • Vuoi usare eslint per l'analisi del codice? Scegli "Sì" per applicare la coerenza dello stile del codice.
  3. Apri il progetto in VS Code: una volta completato il generatore, apri la cartella del progetto appena creata in VS Code.

Comprendere la struttura del progetto

Il generatore di estensioni crea una struttura di progetto di base con i seguenti file chiave:

Scrivere la tua prima estensione

Iniziamo creando una semplice estensione che visualizza un messaggio "Hello World" quando viene eseguito un comando:

  1. Apri `src/extension.ts`: questo file contiene la funzione `activate`, che viene chiamata quando la tua estensione viene attivata.
  2. Modifica la funzione `activate`: sostituisci il codice esistente con quanto segue:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulazioni, la tua estensione "my-extension" è ora attiva!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from My Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Spiegazione:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: registra un comando con l'ID `my-extension.helloWorld`. Questo comando sarà disponibile nella tavolozza dei comandi di VS Code.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: visualizza un messaggio informativo nella finestra di VS Code.
    • `context.subscriptions.push(disposable)`: aggiunge il comando alle sottoscrizioni dell'estensione, assicurando che venga eliminato correttamente quando l'estensione viene disattivata.
  4. Modifica `package.json`: aggiungi quanto segue alla sezione `contributes` per definire il comando:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Spiegazione:
    • `"commands"`: definisce i comandi a cui la tua estensione contribuisce.
    • `"command": "my-extension.helloWorld"`: specifica l'ID del comando che corrisponde all'ID utilizzato in `extension.ts`.
    • `"title": "Hello World"`: imposta il nome visualizzato per il comando nella tavolozza dei comandi.

Testare la tua estensione

Ora è il momento di testare la tua estensione:

  1. Premi F5: questo avvierà una nuova finestra di VS Code con la tua estensione installata. Questo è l'"Extension Development Host".
  2. Apri la tavolozza dei comandi: premi `Ctrl+Shift+P` (o `Cmd+Shift+P` su macOS) per aprire la tavolozza dei comandi.
  3. Digita "Hello World": dovresti vedere il tuo comando elencato nella tavolozza dei comandi.
  4. Seleziona "Hello World": fare clic sul comando lo eseguirà e visualizzerà il messaggio "Hello World" nella finestra di VS Code.

Debug della tua estensione

Il debug è fondamentale per identificare e risolvere i problemi nella tua estensione. VS Code offre un eccellente supporto di debug:

  1. Imposta i punti di interruzione: fai clic nel margine dell'editor accanto ai numeri di riga per impostare i punti di interruzione nel tuo codice.
  2. Premi F5: questo avvierà l'Extension Development Host in modalità di debug.
  3. Attiva la tua estensione: esegui il comando o l'azione che attiva il codice che desideri eseguire il debug.
  4. Ispeziona le variabili e lo stack di chiamate: il debugger di VS Code metterà in pausa l'esecuzione nei tuoi punti di interruzione, consentendoti di ispezionare le variabili, scorrere il codice ed esaminare lo stack di chiamate.

Lavorare con l'API di VS Code

L'API di VS Code fornisce un ricco set di interfacce e funzioni per interagire con l'editor. Ecco alcune aree chiave dell'API:

Esempio: creazione di un'estensione di snippet di codice

Creiamo un'estensione che aggiunge uno snippet di codice per la creazione di un componente React di base:

  1. Crea una cartella `snippets`: crea una nuova cartella denominata `snippets` nella directory principale del tuo progetto.
  2. Crea un file snippet: crea un file denominato `react.json` all'interno della cartella `snippets`.
  3. Aggiungi la definizione dello snippet: aggiungi il seguente JSON a `react.json`:
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Crea un componente React di base"
	}
}
  4. Spiegazione:
    • `"React Component"`: il nome dello snippet.
    • `"prefix": "reactcomp"`: il prefisso che attiva lo snippet. La digitazione di `reactcomp` e la pressione di `Tab` inseriranno lo snippet.
    • `"body"`: un array di stringhe che rappresentano le righe di codice nello snippet.
    • `${1:ComponentName}`: un punto di tabulazione che consente di modificare rapidamente il nome del componente.
    • `"description"`: una descrizione dello snippet.
  5. Modifica `package.json`: aggiungi quanto segue alla sezione `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Spiegazione:
    • `"snippets"`: definisce gli snippet a cui la tua estensione contribuisce.
    • `"language": "javascriptreact"`: specifica la lingua a cui si applica lo snippet.
    • `"path": "./snippets/react.json"`: specifica il percorso del file snippet.
  7. Testa il tuo snippet: apri un file `.jsx` o `.tsx` e digita `reactcomp`. Premi `Tab` per inserire lo snippet.

Tecniche avanzate di sviluppo di estensioni

Una volta che hai imparato le basi, puoi esplorare tecniche di sviluppo di estensioni più avanzate:

Internazionalizzazione e localizzazione (i18n e L10n)

Per raggiungere un pubblico globale, prendi in considerazione l'internazionalizzazione e la localizzazione della tua estensione. Ciò implica l'adattamento della tua estensione per supportare lingue e regioni diverse.

Pubblicazione della tua estensione

Una volta che la tua estensione è pronta, puoi pubblicarla su VS Code Marketplace affinché altri la utilizzino:

  1. Crea un'organizzazione Azure DevOps: avrai bisogno di un'organizzazione Azure DevOps per pubblicare la tua estensione. Se non ne hai uno, crea un account gratuito sul sito Web di Azure DevOps.
  2. Installa lo strumento `vsce`: VS Code Extension Manager (`vsce`) è uno strumento da riga di comando per l'impacchettamento e la pubblicazione delle estensioni. Installalo globalmente utilizzando npm:
    3. npm install -g vsce
  3. Crea un editore: un editore è un'identità che possiede le tue estensioni sul Marketplace. Crea un editore utilizzando il comando `vsce create-publisher`. Dovrai fornire un nome dell'editore e un token di accesso personale (PAT) da Azure DevOps.
  4. Genera un token di accesso personale (PAT): in Azure DevOps, vai a "Impostazioni utente" -> "Token di accesso personali" e crea un nuovo PAT con l'ambito "Marketplace (Pubblica)".
  5. Impacchetta la tua estensione: usa il comando `vsce package` per impacchettare la tua estensione in un file `.vsix`.
  6. Pubblica la tua estensione: usa il comando `vsce publish` per pubblicare la tua estensione su Marketplace. Dovrai fornire il nome del tuo editore e il tuo PAT.

Best practice per lo sviluppo di estensioni

Segui queste best practice per creare estensioni VS Code di alta qualità e manutenibili:

Risorse della community

Ecco alcune preziose risorse per saperne di più sullo sviluppo di estensioni VS Code:

Conclusione

Lo sviluppo di estensioni VS Code è un modo potente per personalizzare il tuo ambiente di codifica, aumentare la produttività e condividere le tue soluzioni con la comunità globale degli sviluppatori. Seguendo questa guida completa, puoi padroneggiare l'arte dello sviluppo di estensioni e creare strumenti innovativi che migliorano l'esperienza di VS Code per te e per gli altri. Ricorda di abbracciare la community, contribuire a progetti open source e imparare e esplorare continuamente il mondo in continua evoluzione dello sviluppo di estensioni VS Code. In bocca al lupo e buona codifica!