VSCode

web.edumach.cz

Nastavení pro HTML/CSS

Jako editor pro psaní kódu budeme používat Visual Studio Code (VSCode). Stručně: lepší editor neseženete. Funguje ve Windows, macOS i Linuxu. Podporu HTML i CSS má integrovanou přímo v základu. Mnoho užitečných doplňků (Extensions). Průběžný pravidelný vývoj. To vše bezplatně.

🌐 https://code.visualstudio.com/

1. Projekt

VSCode není pouze editor, ale i správce souborů. Psaní kódů často vyžaduje pracovat s více soubory. Všechny tyto soubory máme v jedné složce, kterou nazýváme "projekt". Jak ho vytvořit:

  1. Ve počítači si vytvořte novou složku.
  2. Otevřete ji přes File → Open Folder.

Sice to není nezbytně nutné, ale důrazně doporučuji si vytvořit jednu hlavní složku, např. HTML a v ní pak vytvářet podsložky, každou pro jeden projekt.

Nyní můžete spravovat všechny soubory a složky vašeho "projektu" nebo vytvářet nové:

Pravým klikem se zpřístupní možnosti jako Rename, Delete, Cut a Copy.

2. Základní nastavení

2.1. Automatické ukládání

Téměř povinné nastavení. Je velmi návykové. File → Auto Save. Nastavení je platné i po novém spuštění editoru.

2.2. Zalamování dlouhých řádků

2.3. Našeptávač kódu

VSCode má už v základu zabudovaný "našeptávač" kódu s integrovanou nápovědou. Navíc jde aktivovat i podrobnější nápověda. Ta se jednou zapne, pak je stále aktivní. Stačí při zápisu libovolné značky kliknout na šipku vpravo:

Tím se začne zobrazovat podrobnější nápověda (syntaxe) ke značkám:

Kliknutím na x se zase vypne. Někdy naopak spíš překáží než pomáhá.

2.3.1. Online nápověda

Po najetí myší na jakýkoliv element HTML jde v zobrazené bublině kliknout na odkaz MDN Reference, který zobrazí stránku s dokumentací příslušného prvku včetně interaktivních ukázek. Luxusněji a pohodlněji už to nejde:

2.4. Velikost písma (volitelně)

Pomocí zkratek Ctrl+= a Ctrl+- zvětšujete/zmenšujete velikost všech prvků celé aplikace. Reset na výchozí velikost pomocí Ctrl+0 (nula).

Samotné písmo editoru: ⚙️ → Settings → do pole hledání zadejte "font size":

2.5. Hezčí ikony souborů

VSCode obsahuje mnoho doplňků se sadami ikon souborů. Moje oblíbená sada je vscode icons. Hezká sada je také Material. Není to ani tak o vzhledu ("aby to bylo hezčí"), ale spíše o přehlednosti. To časem poznáte sami.

⚙️ → Themes → File Icon Themes:

3. Užitečná rozšíření (extensions)

3.1. Prettier - Code Formatter

Při psaní nebo vkládání kódu HTML nebo i CSS se nevyhneš stavu, kdy výsledek nebude vypadat hezky. Sice to prohlížeči nevadí, ale bude to vadit tobě. Už jen proto, že v kódu je docela dost různých zanoření. VSCode nabízí jednoduchý způsob, jak kód "zkulturnit" příkazem Format document.

Nejprve si nainstaluj doplněk Prettier - Code Formatter:

Autoformat aktivuješ buď zkratkou Ctrl+Shift+P nebo F1 a do pole zapiš "Format document" a potvrď OK. To je celé 🙂

TIP: Opakované rychlé formátování spustíš zkratkou, která je vidět vedle "recently used".

3.2. Auto Rename Tag

Automaticky změní název i druhé značky

3.3. Open in Default Browser

Pravým tlačítkem myši se zpřístupní možnost otevřít soubor ve výchozím prohlížeči.

3.4. Live Preview

Lokální server pro živý náhled webu v prohlížeči na adrese http://127.0.0.1:3000

Ve VSCode pak klepni na jeden z html souborů. V pravém horním rohu se zobrazí ikona rozděleného okna s lupou. Klepni na ni. V pravé části okna se zobrazí živý náhled kódu.

3.5. Image Preview

Najetím myší na odkaz zobrazí náhled obrázku včetně jeho rozměrů.

4. Emmety

Emmety jsou něco jako zkratky, které vám do kódu vloží požadované fragmenty kódu.

Běžné značky vytvoříte tak, že napíšete jejich název a klepnete na Enter. Např:

Celá řada dalších možností se vám rozbalí v našeptávači:

Existují i pokročilejší možnosti emmetů:

Možností je opravdu hodně. Dostupná je i verze PDF ke stažení. Interaktivní dokumentace je na docs.emmet.io/.

4.1. Kostra HTML 5 dokumentu

Velice užitečným Emmetem je možnost vložit kompletní kostru HTML 5 dokumentu doslova na dvě klepnutí do klávesnice: ! → Enter:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Stačí jen upravit

4.2. Odstavce s výplňovým textem

Odstavec s výplňovým textem vložíte pomocí emmetu p → lorem a Enter:

🌐 Co je Lorem ipsum

5. Vypnutí kontroly vztahu důvěryhodnosti

Pokud váš "otravuje" neustálé schvalování, že editovaný soubor je bezpečný:

⚙️ → Settings → Security → Workspace → vypnout volbu Trust Enabled:

Změna si vynutí restart VSCode.

6. Synchronizace nastavení mezi počítači

Výhodou ve VSCode je, že si veškerá nastavení můžete synchronizovat mezi všemi počítači, kde jej používáte. Stačí vlevo dole kliknout na ikonu postavy a přihlásit se svým školním účtem (Microsoft):

7. Smazání profilu VSCode

VSCode je stabilní s průběžnou aktualizací. Problémy se vyskytují jen velmi zřídka. Osobně se mi ještě nikdy nestalo, že by havaroval nebo něco nefungovalo.

Pokud se ale přeci jen problém vyskytne, řešením je resetovat VSCode do výchozího nastavení. To spočívá ve smazání složky s nastavením ve vašem uživatelském profilu.

7.1. Windows

Pokud není, ukončete VSCode. Ve správci souborů (Průzkumník Windows) zapište do pole adresa systémovou proměnnou %AppData% a potvrďte klávesou Enter. V otevřené složce smažte složku Code. To je vše.

7.2. macOS

Pokud není, ukončete VSCode pomocí ⌘Q. Spusťte aplikaci Terminal. Zkopírujte do něj tento příkaz:

rm -rf "~/Library/Application Support/Code"

Co příkaz dělá:

Tímto příkazem se smaže celý profil VSCode, včetně všech nastavení a rozšíření. Buďte opatrný, protože smazané soubory již nebudete moci obnovit (mazání příkazem rm je nevratné).