Hlavní navigace

Visual Studio Code – ladění na všech platformách

24. 11. 2015

V minulém článku jsme si řekli něco o možnostech VS Code a základním ovládání.Dnes si povíme, jak pomocí VS Code ladit Node.js (TypeScript a Javascript) aplikace,

o podpoře IntelliSense, jak přizpůsobit VS Code a jaké máme možnosti automatizace – build či deploy pomocí úkolů.

Novinky

Víte, že VS Code se stalo Open Source? Mezi další novinky patří také rozšíření, které můžete procházet ve Visual Studio Marketplace. Rozšíření můžete instalovat také přímo z VS Code pomocí příkazu ext install plus mezera:

IntelliSense pro TypeScript

Pro prozkoumání ladění a IntelliSense vám doporučujeme vyzkoušet si tuto Node.js aplikaci.
Nainstalujte si nejdříve Node.js. Pro každou platformu je to jiné, na Mac OS X například přes Homebrew.
Nainstalujte si Express – Framework nad Node.js pro webové aplikace.

npm install -g express-generator

A pomocí Express si vytvořte kostru aplikace:

express myExpressApp

Pro doinstalování závislostí spustíme:

cd myExpressApp
npm install

A pro start aplikace:

npm start

Otevřete-li adresář myExpressApp ve VS Code, můžete si vyzkoušet možnosti IntelliSense například v souboru app.js:

VS Code umí také použít definice pro TypeScript (např. node.d.ts) a doplnit tak IntelliSense, ale také varování při nesprávném použití kódu.

TypeScript Definition manager umožňuje dohledávat a instalovat definice.

npm install -g tsd

Nyní můžete stáhnout definice pro Node a Express:

tsd query node --action install
tsd query express --action install

Otevřete znovu app.js a všimněte si, že zmizelo varování u __dirname, protože VS Code již ví, kde najde jeho definici.

Dále použijte například http objekt a vyzkoušejte si IntelliSense u něj:

Ještě více nápověd dostanete do VS Code pomocí konfiguračního souboru jsconfig.json v rootu webu.

Vložte do něj následující obsah:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs"
    }
}

Tím dáte najevo compileru, že píšete ES5 kód ve frameworku commonjs.

V app.js potřebujeme modul ./routes/index, který exportuje třídu Express.Route. Vyzkoušíte-li nyní IntelliSense na routes, uvidíte nyní její vlastnosti a metody:

Ladění

Jednou z klíčových vlastností VS Code je možnost ladění.

