Základní úpravy

Visual Studio Code je především editor a obsahuje funkce potřebné pro vysoce produktivní úpravy zdrojového kódu. Toto téma vás seznámí se základy editoru a pomůže vám začít pracovat s kódem.

Klávesové zkratky

Možnost mít při psaní kódu ruce na klávesnici je pro vysokou produktivitu klíčová. VS Code má bohatou sadu výchozích klávesových zkratek a také umožňuje jejich přizpůsobení.

• Reference klávesových zkratek – Stažením referenčního listu se naučíte nejčastěji používané a oblíbené klávesové zkratky.
• Instalace rozšíření klávesové mapy – Používejte klávesové zkratky svých starých editorů (například Sublime Text, Atom a Vim) ve VS Code instalací rozšíření klávesové mapy.
• Přizpůsobení klávesových zkratek – Změňte výchozí klávesové zkratky tak, aby vyhovovaly vašemu stylu.

Vícenásobné výběry (více kurzorů)

VS Code podporuje více kurzorů pro rychlé současné úpravy. Pomocí klávesové zkratky Alt+klik můžete přidat sekundární kurzory (vykreslené tenčeji). Každý kurzor pracuje nezávisle na kontextu, ve kterém se nachází. Běžný způsob, jak přidat další kurzory, je pomocí ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) nebo ⌥⌘ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up), které vkládají kurzory pod nebo nad.

Poznámka: Ovladač vaší grafické karty (například NVIDIA) může tyto výchozí zkratky přepsat.

⌘D (Windows, Linux Ctrl+D) vybere slovo v místě kurzoru nebo další výskyt aktuálního výběru.

Tip: Další kurzory můžete přidat také pomocí ⇧⌘L (Windows, Linux Ctrl+Shift+L), který přidá výběr při každém výskytu aktuálního vybraného textu.

Modifikátor více kurzorů

Pokud chcete změnit modifikátorovou klávesu pro použití více kurzorů na Cmd+Kliknutí v systému MacOS a Ctrl+Kliknutí v systémech Windows a Linux, můžete tak učinit pomocí nastavení editor.multiCursorModifier. To umožňuje uživatelům přicházejícím z jiných editorů, jako je Sublime Text nebo Atom, nadále používat modifikátor klávesnice, který znají.

Nastavení lze nastavit na:

• ctrlCmd – Mapuje se na Ctrl v systému Windows a Cmd v systému MacOS.
• alt – Stávající výchozí Alt.

Pro rychlé přepnutí tohoto nastavení existuje také položka nabídky Použít Ctrl+klik pro více kurzorů v nabídce Výběr.

Gesta Přejít na definici a Otevřít odkaz budou toto nastavení také respektovat a přizpůsobí se tak, aby nedocházelo k jejich konfliktu. Například při nastavení ctrlCmd lze více kurzorů přidat pomocí Ctrl/Cmd+kliknutí a otevření odkazů nebo přechod na definici vyvolat pomocí Alt+kliknutí.

Zmenšit/rozšířit výběr

Rychle zmenšit nebo rozšířit aktuální výběr. Spouští se pomocí ⌃⇧⌘← (Windows, Linux Shift+Alt+Left) a ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right).

Tady je příklad rozšíření výběru pomocí ⌃⇧⌘→ (Windows, Linux Shift+Alt+Pravá):

Sloupcový (krabicový) výběr

Umístěte kurzor do jednoho rohu a pak držte Shift+Alt a přetáhněte do protějšího rohu:

Poznámka: Při použití kláves Ctrl/Cmd jako modifikátoru pro více kurzorů se tento postup změní na Shift+Ctrl/Cmd.

V systému MacOS a Windows existují také výchozí vazby kláves pro výběr sloupců, nikoli však v Linuxu.

