Visual Studio Code – editor kódu pro Windows, Linux i OS X
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Visual Studio Code – editor kódu pro Windows, Linux i OS XVisual Studio Code – editor kódu pro Windows, Linux i OS X

 

Visual Studio Code – editor kódu pro Windows, Linux i OS X

Google       23. 11. 2015       10 729×

Microsoft se pokouší vyjít vstříc všem, kteří volají po odlehčení Visual Studia, a také těm, kterým slavný hegemon chybí na jejich operačním systému. Když bylo letos poprvé oznámeno Visual Studio pro Mac a Linux, vypadalo to, že peklo zamrzlo. Realita není až tak dramatická - vznikl editor kódu, který toho umí víc, než se může na první pohled zdát.

Reklama
Reklama

V tomto článku si představíme některé zajímavé vychytávky, které jsme ve VS Code objevili. Pokud editor ještě neznáte, může to být vaše první seznámení, pokud jste s ním naopak již přišli do styku, třeba se dozvíte, jak ho používat o něco lépe.

VS Code je zdarma ke stažení na webu Visual Studia. Instalace je rychlá a jednoduchá, funguje na Windows, Mac OS X i Linuxu.

Update 23. 11. 2015: Zdrojový kód Visual Studia Online byl otevřen a najdete ho na GitHubu.

Základy

VS Code je souborově orientované – začnete tak, že otevřete soubor nebo složku. Editor umí také načíst různé projektové soubory rozličných frameworků. Když jsou například 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 napovídání kódu 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 spustíte, zobrazí se vám ve stavu, v jakém jste ho ukončili - zůstane otevřená složka, soubory i layout.

Editor nepoužívá taby, místo toho můžete otevřít až tři soubory vedle sebe. Můžete tak bok po boku nakombinovat například zdrojový kód, obrázek a náhled markdownu (případně video, to Code zvládne taky). Šikovné klávesové zkratky jsou:

  • Ctrl + klik na soubor = otevření dalšího souboru vedle stávajících.
  • Ctrl + \ = rozdělení aktivního editoru na dva.
  • Případně můžete použít kontextové menu souboru a vybrat "Open to the side".

Working files

Průzkumník souborů v boční liště obsahuje ještě speciální sekci nazvanou "Working files", kde se sdružují aktuálně otevřené soubory, změněné soubory a soubory otevřené mimo adresář projektu.

Stisknutím kombinace Ctrl + Shift + F (případně Ctrl + Shift + J pro pokročilé hledání) lze vyvolat vyhledávání ve všech souborech.

Vyhledávání je chytré a nechá vás v textových polích pro soubory k zahrnutí (include) a vyloučení (exclude) použít zástupné znaky:

  • * = jeden nebo více znaků,
  • ? = právě jeden znak,
  • ** = nula nebo více segmentů cesty,
  • {} = skupina podmínek (např. {**/*.html, **/*.txt} označí všechny soubory HTML a TXT),
  • [] = skupina znaků (např. example.[0-9] označí example.0 i example.1 atd.).

Paleta příkazů

Nenápadně schovaná, aby nepřekážela při psaní, ale zároveň všestranně užitečná, je paleta příkazů (Command Palette). Otevře se klávesovou zkratkou Ctrl + Shift + P.

Začnete-li psát jméno souboru, VS Code ho najde a umožní otevřít. Napíšete-li "git", nabídne vám příkazy pro práci s Gitem. A nebudete-li si vědět rady, napište prostě "?" a poradí vám, co dál.

Podpora kódování

Jako každý správný editor i VS Code umí pracovat s různými kódováními textu. Podpora je velmi široká a dá se nastavit globálně nebo pro aktuálně otevřené prostředí (workplace). Když otevřete Preferences -> User Settings, případně Preferences -> Workplace Settings, nevybafne na vás dialogové okno, jak byste u Visual Studia možná čekali, ale otevře se definice ve formátu JSON. Tímto způsobem se konfiguruje celý editor a nemusíte se děsit - VS Code dokáže povolené hodnoty napovídat.

Parametr, který nás zajímá u kódování, se jmenuje files.encoding.

Vybrané kódování ukazuje stavová lišta:

Editace

Co by to bylo za editor, kdyby neuměl... editovat, že? VS Code přebírá některé zajímavé funkce od svého staršího bratříčka a některé rozvíjí svým způsobem.

Závorkování

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

Výběr a multi-kurzor

Kdyby vám jeden kurzor v textu nestačil (což může nastat častěji, než si možná myslíte), můžete pomocí Alt + kliknutí přidat další (vykreslí se tence). Všechny kurzory se pak pohybují společně.

