Tipy pro programování ve Visual Studio Code s odečítačem na Windows

Sp

 

Pro softwarové vývojáře v systému Windows je obecně k dispozici nepřeberné množství vývojových prostředí nebo pokročilých textových editorů. Jen hrstka jich je ale natolik přístupná, aby s nimi mohli naplno počítat i programátoři, kteří využívají odečítač obrazovky. Abych vám usnadnil hledání a osvojení toho pravého řešení, sepsal jsem tento článek, který přibližuje jedno takové řešení, konkrétně aplikaci Microsoft Visual Studio code, a uvádí vlastnosti, kvůli nimž toto prostředí u mě zatím vyhrává.

Poznámky

Některé zde uvedené klávesové zkratky používají zápis ve tvaru například Control + K, Control + C, což znamená, že nejprve je třeba stisknout klávesy Control + K, pak uvolnit klávesu K a poté Se stále podrženou klávesou Control stisknout klávesu C.

Chybné čtení při navigaci po slovech

Visual Studio Code se obecně může pyšnit velmi dobrou přístupností, hned z kraje je ale třeba upozornit na jednu vadu na kráse, která se týká ne úplně vyladěné přístupnosti samotného textového editačního pole. Problém spočívá v tom, že při pohybu po slovech přes klávesy Control + šipka doprava nebo doleva v případě, kdy se v textu vyskytují určité speciální znaky jako například znaménko rovná se, odečítač nečte slova, která by měl. Konkrétně jestliže máme například řádek s textem pozdrav = “Ahoj světe“, tak odečítač při pohybu po slovech nepřečte odděleně dvě slova „pozdrav“ a poté „rovno“, ale místo toho přečte dvakrát po sobě dohromady „pozdrav rovno“.

Zapnutí režimu pro lepší přístupnost a základní navigace

Režim lepší přístupnosti lze pro Visual Studio Code zapnout, když po vyvolání jeho nápovědy pro přístupnost klávesami Alt + F1 stisknete zkratku Control + E . Nastavení lepší přístupnosti si Visual Studio Code bude pamatovat i při jeho příštím spuštění.

Pro dopřednou navigaci v uživatelském rozhraní aplikace slouží standardně tabulátor, případně pro zpětný pohyb přidejte klávesu Shift. K cyklickému pohybu mezi hlavními oblastmi prostředí aplikace, mezi něž patří například stavový řádek, použijete standardně klávesu F6, popřípadě ke zpětnému pohybu Shift + F6.

Další základní zkratkou, kterou jako uživatel ovládající Visual Studio Code výhradně pomocí klávesnice určitě budete potřebovat, je Control + M . Tato zkratka přepíná chování klávesy tabulátor v momentě, kdy je zaměřeno pole textového editoru, mezi chováním, kdy tabulátor do editoru vkládá odsazení řádku a chováním, kdy vás tabulátor přesune mimo pole textového editoru na vedlejší prvek uživatelského rozhraní.

V případě, kdy se chcete vrátit zpět do pole textového editoru, tak lze použít zkratku Control + 1.

Okno pro hledání příkazů a učení se klávesových zkratek

Důležitou klávesovou zkratkou, kterou je rovněž dobré si dobře zapamatovat, je Control + Shift + P , případně stejně funguje také F1 . Tato zkratka otevře okno pro hledání libovolného příkazu, jež Visual Studio Code nabízí. Po zadání části názvu příkazu je možné se v nalezených příkazech pohybovat šipkou dolů či nahoru a Enterem vybraný příkaz vyvolat. Například když po vyvolání tohoto okna napíšete text „accept“, tak vám mimo jiných vyběhne příkaz nazvaný „Merge Conflict: Accept Incoming“, který slouží pro přijetí příchozí konfliktující změny při slučování dvou verzí souboru ve verzovacím systému Git.

Kromě názvu vyfiltrovaných příkazů se u každého příkazu přečte také jeho klávesová zkratka, pokud ji dotyčný příkaz má. Díky tomu lze tento nástroj dobře použít i jako prostředek pro učení se klávesových zkratek.

Rychlé otevírání souborů, nedávno otevřených složek a projektů

Další užitečnou klávesovou zkratkou je Control + P . Tato zkratka vyvolá okno, v němž lze psaním vyfiltrovat seznam dostupných souborů v rámci otevřeného projektu či nedávno otevřené soubory, které po vybrání šipkou dolů nebo nahoru otevřete Enterem.

