Konečně nadupaný editor kódu pro Linux, OS X i Windows zdarma?

3. 11. 2015

Mnoho z nás používá na tvorbu webu svoji oblíbenou aplikaci – PSPad, Brackets, Komodo nebo něco podobného.

Dnes si ukážeme, jaké možnosti nám nejen na Windows nabízí VS Code od Microsoftu. Ano, čtete správně, Visual Studio Code běží totiž na Mac OS X i na Linuxu, obsahuje mnoho vychytávek a navíc je zcela zdarma.

Postupně si VS Code představíme, abyste pochopili, proč a v čem je lepší než ostatní. Umí vaše IDE debugovat, zvládá refaktorizaci kódu a má podporu pro automatizaci pomocí ANT či Gulp? Funguje na všech platformách (Win, OSX, Linux)? Co vše vaše IDE možná neumí, se dočtete dál.

Možnosti VS Code

Základy – editor, průzkumník souborů – soubory a složky, editace, paleta příkazů, klávesové zkratky atd.
Editace
- závorkování, výběr a multi-kursor, rozšíření/zúžení výběru, IntelliSense, nápověda parametrů, snippety a emmet zkratky, funkce „jít na definici“, „jít na symbol“, „otevřít symbol podle jména“, Gutter indikátory, rychlé náhledy, hover, informace o referencích, přejmenování symbolu, akce nad kódem, chyby a varování.
Version control
 – integrovaná podpora správy zdrojových kódů – Git.
Debugování
 – nastavit breakpoint, spustit, zastavit, zkontrolovat obsah proměnných? Vše je možné.
Úkoly
 – Make, Ant, Gulp, Jake, Rake a MSBuild
Přizpůsobení
 – klávesové zkratky, témata, barvy pro syntaxi a závorky, vlastní snippety, atd.
Jazyky

  • obarvení syntaxe, závorky: Batch, C++, Clojure, Coffee Script, Dockerfile, F#, Go, Jade, Java, HandleBars, Ini, Lua, Makefile, Objective-C, Perl, PowerShell, Python, R, Razor, Ruby, Rust, SQL, Visual Basic, XML
  • + Snippety: Groovy, Markdown, PHP, Swift
  • + IntelliSense: CSS, HTML, JavaScript, JSON, Less, Sass
  • + Refaktorizace, hledání referencí: TypeScript, C#

Runtimes – Node.js (serverové aplikace + balíčky pomoci NPM), ASP.NET 5 (+DNX), Unity, Office

Instalace a kde to vzít

Otevřete-li si stránku https://www.visualstudio.com/, můžete vybrat Visual Studio Code. Ze stáhnutého souboru ZIP si přetáhněte do vybrané složky aplikaci Visual Studio Code.

Základy

Soubory, složky a projekty

VS Code je souborově a složkově orientované – jednoduše začnete tak, že otevřete soubor nebo složku. VS Code umí také načíst různé projektové soubory rozličných frameworků. Například když jsou v adresáři soubory package.json, project.json, tsconfig.json nebo projektové soubory ASP.NET v5, VS Code je načte a rozšíří funkcionalitu například o IntelliSense.

Layout

VS Code je rozděleno na čtyři hlavní oblasti:

Editor – hlavní plocha pro editaci, můžete si vedle sebe otevřít až tři,
Boční lišta (Side Bar) – obsahuje různé pohledy, například průzkumník souborů,
Stavový řádek (Status Bar) – obsahuje informace o otevřeném souboru a projektu,
Lišta zobrazení (View Bar) – úplně na levé straně ukazuje další kontextové informace jako například počet souborů ke commitu, pokud používáte Git.

Pokaždé, když VS Code otevřete, zobrazí se vám ve stavu, v jakém jste ho zavřeli. Vše zůstane zachováno – otevřená složka, soubory i layout.

VS Code nepoužívá taby, místo toho můžete otevřít až tři editační plochy vedle sebe. Pokud již máte soubor otevřený, tak použijte:

  • Ctrl (Cmd) + klik na soubor,
  • Ctrl (Cmd) + \ rozdělí aktivní editor na dva,
  • „Open to the Side“ z kontextového menu na souboru.

Working files

V souborovém průzkumníku – zde se obrazují otevřené soubory, změněné soubory nebo soubory otevřené mimo adresář projektu.

