M

MLOG

Čeština

Odemkněte sílu VS Code učením se vytvářet vlastní rozšíření. Tento průvodce poskytuje kompletní návod, od nastavení po publikování, a umožní vám vylepšit vaše kódovací prostředí a sdílet vaše výtvory se světem.

Mistrovství ve vývoji rozšíření VS Code: Komplexní průvodce pro globální vývojáře

Visual Studio Code (VS Code) se stal preferovaným editorem kódu pro miliony vývojářů po celém světě. Jeho popularita pramení z jeho nenáročnosti, výkonných funkcí a, co je nejdůležitější, jeho rozšiřitelnosti. Možnost vytvářet vlastní rozšíření umožňuje vývojářům přizpůsobit editor jejich specifickým potřebám, zvýšit produktivitu a zefektivnit pracovní postupy. Tento komplexní průvodce vás provede procesem vytváření vlastních rozšíření VS Code, od počátečního nastavení až po publikování vašeho výtvoru pro použití po celém světě.

Proč vyvíjet rozšíření VS Code?

Vývoj rozšíření VS Code nabízí řadu výhod, jak pro jednotlivé vývojáře, tak pro organizace:

Předpoklady

Předtím, než se ponoříte do vývoje rozšíření, se ujistěte, že máte nainstalované následující:

Nastavení vývojového prostředí

S potřebnými předpoklady jste připraveni nastavit své vývojové prostředí:

  1. Vytvořte nový projekt rozšíření: Otevřete terminál a spuštěte následující příkaz pro spuštění generátoru rozšíření:
    2. yo code
  2. Odpovězte na otázky: Generátor vám položí sérii otázek týkajících se vašeho rozšíření. Zde je rozpis běžných otázek a doporučených odpovědí:
    • Jaký typ rozšíření chcete vytvořit? Vyberte "Nové rozšíření (TypeScript)" pro rozšíření založené na TypeScript, což je doporučený přístup.
    • Jaký je název vašeho rozšíření? Zvolte popisný a jedinečný název pro vaše rozšíření. Příklady: "Kontrola pravopisu kódu", "Úryvky JavaScriptu", "Automatické dokončování Pythonu".
    • Jaký je identifikátor vašeho rozšíření? Toto je jedinečný identifikátor pro vaše rozšíření, obvykle ve formátu `publisher.extension-name`. Zvolte název vydavatele (např. vaše uživatelské jméno GitHub nebo název společnosti).
    • Jaký je popis vašeho rozšíření? Uveďte stručný a informativní popis toho, co vaše rozšíření dělá.
    • Inicializovat repozitář git? Zvolte "Ano" pro inicializaci repozitáře Git pro správu verzí.
    • Chcete použít eslint k lintování kódu? Zvolte "Ano" pro vynucení konzistence stylu kódu.
  3. Otevřete projekt ve VS Code: Po dokončení generátoru otevřete nově vytvořenou složku projektu ve VS Code.

Pochopení struktury projektu

Generátor rozšíření vytvoří základní strukturu projektu s následujícími klíčovými soubory:

Napsání prvního rozšíření

Začněme vytvořením jednoduchého rozšíření, které zobrazí zprávu "Hello World" po spuštění příkazu:

  1. Otevřete `src/extension.ts`: Tento soubor obsahuje funkci `activate`, která je volána při aktivaci vašeho rozšíření.
  2. Upravte funkci `activate`: Nahraďte stávající kód následujícím:
    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. Vysvětlení:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Zaregistruje příkaz s ID `my-extension.helloWorld`. Tento příkaz bude k dispozici v paletě příkazů VS Code.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Zobrazí informační zprávu v okně VS Code.
    • `context.subscriptions.push(disposable)`: Přidá příkaz do odběrů rozšíření, čímž zajistí, že bude správně zrušen při deaktivaci rozšíření.
  4. Upravte `package.json`: Přidejte následující do sekce `contributes` pro definování příkazu:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Vysvětlení:
    • `"commands"`: Definuje příkazy, kterými vaše rozšíření přispívá.
    • `"command": "my-extension.helloWorld"`: Určuje ID příkazu, které odpovídá ID použitému v `extension.ts`.
    • `"title": "Hello World"`: Nastaví zobrazovaný název příkazu v paletě příkazů.

Testování vašeho rozšíření

Nyní je čas otestovat vaše rozšíření:

  1. Stiskněte F5: Tím se spustí nové okno VS Code s nainstalovaným vaším rozšířením. Toto je "Hostitel pro vývoj rozšíření".
  2. Otevřete paletu příkazů: Stiskněte `Ctrl+Shift+P` (nebo `Cmd+Shift+P` na macOS) pro otevření palety příkazů.
  3. Zadejte "Hello World": Měl by se zobrazit váš příkaz v paletě příkazů.
  4. Vyberte "Hello World": Kliknutím na příkaz jej spustíte a zobrazí se zpráva "Hello World" v okně VS Code.

Ladění vašeho rozšíření