K čemu je to dobré? Když například máte několik řádků, do nichž potřebujete doplnil stejný text, ale pokaždé na jinou pozici (typicky se to stává třeba u CSV souborů, kde sloupce v textové podobě "nelícují").

Klávesové zkratky pro práci s kurzorem:

  • Ctrl + D = označí slovo,
  • Ctrl + K, Ctrl + D = preskočí na další výskyt vybraného,
  • Ctrl + F2 = označí slovo, v němž je kurzor, a každý jeho výskyt,
  • Ctrl + Shift + L = označí výskyt každého fragmentu, který je právě označen.

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

Rychlé rozšíření nebo zúžení výběru se dá provést stitknutím Shift + Alt + šipka doleva a Shift + Alt + šipka doprava.

IntelliSense

Obyčejné doplňování slov umí VS Code vždy (v jakémkoliv textovém souboru), ale pro jazyky, jako je JavaScript, JSON, HTML, CSS, Less, Sass, C# a TypeScript, poskytuje navíc IntelliSense. Kouzelný nástroj, bez něhož si programátoři zvyklí na Visual Studio nebovedou představit existenci, analyzuje kód, který píšete, a nabízí možnosti doplnění relevantní pro daný úsek - názvy tříd, metody apod.

Ručně se dá IntelliSense vyvolat pomocí Ctrl + mezerník, výběr potvrdíte pomocí tečky, Tab nebo Enter. Našeptávač podporuje notaci CamelCase, takže můžete psát jen velká písmena toho, co hledáte - např. "wl" doplní WriteLine.

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 zkratky Emmet

VS Code obsahuje zabudované snippety (tedy krátké kousky kódu, které často opakujete) pro různé jazyky, včetně možnosti definovat si vlastní. Podporuje také zkratky Emmet, které můžete klávesou Tab "rozbalit" v jazycích HTML, Razor, CSS, Less, Sass, XML a Jade.

Funkce "jít na definici"

Pokud to jazyk podporuje, můžete pomocí F12 přejít na definici symbolu. Stisknete-li Ctrl a přejedete myší nad symbolem, zobrazí se v plovoucím okně. Rychlý přechod na definici provedete pomocí Ctrl + klik, případně si ji můžete otevřít v dalším okně editoru pomocí Ctrl + Alt + klik.

Funkce "otevřít symbol podle jména"

V C# a TypeScriptu můžete k navigaci mezi symboly použít Ctrl + T. Potom začněte psát jméno symbolu a editor vám nabídne výsledky napříč soubory v otevřené složce. 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 začne po straně ukazovat barevné anotace.

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

A proč gutter? Protože okap :)

Rychlé náhledy

Rychlé náhledy (peek) slouží k tomu, abyste pro rychlé zorientování nemuseli přepínat na jiný soubor a měnit tak kontext. Můžete použít Shift + F12 pro hledání referencí nebo Alt + F12 pro náhledové zobrazení definice.

Peek navíc není jenom na dívání, ale dá se v něm i editovat.

Hover

Pro jazyky, které to podporují, ukazuje VS Code při přejetí myší užitečné informace. Na obrázku vidíte příklad s CSS, kde se ukázal HTML kód, který odpovídá definici.

Informace o referencích

C# podporuje zobrazování inline informací o referencích, takže lze na první pohled zjistit, kolikrát je na daný prvek kdekoliv v kódu odkazováno.

Kliknutí na anotaci dané reference vyhledá a ukáže (umí to také Shift + F12).

Přejmenování symbolu

TypeScript a C# podporují 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. Indikuje je ikonka žárovky, která po kliknutí nabídne vhodnou akci. V následujícím příkladu je __dirname vestavěná proměnná Node.js, takže VS Code nabídne stažení a přidání reference na node.d.ts (definiční soubor, který pak používá IntelliSense).

Závěrem

Visual Studio Code je editor vhodný převážně pro webové vývojáře - je na něm znát silná orientace na JavaScript, Node.js, HTML, CSS, markdown apod. Nebojí se platforem mimo Windows a dokáže vývojářům dát do rukou nástroje, které byly dosud doménou pouze "velkého" Visual Studia. A to jsme se vůbec nedotkli funkcí, které na rozdíl od editace nejsou tak vidět - ladění, automatizace a přizpůsobování...

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
4 hlasy
Google
(fotka) Martin ŠimečekPracuje v českém Microsoftu a zaměřuje se na technologie pro vývojáře. Jeho denním chlebem je setkávání s vývojáři velkých i menších firem, startupy a jednotlivci. Kromě toho přednáší, nahrává videa, píše a programuje. A ještě je i korektor, knihomol, geocacher, gamer, plavec a cyklista.
Web     Twitter     LinkedIn    

Nové články

Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý