M

MLOG

Nederlands

Ontgrendel de kracht van VS Code door te leren hoe je aangepaste extensies bouwt. Deze gids biedt een complete walkthrough, van setup tot publicatie.

VS Code extensie ontwikkeling onder de knie krijgen: Een uitgebreide handleiding voor wereldwijde ontwikkelaars

Visual Studio Code (VS Code) is de favoriete code editor geworden voor miljoenen ontwikkelaars wereldwijd. Zijn populariteit komt voort uit zijn lichtgewicht karakter, krachtige functies en, vooral, zijn uitbreidbaarheid. De mogelijkheid om aangepaste extensies te maken stelt ontwikkelaars in staat om de editor aan te passen aan hun specifieke behoeften, waardoor de productiviteit wordt verhoogd en workflows worden gestroomlijnd. Deze uitgebreide handleiding loodst u door het proces van het maken van uw eigen VS Code extensies, van de eerste installatie tot het publiceren van uw creatie voor de wereld om te gebruiken.

Waarom VS Code extensies ontwikkelen?

Het ontwikkelen van VS Code extensies biedt tal van voordelen, zowel voor individuele ontwikkelaars als voor organisaties:

Vereisten

Zorg ervoor dat u het volgende hebt geïnstalleerd voordat u begint met het ontwikkelen van extensies:

Uw ontwikkelomgeving instellen

Met de vereisten op hun plaats, bent u klaar om uw ontwikkelomgeving in te stellen:

  1. Maak een nieuw extensieproject: Open uw terminal en voer de volgende opdracht uit om de extensie generator te starten:
    2. yo code
  2. Beantwoord de Prompts: De generator zal een reeks vragen stellen over uw extensie. Hier is een overzicht van veelvoorkomende prompts en aanbevolen antwoorden:
    • Welk type extensie wilt u maken? Kies "Nieuwe extensie (TypeScript)" voor een TypeScript-gebaseerde extensie, wat de aanbevolen aanpak is.
    • Wat is de naam van uw extensie? Kies een beschrijvende en unieke naam voor uw extensie. Voorbeelden: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete."
    • Wat is de identificatie van uw extensie? Dit is een unieke identificatie voor uw extensie, meestal in de vorm `publisher.extension-name`. Kies een uitgeversnaam (bijv. uw GitHub-gebruikersnaam of bedrijfsnaam).
    • Wat is de beschrijving van uw extensie? Geef een beknopte en informatieve beschrijving van wat uw extensie doet.
    • Een git repository initialiseren? Kies "Ja" om een Git repository te initialiseren voor versiebeheer.
    • Wilt u eslint gebruiken om de code te linten? Kies "Ja" om consistentie in de code stijl af te dwingen.
  3. Open het Project in VS Code: Zodra de generator is voltooid, opent u de nieuw gemaakte projectmap in VS Code.

De projectstructuur begrijpen

De extensie generator maakt een basisprojectstructuur met de volgende belangrijke bestanden:

Uw eerste extensie schrijven

Laten we beginnen met het maken van een eenvoudige extensie die een "Hello World" bericht weergeeft wanneer een opdracht wordt uitgevoerd:

  1. Open `src/extension.ts`: Dit bestand bevat de functie `activate`, die wordt aangeroepen wanneer uw extensie is geactiveerd.
  2. Wijzig de `activate` functie: Vervang de bestaande code door het volgende:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension \"my-extension\" is now active!');

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

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Uitleg:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registreert een opdracht met de ID `my-extension.helloWorld`. Deze opdracht is beschikbaar in het VS Code command palette.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Toont een informatiemelding in het VS Code venster.
    • `context.subscriptions.push(disposable)`: Voegt de opdracht toe aan de abonnementen van de extensie, zodat deze op de juiste manier wordt verwijderd wanneer de extensie wordt gedeactiveerd.
  4. Wijzig `package.json`: Voeg het volgende toe aan de sectie `contributes` om de opdracht te definiëren:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Uitleg:
    • `"commands"`: Definieert de opdrachten die uw extensie bijdraagt.
    • `"command": "my-extension.helloWorld"`: Specificeert de opdracht ID die overeenkomt met de ID die wordt gebruikt in `extension.ts`.
    • `"title": "Hello World"`: Stelt de weergavenaam in voor de opdracht in het command palette.

Uw extensie testen

Nu is het tijd om uw extensie te testen:

  1. Druk op F5: Dit start een nieuw VS Code venster met uw extensie geïnstalleerd. Dit is de "Extension Development Host".
  2. Open het Command Palette: Druk op `Ctrl+Shift+P` (of `Cmd+Shift+P` op macOS) om het command palette te openen.
  3. Typ "Hello World": U zou uw opdracht in het command palette moeten zien.
  4. Selecteer "Hello World": Als u op de opdracht klikt, wordt deze uitgevoerd en wordt het bericht "Hello World" weergegeven in het VS Code venster.

Uw extensie debuggen

