M

MLOG

Slovenčina

Odomknite silu VS Code a naučte sa vytvárať vlastné rozšírenia. Tento sprievodca vás prevedie celým procesom, od nastavenia až po publikovanie, aby ste si vylepšili svoje prostredie a zdieľali svoje výtvory so svetom.

Zdokonaľte sa vo vývoji rozšírení pre VS Code: Komplexný sprievodca pre globálnych vývojárov

Visual Studio Code (VS Code) sa stal preferovaným editorom kódu pre milióny vývojárov po celom svete. Jeho popularita pramení z jeho nenáročnosti, výkonných funkcií a, čo je najdôležitejšie, jeho rozšíriteľnosti. Možnosť vytvárať vlastné rozšírenia umožňuje vývojárom prispôsobiť editor svojim špecifickým potrebám, čím zvyšujú produktivitu a zefektívňujú pracovné postupy. Tento komplexný sprievodca vás prevedie procesom vytvárania vlastných rozšírení pre VS Code, od počiatočného nastavenia až po publikovanie vášho výtvoru pre celý svet.

Prečo vyvíjať rozšírenia pre VS Code?

Vývoj rozšírení pre VS Code ponúka množstvo výhod, a to ako pre jednotlivých vývojárov, tak aj pre organizácie:

Predpoklady

Predtým, ako sa pustíte do vývoja rozšírení, uistite sa, že máte nainštalované nasledujúce:

Nastavenie vášho vývojového prostredia

S pripravenými predpokladmi ste pripravení nastaviť si vývojové prostredie:

  1. Vytvorte nový projekt rozšírenia: Otvorte terminál a spustite nasledujúci príkaz na spustenie generátora rozšírení:
    2. yo code
  2. Odpovedzte na výzvy: Generátor sa vás opýta sériu otázok o vašom rozšírení. Tu je prehľad bežných výziev a odporúčaných odpovedí:
    • Aký typ rozšírenia chcete vytvoriť? Zvoľte „New Extension (TypeScript)“ pre rozšírenie založené na TypeScript, čo je odporúčaný prístup.
    • Aký je názov vášho rozšírenia? Vyberte popisný a jedinečný názov pre vaše rozšírenie. Príklady: „Code Spell Checker,“ „JavaScript Snippets,“ „Python Autocomplete.“
    • Aký je identifikátor vášho rozšírenia? Toto je jedinečný identifikátor vášho rozšírenia, zvyčajne vo formáte `vydavatel.nazov-rozsirenia`. Zvoľte meno vydavateľa (napr. vaše používateľské meno na GitHube alebo názov firmy).
    • Aký je popis vášho rozšírenia? Poskytnite stručný a informatívny popis toho, čo vaše rozšírenie robí.
    • Inicializovať git repozitár? Zvoľte „Yes“ na inicializáciu Git repozitára pre správu verzií.
    • Chcete použiť eslint na lintovanie kódu? Zvoľte „Yes“ na vynútenie konzistencie štýlu kódu.
  3. Otvorte projekt vo VS Code: Keď generátor dokončí prácu, otvorte novovytvorený priečinok projektu vo VS Code.

Pochopenie štruktúry projektu

Generátor rozšírení vytvorí základnú štruktúru projektu s nasledujúcimi kľúčovými súbormi:

Napísanie vášho prvého rozšírenia

Začnime vytvorením jednoduchého rozšírenia, ktoré zobrazí správu „Hello World“, keď sa vykoná príkaz:

  1. Otvorte `src/extension.ts`: Tento súbor obsahuje funkciu `activate`, ktorá sa volá pri aktivácii vášho rozšírenia.
  2. Upravte funkciu `activate`: Nahraďte existujúci kód nasledujúcim:
    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. Vysvetlenie:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registruje príkaz s ID `my-extension.helloWorld`. Tento príkaz bude dostupný v palete príkazov VS Code.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Zobrazí informačnú správu v okne VS Code.
    • `context.subscriptions.push(disposable)`: Pridá príkaz do odberov rozšírenia, čím sa zabezpečí jeho správne uvoľnenie pri deaktivácii rozšírenia.
  4. Upravte `package.json`: Pridajte nasledujúce do sekcie `contributes` na definovanie príkazu:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Vysvetlenie:
    • `"commands"`: Definuje príkazy, ktorými vaše rozšírenie prispieva.
    • `"command": "my-extension.helloWorld"`: Špecifikuje ID príkazu, ktoré sa zhoduje s ID použitým v `extension.ts`.
    • `"title": "Hello World"`: Nastavuje zobrazovaný názov príkazu v palete príkazov.

Testovanie vášho rozšírenia

Teraz je čas otestovať vaše rozšírenie:

  1. Stlačte F5: Tým sa spustí nové okno VS Code s nainštalovaným vaším rozšírením. Toto je „Extension Development Host“.
  2. Otvorte paletu príkazov: Stlačte `Ctrl+Shift+P` (alebo `Cmd+Shift+P` na macOS) na otvorenie palety príkazov.
  3. Napíšte „Hello World“: Mali by ste vidieť váš príkaz uvedený v palete príkazov.
  4. Vyberte „Hello World“: Kliknutím na príkaz ho vykonáte a v okne VS Code sa zobrazí správa „Hello World“.

Ladenie vášho rozšírenia

