M

MLOG

Dansk

Lås op for kraften i VS Code ved at lære at bygge brugerdefinerede extensions. Denne guide giver en komplet gennemgang, fra opsætning til udgivelse.

Mestring af VS Code Extension Udvikling: En Omfattende Guide til Globale Udviklere

Visual Studio Code (VS Code) er blevet den foretrukne kodeeditor for millioner af udviklere verden over. Dens popularitet stammer fra dens lette natur, kraftfulde funktioner og, vigtigst af alt, dens udvidelsesmuligheder. Evnen til at skabe brugerdefinerede extensions giver udviklere mulighed for at skræddersy editoren til deres specifikke behov, hvilket øger produktiviteten og strømliner workflows. Denne omfattende guide vil føre dig gennem processen med at oprette dine egne VS Code extensions, fra den indledende opsætning til udgivelse af din kreation, så verden kan bruge den.

Hvorfor Udvikle VS Code Extensions?

Udvikling af VS Code extensions tilbyder adskillige fordele, både for individuelle udviklere og organisationer:

Forudsætninger

Før du dykker ned i extension-udvikling, skal du sikre dig, at du har følgende installeret:

Opsætning af Dit Udviklingsmiljø

Med forudsætningerne på plads er du klar til at opsætte dit udviklingsmiljø:

  1. Opret et Nyt Extension-Projekt: Åbn din terminal, og kør følgende kommando for at starte extension-generatoren:
    2. yo code
  2. Besvar Spørgsmålene: Generatoren vil stille en række spørgsmål om din extension. Her er en oversigt over almindelige spørgsmål og anbefalede svar:
    • Hvilken type extension vil du oprette? Vælg "New Extension (TypeScript)" for en TypeScript-baseret extension, hvilket er den anbefalede tilgang.
    • Hvad er navnet på din extension? Vælg et beskrivende og unikt navn til din extension. Eksempler: "Code Spell Checker," "JavaScript Snippets," "Python Autocomplete."
    • Hvad er identifikatoren for din extension? Dette er en unik identifikator for din extension, typisk i formatet `publisher.extension-name`. Vælg et udgivernavn (f.eks. dit GitHub-brugernavn eller firmanavn).
    • Hvad er beskrivelsen af din extension? Angiv en kort og informativ beskrivelse af, hvad din extension gør.
    • Initialiser et git-repository? Vælg "Ja" for at initialisere et Git-repository til versionskontrol.
    • Vil du bruge eslint til at lints koden? Vælg "Ja" for at håndhæve kode stilkonsistens.
  3. Åbn Projektet i VS Code: Når generatoren er færdig, skal du åbne den nyoprettede projektmappe i VS Code.

Forstå Projektstrukturen

Extension-generatoren opretter en grundlæggende projektstruktur med følgende nøglefiler:

Skrivning af Din Første Extension

Lad os starte med at oprette en simpel extension, der viser en "Hello World"-meddelelse, når en kommando udføres:

  1. Åbn `src/extension.ts`: Denne fil indeholder funktionen `activate`, som kaldes, når din extension aktiveres.
  2. Modificer `activate`-funktionen: Erstat den eksisterende kode med følgende:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Tillykke, din extension "my-extension" er nu aktiv!');

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

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Forklaring:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registrerer en kommando med id'et `my-extension.helloWorld`. Denne kommando vil være tilgængelig i VS Code-kommandopaletten.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Viser en informationsmeddelelse i VS Code-vinduet.
    • `context.subscriptions.push(disposable)`: Tilføjer kommandoen til extensionens abonnementer, hvilket sikrer, at den bortskaffes korrekt, når extensionen deaktiveres.
  4. Modificer `package.json`: Tilføj følgende til afsnittet `contributes` for at definere kommandoen:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Forklaring:
    • `"commands"`: Definerer de kommandoer, som din extension bidrager med.
    • `"command": "my-extension.helloWorld"`: Angiver kommando-id'et, der matcher det id, der bruges i `extension.ts`.
    • `"title": "Hello World"`: Indstiller visningsnavnet for kommandoen i kommandopaletten.

Test af Din Extension

Nu er det tid til at teste din extension:

  1. Tryk på F5: Dette vil starte et nyt VS Code-vindue med din extension installeret. Dette er "Extension Development Host".
  2. Åbn Kommandopaletten: Tryk på `Ctrl+Shift+P` (eller `Cmd+Shift+P` på macOS) for at åbne kommandopaletten.
  3. Skriv "Hello World": Du bør se din kommando angivet i kommandopaletten.
  4. Vælg "Hello World": Klik på kommandoen vil udføre den og vise "Hello World"-meddelelsen i VS Code-vinduet.

Debugging af Din Extension

