Přejít k navigační liště

Zdroják » PR Články » Konečně nadupaný editor kódu pro Linux, OS X i Windows zdarma?

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

Články PR Články

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.

image1

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 souborechCtrl (Cmd) + Shift + F (pro pokročilé hledání Ctrl (Cmd) + Shift + J)

image2

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.

image3

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.

image4

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

image5

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.

image6

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.

image7

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.

editingevolved_expandselection

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. 

editingevolved_intellisense

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í.

image10

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.

editingevolved_emmetsnippet

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.

image12

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.

image13

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

image14

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:

image15

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.

image16

Informace o referencích

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

image17

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.

image18

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.

image19

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.

image20

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.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.