Klíč	Příkaz	ID příkazu
⇧⌥⌘↓ (Windows Ctrl+Shift+Alt+Down, Linux )	Výběr sloupce dolů	cursorColumnSelectDown
⇧⌥⌘ (Windows Ctrl+Shift+Alt+Up, Linux )	Výběr sloupce nahoru	cursorColumnSelectUp
⇧⌥⌘← (Windows Ctrl+Shift+Alt+Left, Linux )	Výběr sloupce vlevo	cursorColumnSelectLeft
⇧⌥⌘→ (Windows Ctrl+Shift+Alt+Prava, Linux )	Výběr sloupce doprava	cursorColumnSelectRight
⇧⌥⌘PageDown (Windows Ctrl+Shift+Alt+PageDown, Linux )	Column Select Page Down	cursorColumnSelectPageDown
⇧⌥⌘PageUp (Windows Ctrl+Shift+Alt+PageUp, Linux )	Column Select Page Up	cursorColumnSelectPageUp

Pokud chcete, můžete své keybindings.json upravit tak, aby se vázaly na něco známějšího.

Režim výběru sloupců

Uživatelské nastavení Editor: Výběr sloupců řídí tuto funkci. Jakmile je tento režim zadán, jak je uvedeno ve stavovém řádku, gesta myši a klávesy se šipkami standardně vytvoří výběr sloupce. Tento globální přepínač je rovněž přístupný prostřednictvím položky nabídky Výběr > Režim výběru sloupců. Kromě toho lze režim výběru sloupců ze stavového řádku také vypnout.

Uložit / Automatické uložení

Ve výchozím nastavení vyžaduje VS Code pro uložení změn na disk explicitní akci ⌘S (Windows, Linux Ctrl+S).

Je však snadné zapnout funkci Auto Save, která uloží změny po nastavené prodlevě nebo při opuštění fokusu editoru. Se zapnutou volbou není třeba soubor explicitně ukládat. Nejjednodušší způsob, jak zapnout Auto Save, je pomocí přepínače Soubor > Automatické ukládání, který zapíná a vypíná ukládání po určité prodlevě.

Pro větší kontrolu nad Auto Save otevřete nastavení Uživatel nebo Pracovní prostor a najděte související nastavení:

• files.autoSave:
• afterDelay – ukládání souborů po nastavené prodlevě (výchozí 1000 ms).
• onFocusChange – pro ukládání souborů při přesunu fokusu mimo editor špinavého souboru.
• onWindowChange – pro ukládání souborů při přesunu fokusu mimo okno VS Code.

files.autoSaveDelay: Konfiguruje zpoždění v milisekundách, když je files.autoSave nakonfigurováno na afterDelay. Výchozí hodnota je 1000 ms.

Hot Exit

VS Code si ve výchozím nastavení pamatuje neuložené změny souborů při ukončení. Horké ukončení se spustí, když je aplikace ukončena pomocí Soubor > Ukončit (Kód > Ukončit v systému MacOS) nebo když je zavřeno poslední okno.

Horké ukončení můžete nakonfigurovat nastavením files.hotExit na následující hodnoty:

• "off":
• "onExit": Horké ukončení se spustí při zavření aplikace, tj. při zavření posledního okna v systému Windows/Linux nebo při spuštění příkazu workbench.action.quit (z palety příkazů, klávesové zkratky nebo nabídky). Všechna okna bez otevřených složek budou obnovena při příštím spuštění.
• "onExitAndWindowClose": Hot exit se spustí při zavření aplikace, tj. při zavření posledního okna ve Windows/Linuxu nebo při spuštění příkazu workbench.action.quit (z palety příkazů, klávesové zkratky nebo nabídky), a také pro každé okno s otevřenou složkou bez ohledu na to, zda se jedná o poslední okno. Všechna okna bez otevřených složek budou při dalším spuštění obnovena. Chcete-li obnovit okna složek tak, jak byla před vypnutím, nastavte hodnotu window.restoreWindows na all.

Pokud se při horkém ukončení něco pokazí, jsou všechny zálohy uloženy v následujících složkách pro standardní umístění instalace:

• Windows %APPDATA%\Code\Backups
• macOS $HOME/Library/Application Support/Code/Backups
• Linux $HOME/.config/Code/Backups

Najít a nahradit

VS kód umožňuje rychle najít text a nahradit jej v aktuálně otevřeném souboru. Stisknutím klávesy ⌘F (Windows, Linux Ctrl+F) otevřete v editoru widget Najít, výsledky hledání se zvýrazní v editoru, přehledovém pravítku a minimapě.

Pokud je v aktuálně otevřeném souboru více než jeden odpovídající výsledek, můžete stisknutím kláves Enter a ⇧Enter (Windows, Linux Shift+Enter) přejít na další nebo předchozí výsledek, když je zaostřeno vstupní pole pro hledání.

Vyplnění vyhledávacího řetězce z výběru

Při otevření widgetu Hledat se automaticky doplní vybraný text v editoru do vstupního pole hledání. Pokud je výběr prázdný, do vstupního pole se místo něj vloží slovo pod kurzorem.

Tuto funkci lze vypnout nastavením editor.find.seedSearchStringFromSelection na false.

Najít ve výběru

Ve výchozím nastavení jsou operace hledání prováděny na celém souboru v editoru. Lze je spustit také na vybraném textu. Tuto funkci můžete zapnout kliknutím na ikonu hamburgeru na widgetu Najít.

Pokud chcete, aby to bylo výchozí chování widgetu Najít, můžete nastavit editor.find.autoFindInSelection na always, nebo na multiline, pokud chcete, aby se spouštěla pouze na vybraném textu, když je vybráno více řádků obsahu.

Pokročilé možnosti hledání a nahrazování

Kromě hledání a nahrazování pomocí prostého textu má widget Najít také tři pokročilé možnosti hledání:

• Případné hledání
• Případné hledání celého slova
• Pravidelný výraz

Ve vstupním poli pro nahrazování je podpora zachování velikosti písmen, můžete ji zapnout kliknutím na tlačítko Zachovat velikost písmen (AB).

Podpora víceřádkového textu a změna velikosti widgetu Najít

Vložením textu do vstupního pole Najít a Nahradit můžete vyhledávat víceřádkový text. Stisknutím klávesy Ctrl+Enter vložíte do vstupního pole nový řádek.

Při vyhledávání dlouhého textu může být výchozí velikost widgetu Najít příliš malá. Přetažením levého křídla můžete widget Find Widget zvětšit nebo jej dvojitým kliknutím na levé křídlo maximalizovat či zmenšit na výchozí velikost.

Vyhledávání napříč soubory

VS Code umožňuje rychle prohledávat všechny soubory v aktuálně otevřené složce. Stiskněte ⇧⌘F (Windows, Linux Ctrl+Shift+F) a zadejte hledaný výraz. Výsledky hledání jsou seskupeny do souborů obsahujících hledaný výraz s uvedením shody v každém souboru a jeho umístění. Rozbalením souboru zobrazíte náhled všech shod v daném souboru. Poté klikněte jedním tlačítkem myši na některý ze zásahů a zobrazte jej v editoru.

Tip: Podporujeme také vyhledávání pomocí regulárních výrazů ve vyhledávacím poli.

Pokročilé možnosti vyhledávání můžete nastavit kliknutím na elipsu (Přepnout podrobnosti vyhledávání) vpravo pod vyhledávacím polem (nebo stisknutím ⇧⌘J (Windows, Linux Ctrl+Shift+J)). Zobrazí se další pole pro konfiguraci vyhledávání.

Rozšířené možnosti vyhledávání

Ve dvou vstupních polích pod vyhledávacím polem můžete zadat vzory, které chcete zahrnout nebo vyloučit z vyhledávání. Pokud zadáte example, bude to odpovídat všem složkám a souborům s názvem example v pracovním prostoru. Pokud zadáte ./example, bude to odpovídat složce example/ na nejvyšší úrovni pracovního prostoru. Pro oddělení více vzorů použijte ,. Cesty musí používat přední lomítka. Můžete také použít globální syntaxi:

• * pro přiřazení jednoho nebo více znaků v segmentu cesty
• ? pro přiřazení jednoho znaku v segmentu cesty
• ** pro přiřazení libovolného počtu segmentů cesty, včetně žádného
• {} pro seskupení podmínek (například {**/*.html,**/*.txt} odpovídá všem HTML a textovým souborům)
• pro deklaraci rozsahu znaků, které mají být porovnány (example. pro porovnání na example.0, example.1, …)

VS kód ve výchozím nastavení vylučuje některé složky, aby se snížil počet výsledků vyhledávání, které vás nezajímají (např: node_modules). Otevřete nastavení a změňte tato pravidla v části files.exclude a search.exclude.

Všimněte si, že globální vzory v zobrazení vyhledávání fungují jinak než v nastaveních, jako jsou files.exclude a search.exclude. V nastavení musíte použít **/example, aby odpovídala složce s názvem example v podsložce folder1/example v pracovním prostoru. V zobrazení vyhledávání se předpokládá předpona **.

Všimněte si také tlačítka Použít nastavení vyloučení a přepínače Ignorovat soubory v poli Soubory k vyloučení. Přepínač určuje, zda se mají vyloučit soubory, které jsou ignorovány vašimi .gitignore soubory a/nebo odpovídají vašim files.exclude a search.exclude nastavením.

Tip:

Vyhledávání a nahrazování

Můžete také vyhledávat a nahrazovat napříč soubory. Rozbalením widgetu Hledat zobrazíte textové pole Nahradit.

Při zadávání textu do textového pole Nahradit se zobrazí rozdílové zobrazení čekajících změn. Můžete nahradit ve všech souborech z textového pole Nahradit, nahradit vše v jednom souboru nebo nahradit jedinou změnu.

Tip: Pomocí ↓ (Windows, Linux dolů) a (Windows, Linux nahoru) můžete rychle znovu použít předchozí hledaný výraz a procházet historii hledaných výrazů.

IntelliSense

Vždy budeme nabízet doplňování slov, ale u bohatých jazyků, jako jsou JavaScript, JSON, HTML, CSS, SCSS, Less, C# a TypeScript, nabízíme skutečné doplňování IntelliSense. Pokud jazyková služba zná možná doplnění, při psaní se objeví návrhy IntelliSense. Vždy je můžete spustit ručně pomocí ⌃Mezerník (Windows, Linux Ctrl+Mezerník). Ve výchozím nastavení se jako spouštěče akceptují klávesy Tab nebo Enter, ale tyto vazby kláves můžete také přizpůsobit.

Tip: Filtrování návrhů podporuje CamelCase, takže můžete zadat písmena, která jsou v názvu metody velká, a omezit tak návrhy. Například „cra“ rychle vyvolá „createApplication“.

Tip: Návrhy IntelliSense lze nakonfigurovat pomocí nastavení editor.quickSuggestions a editor.suggestOnTriggerCharacters.

Vývojáři jazyků JavaScript a TypeScript mohou využít úložiště souborů deklarace typů (typings) npmjs a získat IntelliSense pro běžné knihovny JavaScriptu (Node.js, React, Angular). Dobré vysvětlení používání souborů deklarace typů najdete v tématu Jazyk JavaScript a v tutoriálu Node.js.

Další informace najdete v dokumentu IntelliSense.

Formátování

VS Code má skvělou podporu formátování zdrojového kódu. Editor má dvě explicitní formátovací akce:

• Formátovat dokument (⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)) – formátování celého aktivního souboru.
• Formátovat výběr (⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)) – formátování vybraného textu.

Můžete je vyvolat z palety příkazů (⇧⌘P (Windows, Linux Ctrl+Shift+P)) nebo z kontextové nabídky editoru.

VS Code má výchozí formátovače pro JavaScript, TypeScript, JSON a HTML. Každý jazyk má specifické možnosti formátování (například html.format.indentInnerHtml), které můžete vyladit podle svých preferencí v nastavení uživatele nebo pracovního prostoru. Výchozí formátovač jazyka můžete také vypnout, pokud máte nainstalováno jiné rozšíření, které poskytuje formátování pro stejný jazyk.

"html.format.enable": false

Kromě ručního vyvolání formátování kódu můžete formátování vyvolat také na základě uživatelských gest, jako je psaní, ukládání nebo vkládání. Ve výchozím nastavení jsou tato chování vypnuta, ale můžete je povolit prostřednictvím následujících nastavení:

• editor.formatOnType – Formátovat řádek po napsání.
• editor.formatOnSave – Formátovat soubor při uložení.
• editor.formatOnPaste – Formátovat vložený obsah.

Poznámka: Ne všechny formátovače podporují formátování při vložení, protože k tomu musí podporovat formátování výběru nebo rozsahu textu.

Kromě výchozích formátovačů můžete na Tržišti najít rozšíření pro podporu dalších jazyků nebo formátovacích nástrojů. K dispozici je kategorie Formatters, takže můžete snadno vyhledávat a nacházet rozšíření pro formátování. Do vyhledávacího pole zobrazení rozšíření zadejte „formatters“ nebo „category:formatters“ a zobrazí se filtrovaný seznam rozšíření v rámci VS Code.

Skládání

Oblasti zdrojového kódu můžete skládat pomocí ikon skládání na žlábku mezi čísly řádků a začátky řádků. Přesunutím myši nad žlábek a kliknutím na něj můžete oblasti skládat a rozkládat. Pomocí Shift + kliknutí na ikonu skládání složíte nebo rozložíte oblast a všechny oblasti uvnitř.

Můžete také použít následující akce:

• Skládání (⌥⌘ (Windows, Linux Ctrl+Shift+])) rozloží sbalenou oblast u kurzoru.
• Přepnout složit (⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)) složí nebo rozloží oblast na kurzoru.
• Složit rekurzivně (⌘K ⌘ (Windows, Linux Ctrl+K Ctrl+])) rozloží oblast na kurzoru a všechny oblasti uvnitř této oblasti.
• Složit vše (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) složí všechny oblasti v editoru.
• Složit vše (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) rozloží všechny oblasti v editoru.
• Složit úroveň X (⌘K ⌘2 (Windows, Linux Ctrl+K Ctrl+2) pro úroveň 2) složí všechny oblasti úrovně X kromě oblasti na aktuální pozici kurzoru.
• Složit všechny blokové komentáře (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) složí všechny oblasti, které začínají tokenem blokového komentáře.

Skládání oblastí se ve výchozím nastavení vyhodnocuje na základě odsazení řádků. Oblast skládání začíná, když má řádek menší odsazení než jeden nebo více následujících řádků, a končí, když existuje řádek se stejným nebo menším odsazením.

Od verze 1.22 lze oblasti skládání vypočítávat také na základě syntaktických značek nastaveného jazyka editoru. Následující jazyky již umožňují skládání s vědomím syntaxe: Markdown, HTML, CSS, LESS, SCSS a JSON.

Pokud dáváte přednost přepnutí zpět na skládání založené na odsazení pro jeden (nebo všechny) z výše uvedených jazyků, použijte:

 "": { "editor.foldingStrategy": "indentation" },

Regiony lze také definovat pomocí značek definovaných jednotlivými jazyky. V současné době jsou definovány značky pro následující jazyky:

Jazyk	Začáteční region	Koncový region
Bat	::#region nebo REM #region.	::#endregion nebo REM #endregion
C#	#region	#endregion
C/C++	#pragma region	#pragma endregion
CSS/Less/SCSS	/*#region*/	/*#endregion*/
Coffeescript	#region	#endregion
F#	//#region nebo (#_region)	//#endregion nebo (#_endregion)
Java	//#region nebo //<editor-fold>	// #endregion nebo //</editor-fold>
Markdown	<!-- #region -->	<!-- #endregion -->
Perl5	#region nebo =pod	#endregion nebo =cut
PHP	#region	#endregion
PowerShell	#region	#endregion
Python	#region nebo # region	#endregion nebo # endregion
TypeScript/JavaScript	//#region	//#endregion
Visual Basic	#Region	#End Region