Debugging er afgørende for at identificere og løse problemer i din extension. VS Code tilbyder fremragende debugging-understøttelse:

  1. Indstil Breakpoints: Klik i editor-gutteren ved siden af linjenumrene for at indstille breakpoints i din kode.
  2. Tryk på F5: Dette starter Extension Development Host i debug-tilstand.
  3. Udløs Din Extension: Udfør kommandoen eller handlingen, der udløser den kode, du vil debugge.
  4. Inspicér Variabler og Call Stack: VS Code-debuggeren vil sætte udførelsen på pause ved dine breakpoints, så du kan inspicere variabler, gå gennem koden trin for trin og undersøge call stack.

Arbejde med VS Code API'et

VS Code API'et giver et rigt sæt af grænseflader og funktioner til at interagere med editoren. Her er nogle centrale områder af API'et:

Eksempel: Oprettelse af en Kode Snippet Extension

Lad os oprette en extension, der tilføjer et kode snippet til oprettelse af en grundlæggende React-komponent:

  1. Opret en `snippets`-mappe: Opret en ny mappe med navnet `snippets` i roden af dit projekt.
  2. Opret en Snippet-fil: Opret en fil med navnet `react.json` inde i mappen `snippets`.
  3. Tilføj Snippet-definitionen: Tilføj følgende JSON til `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. Forklaring:
    • `"React Component"`: Navnet på snippet'et.
    • `"prefix": "reactcomp"`: Præfikset, der udløser snippet'et. Hvis du skriver `reactcomp` og trykker på `Tab`, indsættes snippet'et.
    • `"body"`: Et array af strenge, der repræsenterer kodelinjerne i snippet'et.
    • `${1:ComponentName}`: Et tabstop, der giver dig mulighed for hurtigt at ændre komponentnavnet.
    • `"description"`: En beskrivelse af snippet'et.
  5. Modificer `package.json`: Tilføj følgende til afsnittet `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Forklaring:
    • `"snippets"`: Definerer de snippets, som din extension bidrager med.
    • `"language": "javascriptreact"`: Angiver det sprog, som snippet'et er relevant for.
    • `"path": "./snippets/react.json"`: Angiver stien til snippet-filen.
  7. Test Din Snippet: Åbn en `.jsx`- eller `.tsx`-fil, og skriv `reactcomp`. Tryk på `Tab` for at indsætte snippet'et.

Avancerede Extension Udviklingsteknikker

Når du har mestret det grundlæggende, kan du udforske mere avancerede extension-udviklingsteknikker:

Internationalisering og Lokalisering (i18n og L10n)

For at nå et globalt publikum skal du overveje at internationalisere og lokalisere din extension. Dette involverer at tilpasse din extension til at understøtte forskellige sprog og regioner.

Udgivelse af Din Extension

Når din extension er klar, kan du udgive den til VS Code Marketplace, så andre kan bruge den:

  1. Opret en Azure DevOps-organisation: Du skal bruge en Azure DevOps-organisation for at udgive din extension. Hvis du ikke har en, skal du oprette en gratis konto på Azure DevOps-webstedet.
  2. Installer `vsce`-værktøjet: VS Code Extension Manager (`vsce`) er et kommandolinjeværktøj til pakning og udgivelse af extensions. Installer det globalt ved hjælp af npm:
    3. npm install -g vsce
  3. Opret en Udgiver: En udgiver er en identitet, der ejer dine extensions på Marketplace. Opret en udgiver ved hjælp af kommandoen `vsce create-publisher`. Du skal angive et udgivernavn og en personlig adgangstoken (PAT) fra Azure DevOps.
  4. Generér en Personal Access Token (PAT): I Azure DevOps skal du gå til "User Settings" -> "Personal Access Tokens" og oprette en ny PAT med omfanget "Marketplace (Publish)".
  5. Pak Din Extension: Brug kommandoen `vsce package` til at pakke din extension i en `.vsix`-fil.
  6. Udgiv Din Extension: Brug kommandoen `vsce publish` til at udgive din extension til Marketplace. Du skal angive dit udgivernavn og din PAT.

Bedste Praksis for Extension Udvikling

Følg disse bedste praksis for at skabe højkvalitets og vedligeholdelsesvenlige VS Code extensions:

Fællesskabsressourcer

Her er nogle værdifulde ressourcer til at lære mere om VS Code extension-udvikling:

Konklusion

Udvikling af VS Code extensions er en kraftfuld måde at tilpasse dit kodemiljø på, øge produktiviteten og dele dine løsninger med det globale udviklerfællesskab. Ved at følge denne omfattende guide kan du mestre kunsten at udvikle extensions og skabe innovative værktøjer, der forbedrer VS Code-oplevelsen for dig selv og andre. Husk at omfavne fællesskabet, bidrage til open-source-projekter og løbende lære og udforske den stadigt udviklende verden af VS Code extension-udvikling. Held og lykke og god kodning!