Debuggen is cruciaal voor het identificeren en oplossen van problemen in uw extensie. VS Code biedt uitstekende debugging ondersteuning:

  1. Breekpunten instellen: Klik in de editorgoot naast de regelnummers om breekpunten in uw code in te stellen.
  2. Druk op F5: Dit start de Extension Development Host in de debug modus.
  3. Activeer uw extensie: Voer de opdracht of actie uit die de code activeert die u wilt debuggen.
  4. Variabelen en aanroepstack inspecteren: De VS Code debugger pauzeert de uitvoering bij uw breekpunten, zodat u variabelen kunt inspecteren, stapsgewijs door de code kunt lopen en de aanroepstack kunt onderzoeken.

Werken met de VS Code API

De VS Code API biedt een uitgebreide set interfaces en functies voor interactie met de editor. Hier zijn enkele belangrijke gebieden van de API:

Voorbeeld: Een code snippet extensie maken

Laten we een extensie maken die een code snippet toevoegt voor het maken van een basis React component:

  1. Maak een `snippets` map: Maak een nieuwe map met de naam `snippets` in de root van uw project.
  2. Maak een snippet bestand: Maak een bestand met de naam `react.json` in de map `snippets`.
  3. Voeg de snippet definitie toe: Voeg de volgende JSON toe aan `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": "Creates a basic React component"
	}
}
  4. Uitleg:
    • `"React Component"`: De naam van de snippet.
    • `"prefix": "reactcomp"`: Het prefix dat de snippet activeert. Als u `reactcomp` typt en op `Tab` drukt, wordt de snippet ingevoegd.
    • `"body"`: Een array van strings die de coderegels in de snippet voorstellen.
    • `${1:ComponentName}`: Een tab stop waarmee u snel de componentnaam kunt wijzigen.
    • `"description"`: Een beschrijving van de snippet.
  5. Wijzig `package.json`: Voeg het volgende toe aan de sectie `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Uitleg:
    • `"snippets"`: Definieert de snippets die uw extensie bijdraagt.
    • `"language": "javascriptreact"`: Specificeert de taal waarop de snippet van toepassing is.
    • `"path": "./snippets/react.json"`: Specificeert het pad naar het snippet bestand.
  7. Test uw snippet: Open een `.jsx` of `.tsx` bestand en typ `reactcomp`. Druk op `Tab` om de snippet in te voegen.

Geavanceerde technieken voor extensie ontwikkeling

Zodra u de basisprincipes onder de knie hebt, kunt u meer geavanceerde technieken voor extensie ontwikkeling verkennen:

Internationalisatie en Lokalisatie (i18n en L10n)

Om een wereldwijd publiek te bereiken, kunt u overwegen uw extensie te internationaliseren en te lokaliseren. Dit omvat het aanpassen van uw extensie om verschillende talen en regio's te ondersteunen.

Uw extensie publiceren

Zodra uw extensie klaar is, kunt u deze publiceren naar de VS Code Marketplace zodat anderen deze kunnen gebruiken:

  1. Maak een Azure DevOps Organisatie: U hebt een Azure DevOps organisatie nodig om uw extensie te publiceren. Als u er geen heeft, maak dan een gratis account op de Azure DevOps website.
  2. Installeer de `vsce` tool: De VS Code Extension Manager (`vsce`) is een command-line tool voor het verpakken en publiceren van extensies. Installeer het globaal met behulp van npm:
    3. npm install -g vsce
  3. Maak een Uitgever: Een uitgever is een identiteit die eigenaar is van uw extensies op de Marketplace. Maak een uitgever met behulp van de opdracht `vsce create-publisher`. U moet een uitgeversnaam en een personal access token (PAT) van Azure DevOps opgeven.
  4. Genereer een Personal Access Token (PAT): Ga in Azure DevOps naar "User Settings" -> "Personal Access Tokens" en maak een nieuwe PAT met het bereik "Marketplace (Publish)".
  5. Verpak uw extensie: Gebruik de opdracht `vsce package` om uw extensie te verpakken in een `.vsix` bestand.
  6. Publiceer uw extensie: Gebruik de opdracht `vsce publish` om uw extensie naar de Marketplace te publiceren. U moet uw uitgeversnaam en uw PAT opgeven.

Best practices voor extensie ontwikkeling

Volg deze best practices om hoogwaardige en onderhoudbare VS Code extensies te maken:

Community bronnen

Hier zijn enkele waardevolle bronnen om meer te leren over VS Code extensie ontwikkeling:

Conclusie

Het ontwikkelen van VS Code extensies is een krachtige manier om uw codeeromgeving aan te passen, de productiviteit te verhogen en uw oplossingen te delen met de wereldwijde ontwikkelaarscommunity. Door deze uitgebreide handleiding te volgen, kunt u de kunst van het ontwikkelen van extensies onder de knie krijgen en innovatieve tools maken die de VS Code ervaring voor uzelf en anderen verbeteren. Vergeet niet om de community te omarmen, bij te dragen aan open-source projecten en continu te leren en de steeds evoluerende wereld van VS Code extensie ontwikkeling te verkennen. Veel succes en happy coding!