Vzhled VSCode za pár minut!

Mám ráda vizuálně hezké věci a proto přizpůsobení dev prostředí je samozřejmost. Přestože je na internetu nespočet návodů a článků, jak si nastavit hezký vzhled aplikací, rozhodla jsem se sepsat přehled toho, co používám ve VSCode, aby byl hezčí. Následující obsah je zaměřený pouze na vzhled, jiné vychytávky/pluginy samozřejmě používám taky 😁.

Barevné schéma

Must have záležitost, kterou je potřeba udělat hned při prvním spuštění VSCode 😁. Na stránce VSCodeThemes lze najít nekonečné množství barevných setů pro přizpůsobení programu. Pro aktivaci už jen pak stačí kliknout na barevné téma, spustit ve VSCode, nainstalovat a případně nastavit přes klávesovou zkratku Shift ⌘ P a pak ⌘ T (Preferences: Color Theme)

Ikonky

Další možností jak si přizpůsobit vzhled prostředí je změna ikon, které se zobrazují ve sloupci u názvů jednotlivých souborů. Typ ikonky závisí na příponě souboru a ve výchozím nastavení jsou… nudné 😅! Největšími hvězdami mezi pluginy s ikonkami je VSCode-Icons a Material Icon Theme, které si stáhlo miliony uživatelů.

Material Icon Theme vs. VSCode-icons

Bracket Pair Colorizer, Highlight Matching Tag a další pluginy

Účel těchto dvou pluginů je především praktický. Určitě se každému nejednou stalo to, že se ve velkém množství závorek nebo tagů nebyl schopen rychle zorientovat a najít druhou závorku nebo tag do dvojice.

Jak už z názvu napovídá, plugin Bracket Pair Colorizer barevně odlišuje páry závorek. Pomocí Highlight Matching Tag pluginu je pak snadno viditelný druhý otevírací/uzavírací párový tag. Oba dva tyto pluginy si lze pak ještě více přizpůsobit svým preferencím v souboru settings.json podle dokumentace zveřejněné na stránce každého pluginu.

Bracket Pair Colorizer a Highlight Matching Tag

Dalšími, velmi užitečnými, pluginy, které používám často jsou:

• Git Lens: má několik funkcí, ale já nejčastěji využívám funkci pro zobrazení poslední úpravy kódu na řádku (podle Gitu),
• Todo tree: jednoduchý seznam TODO nebo FIXME poznámek zobrazený v bočním panelu,
• Indent rainbow: plugin pro vizuální zobrazení odsazení v kódu, skvělý pro orientaci v kódu, kde je spousta tagů a elementů,
• Auto close tag: jak už název napovídá, automatické uzavírání tagů.

Terminál

Ačkoliv jsem zvyklá terminál používat ,,externě”, nedávno se mi osvědčilo jej používat i přímo z vývojového prostředí. Následující řádky jsou specifické pro ZSH (jak si nakonfigurovat ZSH na stanici je pěkně popsáno tady a spoustu nápadů na vlastní konfiguraci najdete zde tady), nicméně podobný postup by měl být aplikovatelný i pro Bash.

Pro nastavení ZSH jako výchozího termínálu ve VSCode stačí přidat do settings.json (pro MacOS: Shift ⌘ P ➡️ Preferences: Open Settings (JSON)) tyto řádky:

"terminal.integrated.shell.osx": "/bin/zsh", // nastavi ZSH jako interni terminal
"terminal.integrated.fontFamily": "nazev fontu", // nastavi font family pro terminal

❗️Řádek s definicí fontu je neméně důležitý pro správné zobrazení fontu, zejména pokud používáte v promptu ikonky❗️

Barevné schéma ZSH terminálu pak koresponduje s barevným nastavením celého prostředí podle vybraného schématu. I tyto barvy je možné individuálně upravit a to vložením těchto parametrů:

"workbench.colorCustomizations": {
    "terminal.foreground": "barva", // kod barvy v #hex
    "terminalCursor.background": "barva",
    "terminalCursor.foreground": "barva",
    "terminal.ansiBlack": "barva",
    "terminal.ansiBlue": "barva",
    "terminal.ansiBrightBlack": "barva",
    "terminal.ansiBrightBlue": "barva",
    "terminal.ansiBrightCyan": "barva",
    "terminal.ansiBrightGreen": "barva",
    "terminal.ansiBrightMagenta": "barva",
    "terminal.ansiBrightRed": "barva",
    "terminal.ansiBrightWhite": "barva",
    "terminal.ansiBrightYellow": "barva",
    "terminal.ansiCyan": "barva",
    "terminal.ansiGreen": "barva",
    "terminal.ansiMagenta": "barva",
    "terminal.ansiRed": "barva",
    "terminal.ansiWhite": "barva",
    "terminal.ansiYellow": "barva"
},

I pro tuto část konfigurace je pro inspiraci k dispozici pomocník ve formě barevných setů na této stránce (tyto schémata jsou k dispozici i přes plugin VSCode Terminal Themes, tím pak odpadá nutnost kopírování do settings.json souboru, ale dle mého názoru je pro tento účel zbytečné si instalovat další plugin).

✏️ Font

EDIT: Jsem hlava děravá a úplně jsem zapomněla v první verzi zmínit přizpůsobení fontu v editoru. Ve VSCode je možné používat tzv. ligatury nebo-li slitky, svaznice. Jde o spojení dvou znaků do jednoho. Ve VSCode jde většinou především o fancy operátory, šipky a podobně 😁.

VSCode s fontem Fira Code

Mně se osvědčilo použití Fira Code fontu. Stačí nainstalovat podle instrukcí (pro Mac doporučuji nainstalovat přes brew) a (opět) do souboru settings.json přidat:

"editor.fontFamily": "'Fira Code'",
"editor.fontLigatures": true,

nebo v případě Macu:

"editor.fontFamily": "FiraCode-Retina",
"editor.fontLigatures": true,

Můj setup

Schéma: Dracula Falcon
Ikonky: Material Icon Theme
Bracket Pair Colorizer: ✅
Highlight Matching Tag: ✅
Font: Fira Code
Terminál: ZSH, barevné schéma Hopscotch

Konfiguraci v JSON naleznete zde.

Vizuální nastavení mého VSCode

Máte další nápady a tipy, jak si přizpůsobit VSCode po vizuální stránce? Dejte vědět v komentářích 😊!