Ladění je zásadní pro identifikaci a opravu problémů ve vašem rozšíření. VS Code poskytuje vynikající podporu ladění:

  1. Nastavte body přerušení: Klikněte v editoru vedle čísel řádků pro nastavení bodů přerušení ve vašem kódu.
  2. Stiskněte F5: Tím se spustí Hostitel pro vývoj rozšíření v režimu ladění.
  3. Spusťte vaše rozšíření: Spusťte příkaz nebo akci, která spustí kód, který chcete ladit.
  4. Zkontrolujte proměnné a zásobník volání: Ladicí program VS Code pozastaví provádění na vašich bodech přerušení, což vám umožní zkontrolovat proměnné, procházet kód a prozkoumat zásobník volání.

Práce s VS Code API

VS Code API poskytuje bohatou sadu rozhraní a funkcí pro interakci s editorem. Zde jsou některé klíčové oblasti API:

Příklad: Vytvoření rozšíření úryvků kódu

Vytvořme rozšíření, které přidá úryvek kódu pro vytvoření základní komponenty React:

  1. Vytvořte složku `snippets`: Vytvořte novou složku s názvem `snippets` v kořenovém adresáři vašeho projektu.
  2. Vytvořte soubor úryvku: Vytvořte soubor s názvem `react.json` uvnitř složky `snippets`.
  3. Přidejte definici úryvku: Přidejte následující JSON do `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. Vysvětlení:
    • `"React Component"`: Název úryvku.
    • `"prefix": "reactcomp"`: Předpona, která spouští úryvek. Zadáte-li `reactcomp` a stisknete `Tab`, vloží se úryvek.
    • `"body"`: Pole řetězců představujících řádky kódu v úryvku.
    • `${1:ComponentName}`: Zarážka tabulátoru, která vám umožní rychle změnit název komponenty.
    • `"description"`: Popis úryvku.
  5. Upravte `package.json`: Přidejte následující do sekce `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Vysvětlení:
    • `"snippets"`: Definuje úryvky, kterými vaše rozšíření přispívá.
    • `"language": "javascriptreact"`: Určuje jazyk, pro který je úryvek použitelný.
    • `"path": "./snippets/react.json"`: Určuje cestu k souboru úryvku.
  7. Otestujte svůj úryvek: Otevřete soubor `.jsx` nebo `.tsx` a zadejte `reactcomp`. Stiskněte `Tab` pro vložení úryvku.

Pokročilé techniky vývoje rozšíření

Jakmile zvládnete základy, můžete prozkoumat pokročilejší techniky vývoje rozšíření:

Internacionalizace a lokalizace (i18n a L10n)

Chcete-li oslovit globální publikum, zvažte internacionalizaci a lokalizaci svého rozšíření. To zahrnuje přizpůsobení vašeho rozšíření pro podporu různých jazyků a regionů.

Publikování vašeho rozšíření

Jakmile je vaše rozšíření připraveno, můžete jej publikovat na VS Code Marketplace, aby jej mohli používat i ostatní:

  1. Vytvořte organizaci Azure DevOps: K publikování vašeho rozšíření budete potřebovat organizaci Azure DevOps. Pokud ji nemáte, vytvořte si bezplatný účet na webových stránkách Azure DevOps.
  2. Nainstalujte nástroj `vsce`: VS Code Extension Manager (`vsce`) je nástroj příkazového řádku pro balení a publikování rozšíření. Nainstalujte jej globálně pomocí npm:
    3. npm install -g vsce
  3. Vytvořte vydavatele: Vydavatel je identita, která vlastní vaše rozšíření na Marketplace. Vytvořte vydavatele pomocí příkazu `vsce create-publisher`. Budete muset zadat jméno vydavatele a osobní přístupový token (PAT) z Azure DevOps.
  4. Vygenerujte osobní přístupový token (PAT): V Azure DevOps přejděte do "Nastavení uživatele" -> "Osobní přístupové tokeny" a vytvořte nový PAT s rozsahem "Marketplace (Publikovat)".
  5. Zabalte své rozšíření: Pomocí příkazu `vsce package` zabalte své rozšíření do souboru `.vsix`.
  6. Publikujte své rozšíření: Pomocí příkazu `vsce publish` publikujte své rozšíření na Marketplace. Budete muset zadat jméno vydavatele a svůj PAT.

Doporučené postupy pro vývoj rozšíření

Dodržujte tyto doporučené postupy pro vytváření vysoce kvalitních a udržovatelných rozšíření VS Code:

Komunitní zdroje

Zde je několik cenných zdrojů pro získání dalších informací o vývoji rozšíření VS Code:

Závěr

Vývoj rozšíření VS Code je výkonný způsob, jak si přizpůsobit své kódovací prostředí, zvýšit produktivitu a sdílet svá řešení s globální vývojářskou komunitou. Dodržováním tohoto komplexního průvodce můžete ovládnout umění vývoje rozšíření a vytvářet inovativní nástroje, které vylepší prostředí VS Code pro vás i ostatní. Nezapomeňte se zapojit do komunity, přispívat do projektů s otevřeným zdrojovým kódem a neustále se učit a prozkoumávat neustále se vyvíjející svět vývoje rozšíření VS Code. Hodně štěstí a šťastné kódování!