Ladenie (debugging) je kľúčové pre identifikáciu a opravu problémov vo vašom rozšírení. VS Code poskytuje vynikajúcu podporu ladenia:

  1. Nastavte body prerušenia (Breakpoints): Kliknite do okraja editora vedľa čísel riadkov, aby ste nastavili body prerušenia vo vašom kóde.
  2. Stlačte F5: Tým sa spustí Extension Development Host v režime ladenia.
  3. Spustite vaše rozšírenie: Vykonajte príkaz alebo akciu, ktorá spustí kód, ktorý chcete ladiť.
  4. Skontrolujte premenné a zásobník volaní (Call Stack): Ladiaci nástroj VS Code pozastaví vykonávanie na vašich bodoch prerušenia, čo vám umožní kontrolovať premenné, prechádzať kódom a skúmať zásobník volaní.

Práca s VS Code API

VS Code API poskytuje bohatú sadu rozhraní a funkcií na interakciu s editorom. Tu sú niektoré kľúčové oblasti API:

Príklad: Vytvorenie rozšírenia pre úryvky kódu (Code Snippet)

Vytvorme rozšírenie, ktoré pridá úryvok kódu na vytvorenie základného komponentu React:

  1. Vytvorte priečinok `snippets`: V koreňovom adresári vášho projektu vytvorte nový priečinok s názvom `snippets`.
  2. Vytvorte súbor s úryvkami: V priečinku `snippets` vytvorte súbor s názvom `react.json`.
  3. Pridajte definíciu úryvku: Pridajte nasledujúci 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. Vysvetlenie:
    • `"React Component"`: Názov úryvku.
    • `"prefix": "reactcomp"`: Predpona, ktorá spúšťa úryvok. Napísaním `reactcomp` a stlačením `Tab` vložíte úryvok.
    • `"body"`: Pole reťazcov predstavujúcich riadky kódu v úryvku.
    • `${1:ComponentName}`: Zarážka (tab stop), ktorá vám umožní rýchlo zmeniť názov komponentu.
    • `"description"`: Popis úryvku.
  5. Upravte `package.json`: Pridajte nasledujúce do sekcie `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Vysvetlenie:
    • `"snippets"`: Definuje úryvky, ktorými vaše rozšírenie prispieva.
    • `"language": "javascriptreact"`: Špecifikuje jazyk, pre ktorý je úryvok použiteľný.
    • `"path": "./snippets/react.json"`: Špecifikuje cestu k súboru s úryvkami.
  7. Otestujte váš úryvok: Otvorte súbor `.jsx` alebo `.tsx` a napíšte `reactcomp`. Stlačte `Tab` na vloženie úryvku.

Pokročilé techniky vývoja rozšírení

Keď si osvojíte základy, môžete preskúmať pokročilejšie techniky vývoja rozšírení:

Internacionalizácia a lokalizácia (i18n a L10n)

Ak chcete osloviť globálne publikum, zvážte internacionalizáciu a lokalizáciu vášho rozšírenia. To zahŕňa prispôsobenie vášho rozšírenia na podporu rôznych jazykov a regiónov.

Publikovanie vášho rozšírenia

Keď je vaše rozšírenie pripravené, môžete ho publikovať na VS Code Marketplace, aby ho mohli používať ostatní:

  1. Vytvorte organizáciu v Azure DevOps: Na publikovanie vášho rozšírenia budete potrebovať organizáciu v Azure DevOps. Ak ju nemáte, vytvorte si bezplatný účet na webovej stránke Azure DevOps.
  2. Nainštalujte nástroj `vsce`: VS Code Extension Manager (`vsce`) je nástroj príkazového riadka na balenie a publikovanie rozšírení. Nainštalujte ho globálne pomocou npm:
    3. npm install -g vsce
  3. Vytvorte vydavateľa (Publisher): Vydavateľ je identita, ktorá vlastní vaše rozšírenia na Marketplace. Vytvorte vydavateľa pomocou príkazu `vsce create-publisher`. Budete musieť poskytnúť meno vydavateľa a osobný prístupový token (PAT) z Azure DevOps.
  4. Vygenerujte osobný prístupový token (PAT): V Azure DevOps prejdite do „User Settings“ -> „Personal Access Tokens“ a vytvorte nový PAT s rozsahom (scope) „Marketplace (Publish)“.
  5. Zabaľte vaše rozšírenie: Použite príkaz `vsce package` na zabalenie vášho rozšírenia do súboru `.vsix`.
  6. Publikujte vaše rozšírenie: Použite príkaz `vsce publish` na publikovanie vášho rozšírenia na Marketplace. Budete musieť zadať meno vášho vydavateľa a váš PAT.

Osvedčené postupy pre vývoj rozšírení

Dodržiavajte tieto osvedčené postupy na vytváranie vysokokvalitných a udržiavateľných rozšírení pre VS Code:

Komunitné zdroje

Tu sú niektoré cenné zdroje na ďalšie vzdelávanie o vývoji rozšírení pre VS Code:

Záver

Vývoj rozšírení pre VS Code je mocný spôsob, ako si prispôsobiť svoje kódovacie prostredie, zvýšiť produktivitu a zdieľať svoje riešenia s globálnou komunitou vývojárov. Sledovaním tohto komplexného sprievodcu si môžete osvojiť umenie vývoja rozšírení a vytvárať inovatívne nástroje, ktoré vylepšia zážitok z VS Code pre vás aj pre ostatných. Nezabudnite sa zapojiť do komunity, prispievať do open-source projektov a neustále sa učiť a objavovať neustále sa vyvíjajúci svet vývoja rozšírení pre VS Code. Veľa šťastia a šťastné kódovanie!