Podobně pro rychlé opětovné otevírání nedávno otevřených složek nebo projektů (workspace) slouží zkratka Control + R.

Otevírání více souborů a rychlé přepínání mezi nimi

Když v Exploreru, do něhož se dostanete přes Control + Shift + E, nebo v okně pro rychlé otevírání souborů, viz předchozí kapitola, najedete na nějaký soubor, tak je možné jej zkratkou Control + Enter otevřít vedle právě otevřeného souboru. Takto lze otevřít libovolný počet souborů vedle sebe. Toto otevírání více souborů vedle sebe se liší od klasického otevírání souborů na samostatných panelech a jeho výhodou je pro uživatele pracující přes klávesnici hlavně to, že je pak možné se mezi takto otevřenými soubory přepínat klávesovou zkratkou Control + 1,Control + 2, atd.

Nicméně i když máte otevřeno více souborů klasicky na více panelech, tak je možné se mezi nimi rychle cyklicky přepínat klávesami Control + tabulátor. Pokud po stisknutí Control + tabulátor klávesu Control podržíte, tak můžete otevřené soubory procházet šipkou dolů nebo nahoru.

Rychlý pohyb ve zdrojovém kódu

  • Pro rychlé vyhledání a přeskočení na definici požadovaného symbolu, tedy pro skok na definici hledané proměnné, funkce, třídy atd., slouží klávesová zkratka Control + Shift + O, jež vyvolá okno, ve kterém můžete klávesovou šipkou dolů nebo nahoru vybrat hledaný symbol, přičemž nabízený seznam symbolů lze vyfiltrovat vepsáním části jejich názvu a Enterem na vybraný symbol v kódu přeskočit.
  • Jestliže kurzor stojí na nějakém symbolu, tak je možné rychle přeskočit Na jeho definici zkratkou F12.
  • Pro zobrazení seznamu všech výskytů symbolu, na němž stojí kurzor, slouží zkratka Shift + F12,přičemž prohledávány jsou výskyty napříč všemi soubory právě otevřené složky či projektu. Zde je opět možné klávesovou šipkou dolů nebo nahoru vybrat požadovaný výskyt a Enterem na něj přeskočit.
  • Na požadované číslo řádku lze přeskočit pomocí zkratky Control + G.
  • Nechybí ani zkratka pro hledání textu v aktuálním souboru, Control + F, pro nahrazování textu, Control + H, a ani zkratka pro hledání textu v otevřené složce či projektu, Control + Shift + F . V momentě, kdy je dialog pro hledání otevřený, se na následující vyhledaný výskyt přesunete klávesou Enter a na předchozí klávesami Shift + Enter. Jestliže dialog pro hledání otevřený není, tak se na následující výskyt přesunete zkratkou F3 a na předchozí zkratkou Shift + F3.
  • Pro přesun na následující nebo předchozí řádek s chybou nebo varováním v aktuálním souboru slouží zkratka F8, respektive Shift + F8.
  • Na následující nebo předchozí změnu v aktuálním souboru oproti výchozímu stavu ve verzovacím systému Git slouží zkratka Alt + F5, respektive Shift + Alt + F5.
  • K přesunutí kurzoru na předchozí místo ve zdrojovém kódu, a to i napříč soubory, je možné použít klávesy Alt + šipka doleva. Na následující místo v kódu se pak kurzor přesouvá zkratkou Alt + šipka doprava.

Zabalování a rozbalování bloků kódu

Pro zabalování a rozbalování aktuálního bloku kódu, tedy bloku kódu, na kterém stojí kurzor, se používají klávesové zkratky Control + Shift + levá hranatá závorka, respektive Control + Shift + pravá hranatá závorka (jedná se o klávesy, kde se levá nebo pravá hranatá závorka vyskytují na anglické klávesnici). S odečítačem JAWS je potřeba před použitím těchto zkratek jejich klávesy propustit stisknutím JAWSKey + klávesa s číslem 3.

Pro rekurzivní zabalování a rozbalování aktuálního bloku kódu slouží zkratky Control + K, Control + levá hranatá závorka, respektive Control + K, Control + pravá hranatá závorka.