Vyhledávání ve všech souborech – Ctrl (Cmd) + Shift + F (pro pokročilé hledání Ctrl (Cmd) + Shift + J)

V textových polích pro soubory k zahrnutí (include) nebo vyloučení (exclude) můžete používat zástupné znaky:

  • * pro jeden nebo více znaků,
  • ? pro jeden znak,
  • ** pro nula nebo více segmentů cesty,
  • {} skupina podmínek (tj. {**/*.html,**/*.txt} označí všechny html a txt soubory),
  • [] skupina znaků (tj., example.[0–9] označí example.0, example.1…

Paleta příkazů

VS Code je ovladatelné z klávesnice – nejdůležitější zkratka je Ctrl (Cmd)+Shift+P, která otevře paletu příkazů (Command Palette). Poté napište ? pro nápovědu. Začnete-li psát jméno souboru, VS Code ho najde a umožní otevřít.

Podpora kódování

Podpora kódování je velmi široká a kódování můžete nastavit globálně nebo pro pracovní plochu pomocí nastavení files.encoding v Preferences/User Settings nebo Preferences/Workplace Settings.

Vybrané kódování se zobrazuje ve stavové liště:

Kliknutím na jméno kódování máte možnost znovu otevřít nebo uložit soubor v jiném kódování.

Editace

Závorkování

Související závorky budou označeny, jakmile je u nich kurzor.

Výběr a multi-kursor

VS Code podporuje více kurzorů – další kurzor (vykreslen tence) přidáte pomocí Alt-click. Kurzory se pohybují v závislosti na kontextu.

Ctrl (Cmd) + D – označí slovo, CTRL (CMD) + K, CTRL (CMD) + D přeskočí na další výskyt vybraného.

Ctrl (Cmd) + F2 – označí slovo, ve kterém je kurzor, a každý jeho výskyt.

Ctrl (Cmd) + Shift + L – označí výskyt každého fragmentu, který je právě označen.

Rozšíření/zúžení výběru

Rychlé rozšíření nebo zúžení výběru provedete pomocí Shift + Alt + Left a Shift + Alt + Right.


Animovaný gif: editingevolved_expandselection.gif

IntelliSense

VS Code nabízí doplňování slov vždy, ale pro jazyky, jako je JavaScript, JSON, HTML, CSS, Less, Sass, C# a Typescript, poskytuje VS Code IntelliSense. Během toho, jak píšete, zobrazují se vám možnosti doplnění, pokud je to možné. Stejnou funkci můžete vyvolat i pomoci Ctrl (Cmd) + Space. Potvrzení výběru provádíte pomoci tečky, Tab nebo Enter. IntelliSense podporuje notaci CamelCase, takže můžete psát jen velká písmena z toho, co hledáte: například wl doplní rychle WriteLine.

Animovaný gif: editingevolved_intellisense.gif

Nápověda parametrů

V JavaScriptu, TypeScriptu nebo C# vám VS Code nabídne parametry funkce, můžete se také přepínat mezi přetíženími funkce pomocí šipek nahoru a dolů. Dle zadaných parametrů je vybíráno nejvhodnější přetížení.

Snippety a emmet zkratky

VS Code nabízí snippety napříč jazyky, stejně jako emmet zkratky. Emmet zkratky můžete rozbalit v HTML, Razor, CSS, Less, Sass, XML nebo Jade pomocí klávesy Tab.

Animovaný gif: editingevolved_emmetsnippet.gif

Funkce „jít na definici“

Pokud to jazyk podporuje, tak pomocí F12 můžete jít na definici symbolu. Stisknete-li Ctrl (Cmd) a přejedete nad symbolem, zobrazí se v plovoucím okně.

Rychlý přechod na definici provedete pomocí Ctrl (Cmd) + klik nebo můžete otevřít definici v dalším okně editoru pomocí Ctrl (Cmd) + Alt + klik.

Funkce „otevřít symbol podle jména“

V C# a TypeScriptu můžete k navigaci napříč soubory použít Ctrl (Cmd) + T. Potom začněte psát jméno symbolu. Opět platí pravidlo s CamelCase.

Gutter indikátory

Otevřete-li projekt z adresáře, který je zahrnut pod správou kódu (Git), VS Code označuje anotace po straně (gutter = okap).

  • Červená – smazané řádky
  • Zelená – přidané řádky
  • Modrá – změněné řádky

Rychlé náhledy

Rychlé náhledy (peek) slouží k tomu, abyste pro rychlé zorientování nemuseli měnit kontext. Například Shift + F12 pro hledání referencí nebo Alt + F12 pro náhledové zobrazení definice funguje takto:

V tomto náhledu můžete rychle přepínat, ale i editovat.

Hover

Pro jazyky, které to podporují, ukazuje VS Code při přejetí myší užitečné informace, nebo jako u příkladu s CSS na obrázku, HTML kód, který odpovídá CSS definici.

Informace o referencích

C# podporuje zobrazování inline informací o referencích, které jsou obnovovány:

Nalezení referencí vyvoláte také pomocí kliknutí na tyto anotace (nebo Shift + F12).

Přejmenování symbolu

TypeScript a C# podporuje přejmenování symbolů v souborech. Stiskněte F2 a pak napište nový název. Všechny výskyty v souborech budou přejmenovány.

Akce nad kódem

JavaScript a CSS podporují akce nad kódem. Nad místem s problémem se objeví žárovka. Například __dirname v následujícím příkladu je vestavěná proměnná Node.js, takže VS Code nabídne stažení a přidání reference na node.d.ts.

Chyby a varování

Chyby a varování mohou být generovány automatickými úlohami nebo jazykovými službami, které na pozadí analyzují kód. Chyby a varování se ukazují ve stavové řádce jako sumy chyb a varování. Můžete na ně kliknout nebo pomocí Ctrl (Cmd) + Shift + M přejít na jejich seznam a otevřete-li soubor s chybami, jsou vykreslovány inline a vpravo na posouvátku.

Pro rychlou navigaci mezi chybami použijte F8 a Shift + F8. V dalších dílech si povíme více o debugování, automatizaci a přizpůsobení VS Code.

Podnikatel.cz: EET a účetní programy. Vše hotovo?

EET a účetní programy. Vše hotovo?

Vitalia.cz: Tesco nabízí desítky tun jídla zdarma

Tesco nabízí desítky tun jídla zdarma

DigiZone.cz: Banaxi: videa kdekoli na světě

Banaxi: videa kdekoli na světě

DigiZone.cz: Na jaká videa se vlastně díváme

Na jaká videa se vlastně díváme

120na80.cz: Poslední možnost změnit zdravotní pojišťovnu

Poslední možnost změnit zdravotní pojišťovnu

Lupa.cz: Jak levné procesory změnily svět?

Jak levné procesory změnily svět?

Vitalia.cz: Tohle jsou nejlepší česká piva podle odborníků

Tohle jsou nejlepší česká piva podle odborníků

120na80.cz: Co je padesátkrát sladší než cukr?

Co je padesátkrát sladší než cukr?

DigiZone.cz: Nova opět stahuje „milionáře“

Nova opět stahuje „milionáře“

Podnikatel.cz: „Lex Babiš“ Babišovi paradoxně pomůže

„Lex Babiš“ Babišovi paradoxně pomůže

Vitalia.cz: dTest odhalil ten nejlepší kečup

dTest odhalil ten nejlepší kečup

Podnikatel.cz: Instalatér, malíř a elektrikář. "Vymřou"?

Instalatér, malíř a elektrikář. "Vymřou"?

Vitalia.cz: Jsou vegani a vyrábějí nemléko

Jsou vegani a vyrábějí nemléko

Vitalia.cz: Voda z Vltavy před a po úpravě na pitnou

Voda z Vltavy před a po úpravě na pitnou

Vitalia.cz: Jak Ondra o astma přišel

Jak Ondra o astma přišel

Vitalia.cz: Antibakteriální mýdla nepomáhají, spíš škodí

Antibakteriální mýdla nepomáhají, spíš škodí

120na80.cz: Galerie: Čínští policisté testují českou minerálku

Galerie: Čínští policisté testují českou minerálku

Lupa.cz: Blíží se konec Wi-Fi sítí bez hesla?

Blíží se konec Wi-Fi sítí bez hesla?

Vitalia.cz: Tradiční čínská medicína a rakovina

Tradiční čínská medicína a rakovina

DigiZone.cz: Světový pohár v přímém přenosu na ČT

Světový pohár v přímém přenosu na ČT