M

MLOG

Svenska

Lås upp kraften i VS Code genom att lära dig bygga anpassade tillägg. Denna guide ger en komplett genomgång, från installation till publicering, så att du kan förbättra din kodningsmiljö och dela dina skapelser med världen.

Bemästra utveckling av VS Code-tillägg: En omfattande guide för globala utvecklare

Visual Studio Code (VS Code) har blivit den självklara kodredigeraren för miljontals utvecklare världen över. Dess popularitet kommer från dess lättviktiga natur, kraftfulla funktioner och, viktigast av allt, dess utbyggbarhet. Möjligheten att skapa anpassade tillägg låter utvecklare skräddarsy redigeraren efter sina specifika behov, vilket ökar produktiviteten och effektiviserar arbetsflöden. Denna omfattande guide kommer att leda dig genom processen att skapa dina egna VS Code-tillägg, från den första installationen till att publicera din skapelse så att hela världen kan använda den.

Varför utveckla VS Code-tillägg?

Att utveckla VS Code-tillägg erbjuder många fördelar, både för enskilda utvecklare och organisationer:

Förutsättningar

Innan du dyker in i tilläggsutveckling, se till att du har följande installerat:

Konfigurera din utvecklingsmiljö

Med förutsättningarna på plats är du redo att konfigurera din utvecklingsmiljö:

  1. Skapa ett nytt tilläggsprojekt: Öppna din terminal och kör följande kommando för att starta tilläggsgeneratorn:
    2. yo code
  2. Svara på frågorna: Generatorn kommer att ställa en rad frågor om ditt tillägg. Här är en genomgång av vanliga frågor och rekommenderade svar:
    • Vilken typ av tillägg vill du skapa? Välj "New Extension (TypeScript)" för ett TypeScript-baserat tillägg, vilket är den rekommenderade metoden.
    • Vad heter ditt tillägg? Välj ett beskrivande och unikt namn för ditt tillägg. Exempel: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete".
    • Vad är identifieraren för ditt tillägg? Detta är en unik identifierare för ditt tillägg, vanligtvis i formatet `utgivare.tilläggsnamn`. Välj ett utgivarnamn (t.ex. ditt GitHub-användarnamn eller företagsnamn).
    • Vad är beskrivningen av ditt tillägg? Ge en koncis och informativ beskrivning av vad ditt tillägg gör.
    • Initiera ett git-repository? Välj "Yes" för att initiera ett Git-repository för versionshantering.
    • Vill du använda eslint för att linta koden? Välj "Yes" för att upprätthålla en konsekvent kodstil.
  3. Öppna projektet i VS Code: När generatorn är klar, öppna den nyskapade projektmappen i VS Code.

Förstå projektstrukturen

Tilläggsgeneratorn skapar en grundläggande projektstruktur med följande nyckelfiler:

Skriva ditt första tillägg

Låt oss börja med att skapa ett enkelt tillägg som visar ett "Hello World"-meddelande när ett kommando körs:

  1. Öppna `src/extension.ts`: Denna fil innehåller `activate`-funktionen, som anropas när ditt tillägg aktiveras.
  2. Modifiera `activate`-funktionen: Ersätt den befintliga koden med följande:
    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. Förklaring:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registrerar ett kommando med ID:t `my-extension.helloWorld`. Detta kommando kommer att vara tillgängligt i VS Codes kommandopalett.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Visar ett informationsmeddelande i VS Code-fönstret.
    • `context.subscriptions.push(disposable)`: Lägger till kommandot i tilläggets prenumerationer, vilket säkerställer att det tas bort korrekt när tillägget avaktiveras.
  4. Modifiera `package.json`: Lägg till följande i `contributes`-sektionen för att definiera kommandot:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Förklaring:
    • `"commands"`: Definierar de kommandon som ditt tillägg bidrar med.
    • `"command": "my-extension.helloWorld"`: Anger kommando-ID:t som matchar det ID som används i `extension.ts`.
    • `"title": "Hello World"`: Anger visningsnamnet för kommandot i kommandopaletten.

Testa ditt tillägg

Nu är det dags att testa ditt tillägg:

  1. Tryck F5: Detta startar ett nytt VS Code-fönster med ditt tillägg installerat. Detta är "Extension Development Host".
  2. Öppna kommandopaletten: Tryck `Ctrl+Shift+P` (eller `Cmd+Shift+P` på macOS) för att öppna kommandopaletten.
  3. Skriv "Hello World": Du bör se ditt kommando i listan i kommandopaletten.
  4. Välj "Hello World": Att klicka på kommandot kommer att köra det och visa "Hello World"-meddelandet i VS Code-fönstret.

Felsöka ditt tillägg

