Jak napsat doplněk pro VS Code a publikovat ho na Marketplace

Na konferenci Microsoft Connect(); 2015 byl oznámen přerod Visual Studio Code (VSCode) na status Beta. VS Code je programátorský editor vhodný pro tvorbu a ladění moderních, zejména webových aplikací, a je dostupný zdarma na Linuxu, OS X i Windows.

Beta nám přinesla mnoho novinek, z nichž nejzásadnější je tvorba doplňků. A teď je řada na nás, vývojářích, abychom si začali upravovat VS Code k obrazu svému a pomáhali také ostatním vývojářům. Proto vám v tomto článku ukáži, jak jednoduché je vytvořit doplněk pro VS Code a přivést tak pár dalších nadšenců k zlepšování zajímavého nástroje jako je VS Code.

Již vytvořené doplňky i s jejich kódy hostovanými na GitHubu můžeme najít zde.

Generátor

Náš první krok bude instalace Node.js. Pro vygenerování našeho doplňku použijeme Yeoman generátor. Ten, společně s doplňkem od VS Code nainstalujeme a spustíme tímto příkazem:

npm install -g yo generator-code

yo code

Při tvorbě doplňku máte na výběr z dvou jazyků, TypeScriptu nebo JavaScriptu. Poté postupujte dle pokynů. Po vygenerování otevřeme náš doplněk ve VS Code.

Klepněte pro větší obrázek

Struktura a nastavení

Soubor package.json obsahuje všechny informace o našem doplňku, tedy i jeho účel, jeho spuštění, popis atd. Zde můžeme například přidávat také Node moduly které chceme využívat. Také obsahuje informace do Marketplace.

README.md je soubor, který obsahuje informace o popisu, které se propisují do našeho Git repositáře i do VS Marketplace.

Extension.ts ve složce src je náš kód (pokud programuje v JavaScriptu je to extension.js). Všechnu logiku našeho kódu začneme v tomto souboru.

Tvorba

Nejdříve musíme nastavit, jak náš doplněk aktivovat, a to v package.json. Takto se aktivuje náš doplněk při napsaní “Hello World” do lišty ve VS Code.

Klepněte pro větší obrázek

Pokud otevřete soubor Extension.ts a najdete “activate” funkci, tak tato funkce se aktivuje právě při parametrech, které jsme zadali, a zde už můžeme vytvářet logiku našeho doplňku. Můžeme využívat všechny standardní funkce a postupy, jaké jsme zvyklí v jiných projektech. Než se ale do kódování pustíte, doporučuji projít si API VS Code.

Testování a debugování

Pokud náš doplněk otevřete ve VS Code, tak si jej můžete ihned spustit, a to kliknutím na tlačítko debuggeru a následném spuštění. Otevře se nám separátní VS Code, ve kterém je náš doplněk, po vypnutí se doplněk smaže.

Pokud chcete náš doplněk debugovat, můžete využít nástrojů přímo ve VS Code.

Klepněte pro větší obrázek

Publikace

Pokud chcete doplněk poskytnout také ostatním vývojářům, tak musíte začít tím, že nainstalujete doplněk od Microsoftu, vsce.

npm install -g vsce

Dále budeme potřebovat MS Token. Nejdříve bude potřeba se zaregistrovat, https://www.visualstudio.com/en-us/get-started/setup/sign-up-for-visual-studio-online poté na stránce vašeho Visual Studia Online přejdete na stránku “My Profile”.

Klepněte pro větší obrázek

Přejděte na “Security” záložku a poté klikněte na “Add”.

Klepněte pro větší obrázek

Token si libovolně pojmenujeme, a nastavíme na 1 rok, poté nám expiruje a bude potřeba nový. Poté ho zkopírujeme.

Klepněte pro větší obrázek

V terminálu (nebo CMD) přejdeme do složky našeho doplňku a poté vyvoláme tento příkaz, který vytvoří nového vydavatele.

vsce create-publisher nazev

A přihlásíme se na něj.