Všechny bloky kódu v aktuálním souboru lze zabalit zkratkou Control + K, Control + klávesa s číslem 0 . Všechny bloky rozbalíte přes Control + K, Control + J.

Další zkratky pro zabalování a rozbalování (folding) naleznete zde. Vězte ale, že odečítač zabalené bloky kódu bohužel nijak neohlašuje, takže se jeví, jakoby řádky mezi začátkem a koncem zabaleného bloku kódu chyběly.

Další šikovné zkratky

AkceZkratka
Posunout řádek dolůAlt + šipka dolů
Posunout řádek nahoruAlt + šipka nahoru
Duplikovat řádek dolůAlt + Shift + šipka dolů
Duplikovat  řádek nahoruAlt + Shift + šipka nahoru
Vložit prázdný řádek dolůControl + Enter
Vložit prázdný řádek nahoruControl + Shift + Enter
Smazat řádekControl + Shift + K
Zakomentovat řádkovým komentářemControl + K, C
Odkomentovat řádkový komentářControl + K, U
Přejmenovat všechny výskyty symboluF2
Zformátovat kódAlt + shift + F
Přejít na panel s chybami a varováními v aktuálním souboruControl + Shift + M
Přejít na panel verzovacího systému GitControl + Shift + G
Zobrazit nabídku doplnění kóduControl + mezerník
Zobrazit aktuální soubor v PrůzkumníkoviControl + K, R

Nastavení vlastních klávesových zkratek

Visual Studio Code umožňuje snadno nastavit vlastní klávesovou zkratku pro libovolný příkaz, který naleznete ve výše zmíněném okně pro hledání příkazů, jež vyvoláte zkratkou Control + Shift + P . K nastavení klávesových zkratek se dostanete, když v aplikačním menu zvolíte File > Preferences > Keyboard shortcuts, a poté se tabulátorem přesunete na vámi hledanou zkratku v seznamu všech zkratek, popřípadě před přesunem na seznam zkratek můžete vepsat část názvu hledané zkratky a seznam zkratek tak vyfiltrovat. Po najetí na požadovanou zkratku stiskněte Enter, poté klávesy, které chcete přiřadit, a následně opět Enter.

Doporučení na přidání vlastních klávesových zkratek

V níže uvedené tabulce naleznete doporučení na přidání vlastních klávesových zkratek, které vám usnadní práci při řešení konfliktů během slučování příchozí a lokální varianty souborů ve verzovacím systému Git.

Název zkratkyPopisDoporučená zkratka
Merge Conflict: Next ConflictPřesune kurzor na začátek následujícího konfliktu.Control + F8
Merge Conflict: Previous ConflictPřesune kurzor na začátek předchozího konfliktu.Shift + Control + F8

Usnadnění si psaní kódu pomocí jeho automatického rozšiřování zkratkami

Visual Studio Code podporuje rozšiřování kódu (code expansion) pomocí vestavěné obohacené podpory syntaxe Emmet. To znamená, že nemusíte psát celé složité konstrukty značkovacího nebo programovacího jazyka, jako celé elementy jazyka HTML, celé podmínky či cykly jazyka Javascript. Stačí napsat jistou zkratku, která v případě zkratek pro HTML vychází z CSS selektorů,  a tu automaticky rozšířit na výsledný konstrukt. Postup je následující.

Rozšiřování HTML kódu

Napište například zkratku „ul>li*3“ (bez uvozovek) a stiskněte tabulátor. Zapsaná zkratka se poté automaticky rozšíří na následující kód:

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Rozšiřování programovacího kódu

Napište například zkratku „if“ (bez uvozovek), pak šipkou dolů vyberte položku „if“ a stiskněte Enter. Zapsaná zkratka se poté automaticky rozšíří na následující kód:

if (condition) {

}

Další příklady syntaxe Emmet

Další příklady syntaxe Emmet naleznete na této oficiální dokumentaci.

Další zdroje informací

 

 



MicrosoftNástrojePřístupnostProgramováníVisual Studio CodeWindows


Adam Samec
Jako nevidomý se zajímám o asistivní technologie pro zrakově postižené. Pracuji jako lektor a tester přístupnosti v Tyflokabinetu Praha. Mým hlavním zaměstnáním je však pozice programátora, konzultanta a testera přístupnosti v Microsoftu. V článcích se zaměřuji především na produkty značky...