Felsökning är avgörande för att identifiera och åtgärda problem i ditt tillägg. VS Code erbjuder utmärkt felsökningsstöd:

  1. Sätt brytpunkter: Klicka i marginalen bredvid radnumren i redigeraren för att sätta brytpunkter i din kod.
  2. Tryck F5: Detta startar "Extension Development Host" i felsökningsläge.
  3. Aktivera ditt tillägg: Utför kommandot eller åtgärden som utlöser koden du vill felsöka.
  4. Inspektera variabler och anropsstacken: VS Code-felsökaren pausar körningen vid dina brytpunkter, vilket gör att du kan inspektera variabler, stega igenom kod och granska anropsstacken.

Arbeta med VS Code API

VS Code API tillhandahåller en rik uppsättning gränssnitt och funktioner för att interagera med redigeraren. Här är några nyckelområden i API:et:

Exempel: Skapa ett tillägg för kod-snippets

Låt oss skapa ett tillägg som lägger till en kod-snippet för att skapa en grundläggande React-komponent:

  1. Skapa en `snippets`-mapp: Skapa en ny mapp med namnet `snippets` i roten av ditt projekt.
  2. Skapa en snippet-fil: Skapa en fil med namnet `react.json` i `snippets`-mappen.
  3. Lägg till snippet-definitionen: Lägg till följande 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. Förklaring:
    • `"React Component"`: Namnet på snippet:en.
    • `"prefix": "reactcomp"`: Prefixet som utlöser snippet:en. Att skriva `reactcomp` och trycka `Tab` infogar snippet:en.
    • `"body"`: En array av strängar som representerar kodraderna i snippet:en.
    • `${1:ComponentName}`: Ett tabbstopp som låter dig snabbt ändra komponentens namn.
    • `"description"`: En beskrivning av snippet:en.
  5. Modifiera `package.json`: Lägg till följande i `contributes`-sektionen:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Förklaring:
    • `"snippets"`: Definierar de snippets som ditt tillägg bidrar med.
    • `"language": "javascriptreact"`: Anger språket som snippet:en är tillämplig för.
    • `"path": "./snippets/react.json"`: Anger sökvägen till snippet-filen.
  7. Testa din snippet: Öppna en `.jsx`- eller `.tsx`-fil och skriv `reactcomp`. Tryck `Tab` för att infoga snippet:en.

Avancerade tekniker för tilläggsutveckling

När du har bemästrat grunderna kan du utforska mer avancerade tekniker för tilläggsutveckling:

Internationalisering och lokalisering (i18n och L10n)

För att nå en global publik, överväg att internationalisera och lokalisera ditt tillägg. Detta innebär att anpassa ditt tillägg för att stödja olika språk och regioner.

Publicera ditt tillägg

När ditt tillägg är klart kan du publicera det på VS Code Marketplace så att andra kan använda det:

  1. Skapa en Azure DevOps-organisation: Du behöver en Azure DevOps-organisation för att publicera ditt tillägg. Om du inte har en, skapa ett gratiskonto på Azure DevOps webbplats.
  2. Installera `vsce`-verktyget: VS Code Extension Manager (`vsce`) är ett kommandoradsverktyg för att paketera och publicera tillägg. Installera det globalt med npm:
    3. npm install -g vsce
  3. Skapa en utgivare: En utgivare är en identitet som äger dina tillägg på Marketplace. Skapa en utgivare med kommandot `vsce create-publisher`. Du måste ange ett utgivarnamn och en personlig åtkomsttoken (PAT) från Azure DevOps.
  4. Generera en personlig åtkomsttoken (PAT): Gå till "User Settings" -> "Personal Access Tokens" i Azure DevOps och skapa en ny PAT med "Marketplace (Publish)"-omfattningen.
  5. Paketera ditt tillägg: Använd kommandot `vsce package` för att paketera ditt tillägg till en `.vsix`-fil.
  6. Publicera ditt tillägg: Använd kommandot `vsce publish` för att publicera ditt tillägg på Marketplace. Du måste ange ditt utgivarnamn och din PAT.

Bästa praxis för tilläggsutveckling

Följ dessa bästa praxis för att skapa högkvalitativa och underhållbara VS Code-tillägg:

Community-resurser

Här är några värdefulla resurser för att lära dig mer om utveckling av VS Code-tillägg:

Slutsats

Att utveckla VS Code-tillägg är ett kraftfullt sätt att anpassa din kodningsmiljö, öka produktiviteten och dela dina lösningar med den globala utvecklarcommunityn. Genom att följa denna omfattande guide kan du bemästra konsten att utveckla tillägg och skapa innovativa verktyg som förbättrar VS Code-upplevelsen för dig själv och andra. Kom ihåg att omfamna communityn, bidra till projekt med öppen källkod och kontinuerligt lära dig och utforska den ständigt utvecklande världen av VS Code-tilläggsutveckling. Lycka till och glad kodning!

Bemästra utveckling av VS Code-tillägg: En omfattande guide för globala utvecklare | MLOG