vsce login nazev

Teď už stačí vyvolat jen příkaz “Publish” a náš doplněk je dostupný v Marketplace.

vsce publish

V tomto článku jsou použity informace z https://code.visualstudio.com/Docs a https://github.com/Microsoft/vscode.

Články ze série Microsoft TechNet nevytváří redakce Živě.cz, ale partneři programu Microsoft TechNet. Jsou publikovány v rámci mediálního partnerství Živě.cz a společnosti Microsoft.

Váš názor Další článek: Nová doména .CLOUD vtrhla na internet. Registrujte si novakuv.cloud za 230,-

Témata článku: Microsoft, Programování, Ostatní vývojář, VS Cod, Generator, Marketplace, Standardní funkce, Pastebin, Publisher, Debugger, Následné spuštění, Token, TypeScript, Doplňky, Přerod


Určitě si přečtěte

Notebook do 10 000 korun: Co koupit a čemu se raději vyhnout

Notebook do 10 000 korun: Co koupit a čemu se raději vyhnout

** Do deseti tisíc korun lze dnes koupit slušné notebooky ** V nabídce ale převládají zastaralé a pomalé modely ** Poradíme, jak dobře vybrat i s omezeným rozpočtem

David Polesný | 71

Blíží se HTTP/3: Web bude rychlejší a bude používat úplně jinou technologii

Blíží se HTTP/3: Web bude rychlejší a bude používat úplně jinou technologii

** Příští verze klíčového protokolu HTTP nebude postavená na TCP ** Namísto toho použije „vylepšené UDP“ ** HTTP/3 bude postavené na QUIC

Jakub Čížek | 60

Tohle tak jednou zažít: Nová vzducholoď Airlander 10 s prosklenou podlahou

Tohle tak jednou zažít: Nová vzducholoď Airlander 10 s prosklenou podlahou

** Airlander 10 nabídne plavby vzduchem v interiéru s prosklenou podlahou ** Luxusní vzducholoď byla původně vyvíjena pro vojenské účely ** Počítá se s třídenními „kochacími“ výlety za poznáním

Karel Kilián | 7

Photolemur 3: Prostě do něj přetáhnete fotky a začne se dít magie. Tedy údajně...

Photolemur 3: Prostě do něj přetáhnete fotky a začne se dít magie. Tedy údajně...

** Je lepší nabušený Photoshop, nebo program s jedním tlačítkem? ** Photolemur si myslí to druhé ** Tento fotoeditor neumí skoro nic, a přitom (skoro) všechno

Jakub Čížek | 21

Modelářský zázrak: Maketa raketoplánu Columbia, která létá jako skutečná raketa

Modelářský zázrak: Maketa raketoplánu Columbia, která létá jako skutečná raketa

** Model raketoplánu Columbia od českého konstruktéra umí i létat ** Obdivuhodný model si vzal 1600 hodin práce ** Podívejte se na fotografie ze stavby a prvního letu

Karel Jeřábek | 20

Levný televizor místo drahého 4K HDR monitoru? Na co si musíte dát pozor

Levný televizor místo drahého 4K HDR monitoru? Na co si musíte dát pozor

** 43", 4K, 60 Hz a HDR k tomu za deset tisíc ** Televizor takových parametrů stojí téměř polovinu, co monitor ** Využití televize jako monitoru přináší řadu kompromisů, ale jde to

Tomáš Holčík | 58

Nový iPhone a další novinky Applu: sledujte, na co se zase budou stát fronty

Nový iPhone a další novinky Applu: sledujte, na co se zase budou stát fronty

** Apple dnes představuje nové produkty v čele s novými iPhony ** Nemusí zůstat jen u telefonů, čekají se i další novinky ** Úvodní přednáška začíná v 19:00 našeho času

David Polesný | 57



Aktuální číslo časopisu Computer

Nejlepší programy pro úpravu fotek zdarma

Externí disky pro zálohu dat

Velký test: herní notebooky

Srovnání 12 batohů