Pro skládání a rozkládání pouze oblastí definovaných značkami použijte:

• Složit oblasti vymezené značkami (⌘K ⌘8 (Windows, Linux Ctrl+K Ctrl+8)) složí všechny oblasti vymezené značkami.
• Složit oblasti značek (⌘K ⌘9 (Windows, Linux Ctrl+K Ctrl+9)) rozloží všechny oblasti značek.

Odsazení

VS Code umožňuje ovládat odsazení textu a to, zda chcete použít mezery nebo zarážky tabulátoru. Ve výchozím nastavení VS Code vkládá mezery a používá 4 mezery na klávesu Tabulátor. Pokud chcete použít jiné výchozí nastavení, můžete upravit nastavení editor.insertSpaces a editor.tabSize.

 "editor.insertSpaces": true, "editor.tabSize": 4,

Autodetekce

VS Code analyzuje otevřený soubor a určí odsazení použité v dokumentu. Automaticky zjištěné odsazení přepíše vaše výchozí nastavení odsazení. Zjištěné nastavení se zobrazuje na pravé straně stavového řádku:

Klepnutím na zobrazení odsazení na stavovém řádku vyvoláte rozevírací seznam s příkazy odsazení, které vám umožní změnit výchozí nastavení pro otevřený soubor nebo převést mezi zarážkami tabulátoru a mezerami.

Poznámka: Automatická detekce VS Code kontroluje odsazení o velikosti 2, 4, 6 nebo 8 mezer. Pokud váš soubor používá jiný počet mezer, odsazení nemusí být správně rozpoznáno. Pokud je například vaší konvencí odsazovat 3 mezerami, možná budete chtít vypnout editor.detectIndentation a explicitně nastavit velikost tabulátoru na 3.

 "editor.detectIndentation": false, "editor.tabSize": 3,

Podpora kódování souborů

Kódování souborů můžete nastavit globálně nebo pro jednotlivé pracovní oblasti pomocí nastavení files.encoding v Nastavení uživatele nebo Nastavení pracovní oblasti.

Kódování souborů můžete zobrazit ve stavovém řádku.

Kliknutím na tlačítko kódování ve stavovém řádku můžete aktivní soubor znovu otevřít nebo uložit s jiným kódováním.

Pak vyberte kódování.

Základní uživatelské rozhraní jste probrali – ve VS Code je toho mnohem víc. Čtěte dále a dozvíte se o:

• Úvodní video – Nastavení a základy – Podívejte se na výukový program o základech VS Code.
• Nastavení uživatele/pracovního prostoru – Naučte se konfigurovat VS Code podle svých preferencí prostřednictvím nastavení uživatele a pracovního prostoru.
• Navigace v kódu – Definice Peek and Goto a další.
• Integrovaný terminál – Seznamte se s integrovaným terminálem pro rychlé provádění úloh příkazového řádku z prostředí VS Code.
• IntelliSense – VS Code přináší inteligentní doplňování kódu.
• Ladění – Zde VS Code skutečně září.

Časté otázky

Je možné globálně vyhledávat a nahrazovat?

Ano, rozšiřte textové pole Zobrazení hledání o pole pro nahrazení textu. Můžete vyhledávat a nahrazovat ve všech souborech v pracovním prostoru. Všimněte si, že pokud jste neotevřeli VS Code ve složce, hledání se spustí pouze v aktuálně otevřených souborech.

Jak zapnu obtékání slov?

Obtékání slov můžete ovládat prostřednictvím nastavení editor.wordWrap. Ve výchozím nastavení je editor.wordWrap off, ale pokud jej nastavíte na on, text se bude obtékat na šířku zobrazovací plochy editoru.

 "editor.wordWrap": "on"

Obtékání slov pro relaci VS Code můžete přepnout pomocí ⌥Z (Windows, Linux Alt+Z).

Do editoru můžete také přidat svislá sloupcová pravítka pomocí nastavení editor.rulers, které přebírá pole pozic znaků sloupců, ve kterých chcete mít svislá pravítka.

.