M

MLOG

Norsk

Lås opp kraften i VS Code ved å lære å bygge tilpassede utvidelser. Denne veiledningen gir en komplett gjennomgang, fra oppsett til publisering.

Mestre VS Code-utvikling av utvidelser: En omfattende veiledning for globale utviklere

Visual Studio Code (VS Code) har blitt den foretrukne kodeeditoren for millioner av utviklere over hele verden. Populariteten skyldes dens lette natur, kraftige funksjoner og, viktigst av alt, dens utvidbarhet. Muligheten til å lage tilpassede utvidelser lar utviklere skreddersy editoren til deres spesifikke behov, øke produktiviteten og effektivisere arbeidsflyter. Denne omfattende veiledningen vil veilede deg gjennom prosessen med å lage dine egne VS Code-utvidelser, fra innledende oppsett til publisering av din kreasjon for resten av verden.

Hvorfor utvikle VS Code-utvidelser?

Utvikling av VS Code-utvidelser gir en rekke fordeler, både for individuelle utviklere og organisasjoner:

Forutsetninger

Før du dykker ned i utvidelsesutvikling, må du sørge for at du har følgende installert:

Sette opp utviklingsmiljøet ditt

Med forutsetningene på plass er du klar til å sette opp utviklingsmiljøet ditt:

  1. Opprett et nytt utvidelsesprosjekt: Åpne terminalen og kjør følgende kommando for å starte utvidelsesgeneratoren:
    2. yo code
  2. Svar på spørsmålene: Generatoren vil stille en rekke spørsmål om utvidelsen din. Her er en oversikt over vanlige spørsmål og anbefalte svar:
    • Hvilken type utvidelse vil du opprette? Velg "Ny utvidelse (TypeScript)" for en TypeScript-basert utvidelse, som er den anbefalte tilnærmingen.
    • Hva er navnet på utvidelsen din? Velg et beskrivende og unikt navn for utvidelsen din. Eksempler: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete."
    • Hva er identifikatoren for utvidelsen din? Dette er en unik identifikator for utvidelsen din, vanligvis i formatet `utgiver.utvidelsesnavn`. Velg et utgivernavn (f.eks. GitHub-brukernavnet ditt eller firmanavnet).
    • Hva er beskrivelsen av utvidelsen din? Gi en kort og informativ beskrivelse av hva utvidelsen din gjør.
    • Initialiser et git-repository? Velg "Ja" for å initialisere et Git-repository for versjonskontroll.
    • Vil du bruke eslint til å lint koden? Velg "Ja" for å håndheve konsistens i kodestilen.
  3. Åpne prosjektet i VS Code: Når generatoren er fullført, åpner du den nyopprettede prosjektmappen i VS Code.

Forstå prosjektstrukturen

Utvidelsesgeneratoren oppretter en grunnleggende prosjektstruktur med følgende viktige filer:

Skrive din første utvidelse

La oss starte med å lage en enkel utvidelse som viser en "Hello World"-melding når en kommando utføres:

  1. Åpne `src/extension.ts`: Denne filen inneholder `activate`-funksjonen, som kalles når utvidelsen din aktiveres.
  2. Endre `activate`-funksjonen: Erstatt den eksisterende koden med følgende:
    3. import * as vscode from 'vscode';

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

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

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Forklaring:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registrerer en kommando med ID-en `my-extension.helloWorld`. Denne kommandoen vil være tilgjengelig i VS Code-kommandopaletten.
    • `vscode.window.showInformationMessage('Hello World fra Min Utvidelse!')`: Viser en informasjonsmelding i VS Code-vinduet.
    • `context.subscriptions.push(disposable)`: Legger kommandoen til utvidelsens abonnementer, og sikrer at den avhendes på riktig måte når utvidelsen deaktiveres.
  4. Endre `package.json`: Legg til følgende i `contributes`-delen for å definere kommandoen:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Forklaring:
    • `"commands"`: Definerer kommandoene som utvidelsen din bidrar med.
    • `"command": "my-extension.helloWorld"`: Spesifiserer kommando-ID-en som samsvarer med ID-en som brukes i `extension.ts`.
    • `"title": "Hello World"`: Angir visningsnavnet for kommandoen i kommandopaletten.

Teste utvidelsen din

Nå er det på tide å teste utvidelsen din:

  1. Trykk F5: Dette vil starte et nytt VS Code-vindu med utvidelsen din installert. Dette er "Utvidelsesutviklingsvert".
  2. Åpne kommandopaletten: Trykk `Ctrl+Shift+P` (eller `Cmd+Shift+P` på macOS) for å åpne kommandopaletten.
  3. Skriv "Hello World": Du skal se kommandoen din oppført i kommandopaletten.
  4. Velg "Hello World": Hvis du klikker på kommandoen, utføres den og viser "Hello World"-meldingen i VS Code-vinduet.

Feilsøke utvidelsen din

Feilsøking er avgjørende for å identifisere og fikse problemer i utvidelsen din. VS Code gir utmerket feilsøkingsstøtte:

  1. Sett inn bruddpunkter: Klikk i editorens marg ved siden av linjenumrene for å sette inn bruddpunkter i koden din.
  2. Trykk F5: Dette vil starte Utvidelsesutviklingsvert i feilsøkingsmodus.
  3. Utløs utvidelsen din: Utfør kommandoen eller handlingen som utløser koden du vil feilsøke.
  4. Inspiser variabler og kallstabel: VS Code-feilsøkeren vil pause utførelsen ved bruddpunktene dine, slik at du kan inspisere variabler, gå gjennom koden og undersøke kallstabelen.

Arbeide med VS Code API

VS Code API gir et rikt sett med grensesnitt og funksjoner for å samhandle med editoren. Her er noen viktige områder av API-et:

Eksempel: Opprette en kodebitutvidelse

La oss opprette en utvidelse som legger til en kodebit for å opprette en grunnleggende React-komponent:

  1. Opprett en `snippets`-mappe: Opprett en ny mappe med navnet `snippets` i roten av prosjektet ditt.
  2. Opprett en bitfil: Opprett en fil med navnet `react.json` inne i `snippets`-mappen.
  3. Legg til bitdefinisjonen: Legg til følgende JSON i `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å kodebiten.
    • `"prefix": "reactcomp"`: Prefikset som utløser kodebiten. Hvis du skriver `reactcomp` og trykker `Tab`, settes kodebiten inn.
    • `"body"`: En rekke strenger som representerer kodelinjene i kodebiten.
    • `${1:ComponentName}`: En tabulatorstopp som lar deg raskt endre komponentnavnet.
    • `"description"`: En beskrivelse av kodebiten.
  5. Endre `package.json`: Legg til følgende i `contributes`-delen:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Forklaring:
    • `"snippets"`: Definerer kodebitene som utvidelsen din bidrar med.
    • `"language": "javascriptreact"`: Spesifiserer språket som kodebiten er aktuelt for.
    • `"path": "./snippets/react.json"`: Spesifiserer banen til bitfilen.
  7. Test kodebiten din: Åpne en `.jsx`- eller `.tsx`-fil og skriv `reactcomp`. Trykk `Tab` for å sette inn kodebiten.

Avanserte teknikker for utvidelsesutvikling

Når du har mestret det grunnleggende, kan du utforske mer avanserte teknikker for utvidelsesutvikling:

Internasjonalisering og lokalisering (i18n og L10n)

For å nå et globalt publikum, bør du vurdere å internasjonalisere og lokalisere utvidelsen din. Dette innebærer å tilpasse utvidelsen din til å støtte forskjellige språk og regioner.

Publisere utvidelsen din

Når utvidelsen din er klar, kan du publisere den til VS Code Marketplace slik at andre kan bruke den:

  1. Opprett en Azure DevOps-organisasjon: Du trenger en Azure DevOps-organisasjon for å publisere utvidelsen din. Hvis du ikke har en, kan du opprette en gratis konto på Azure DevOps-nettsiden.
  2. Installer `vsce`-verktøyet: VS Code Extension Manager (`vsce`) er et kommandolinjeverktøy for pakking og publisering av utvidelser. Installer den globalt ved hjelp av npm:
    3. npm install -g vsce
  3. Opprett en utgiver: En utgiver er en identitet som eier utvidelsene dine på Marketplace. Opprett en utgiver ved hjelp av kommandoen `vsce create-publisher`. Du må oppgi et utgivernavn og et personlig tilgangstoken (PAT) fra Azure DevOps.
  4. Generer et personlig tilgangstoken (PAT): I Azure DevOps går du til "Brukerinnstillinger" -> "Personlige tilgangstokener" og oppretter et nytt PAT med "Marketplace (Publiser)"-omfanget.
  5. Pakk utvidelsen din: Bruk kommandoen `vsce package` til å pakke utvidelsen din i en `.vsix`-fil.
  6. Publiser utvidelsen din: Bruk kommandoen `vsce publish` til å publisere utvidelsen din til Marketplace. Du må oppgi utgivernavnet ditt og PAT.

Beste fremgangsmåter for utvidelsesutvikling

Følg disse beste fremgangsmåtene for å lage VS Code-utvidelser av høy kvalitet og som er enkle å vedlikeholde:

Fellesskapsressurser

Her er noen verdifulle ressurser for å lære mer om VS Code-utvidelsesutvikling:

Konklusjon

Utvikling av VS Code-utvidelser er en kraftig måte å tilpasse kodemiljøet ditt, øke produktiviteten og dele løsningene dine med det globale utviklerfellesskapet. Ved å følge denne omfattende veiledningen kan du mestre kunsten å utvikle utvidelser og lage innovative verktøy som forbedrer VS Code-opplevelsen for deg selv og andre. Husk å omfavne fellesskapet, bidra til åpen kildekode-prosjekter, og kontinuerlig lære og utforske den stadig utviklende verdenen av VS Code-utvidelsesutvikling. Lykke til og god koding!

Mestre VS Code-utvikling av utvidelser: En omfattende veiledning for globale utviklere | MLOG