V současné verzi je ve VS Code podpora pro ladění Node.js (JavaScript a TypeScript) na všech platformách a experimentální podpora Mono (C# a F#) pro OS X a Linux. Na konferenci //build byla zmíněna přidaná podpora pro ASP.NET 5.

Pro vyvolání ladicího pohledu ve VS Code stiskněte toto tlačítko:


Před laděním musíte ovšem  nakonfigurovat projekt pomocí souboru launch.json. Stiskem konfiguračního ozubeného kolečka v ladicím pohledu vám VS Code vygeneruje výchozí.

Ve VS Code podporujeme spuštění aplikace nebo připojení se na již existující aplikaci.

Pro připojení musí být specifikována lokální adresa a port (vzdálené ladění není podporováno).

Ladění spustíte pomocí F5.

Breakpointy
Breakpointy nastavujete kliknutím na okraj editačního okna. Jejich seznam najdete v breakpoint sekci ladicího pohledu.

Inspekce dat
V ladicím pohledu můžete kontrolovat obsah proměnných, dále je podporováno zobrazení obsahu při přejetí myší.

Proměnné a výrazy mohou být vyhodnocovány v sekcích Variables a Watch.

Ladicí konzola
Ladicí konzoli vyvoláte z Palety příkazů nebo pomocí Open Console.

Ladicí akce
Po začátku ladění máte k dispozici následující ladicí akce:

-    Continue / Pause – F5
-    Step Over – F10
-    Step Into – F11
-    Step Out – Shift+F11
-    Stop – Shift+F5

Více k ladění najdete v dokumentaci.

Úkoly

Pro usnadnění a automatizaci úkolů, jako je vytváření sestavení, balíčků nebo nasazování, existuje velké množství nástrojů, například Make, Ant, Gulp, Jake, Rake a MSBuild.

Ukázka použití úkolů pro kompilaci Markdown do HTML

Převod Saas a Less do CSS

Převod Typescriptu do JavaScriptu
Autodetekce úkolů Gulp, Grunt a Jake
VS Code umí detekovat úkoly ze souborů nástrojů Gulp, Grunt a Jake automaticky a přidá je do seznamu úkolů bez nutnosti dodatečné konfigurace.

Například následující Gulp soubor přidá dva úkoly: build a debug. První pustí kompilaci C# pomocí Mono a druhý spustí MyApp pod Mono debuggerem.

var gulp = require("gulp");
var program = "MyApp";
var port = 55555;
gulp.task('default', ['debug']);
gulp.task('build', function() {
    return gulp
        .src('./**/*.cs')
        .pipe(msc(['-fullpaths', '-debug', '-target:exe', '-out:' + program]));
});
gulp.task('debug', ['build'], function(done) {
    return mono.debug({ port: port, program: program}, done);
});

Stisknete-li Ctrl+Shift+P a napíšete Run Task a Enter, zobrazí se vám seznam úkolů.

Více o úkolech a jejich konfiguraci se dozvíte v dokumentaci.

Přizpůsobení VS Code

Možnosti přizpůsobit si VS Code jsou mimo jiné následující:

- Konfigurace uživatelského a pracovního prostředí
-    Přizpůsobení klávesových zkratek
-    Uživatelsky definovaní snippety

Dále můžete importovat existující připravená témata nebo přidat rozpoznávání závorek a obarvování klíčových slov pro další jazyky.

Více o přizpůsobení VS Code najdete v dokumentaci.

David Bureš | Technical Evangelist | Microsoft Czech Republic | 

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

Měšec.cz: Zdravotní a sociální pojištění 2017: Připlatíte

Zdravotní a sociální pojištění 2017: Připlatíte

Lupa.cz: Kdo pochopí vtip, může jít do ČT vyvíjet weby

Kdo pochopí vtip, může jít do ČT vyvíjet weby

Měšec.cz: Nenechte se ošidit, když vám staví dům

Nenechte se ošidit, když vám staví dům

DigiZone.cz: ČRa DVB-T2 ověřeno: Hisense a Sencor

ČRa DVB-T2 ověřeno: Hisense a Sencor

Vitalia.cz: Jmenuje se Janina a žije bez cukru

Jmenuje se Janina a žije bez cukru

DigiZone.cz: ČT má dalšího zástupce v EBU

ČT má dalšího zástupce v EBU

Lupa.cz: Teletext je „internetem hipsterů“

Teletext je „internetem hipsterů“

DigiZone.cz: Sony KD-55XD8005 s Android 6.0

Sony KD-55XD8005 s Android 6.0

Podnikatel.cz: Udávání kvůli EET začalo

Udávání kvůli EET začalo

Vitalia.cz: Znáte „černý detox“? Ani to nezkoušejte

Znáte „černý detox“? Ani to nezkoušejte

Měšec.cz: Jak levně odeslat balík přímo z domu?

Jak levně odeslat balík přímo z domu?

Vitalia.cz: To není kašel! Správná diagnóza zachrání život

To není kašel! Správná diagnóza zachrání život

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

Měšec.cz: Jak vymáhat výživné zadarmo?

Jak vymáhat výživné zadarmo?

Měšec.cz: U levneELEKTRO.cz už reklamaci nevyřídíte

U levneELEKTRO.cz už reklamaci nevyřídíte

Lupa.cz: Propustili je z Avastu, už po nich sahá ESET

Propustili je z Avastu, už po nich sahá ESET

DigiZone.cz: Rádio Šlágr má licenci pro digi vysílání

Rádio Šlágr má licenci pro digi vysílání

Vitalia.cz: Paštiky plné masa ho zatím neuživí

Paštiky plné masa ho zatím neuživí