Visual Studio Code
Visual Studio Code je textový editor specializovaný na psaní programů a vývoj software. Obsahuje spoustu pomůcek, nástrojů a rozšíření, která zjednodušují programátorům život a umožňují jim spravovat obsáhlé projekty. VS Code je v současné době jedním z nejpoužívanějších programátorských editorů a mnoho profesionálů jej používá při své práci každý den.
Aktuální verzi editoru si nanistalujte podle instrukcí na oficiálních stránkách. VS Code je dostupný pro všechny operační systémy.
Pokud máte VS Code nainstalován z dřívějška, zkontrolujte, že máte nejnovější verzi. Z hlavního menu vyberete Help → About (na Windows a Linuxu) nebo Code , → About Visual Studio Code (na Macu), v dialogovém okně by se měla zobrazit verze 1.97.0 nebo novější. Pokud máte starší verzi, zvolte v menu Help → Check for Updates…, VS Code na pozadí stáhne novou verzi a nabídne její aktualizaci.
Poznámka na okraj: Visual Studio Code a Visual Studio jsou dva úplně jiné programy. My budeme používat pouze ten první, jehož název se často zkracuje jen na VS Code, ale nikdy ne na Visual Studio.
VS Code – Extensions
VS Code lze přizpůsobit instalací různých rozšíření, které vývojářům poskytují nové možnosti a usnadňují jim práci. Rozšíření nainstalujete tak, že kliknete na ikonu rozšíření (Extensions) v levém panelu okna VS Code. Případně můžete zmáčknout klávesovou zkratku Ctrl + Shift + X (na Windows či Linuxu) nebo Command + Shift + X (na Macu).
Poté do okna pro vyhledávání (Search Extensions in Marketplace) zadáte název příslušného rozšíření.
Pro webovou akademii doporučujeme použití následujících rozšíření.
- Prettier - Automaticky formátuje váš kód tak, aby vypadal hezky a „profesionálně“ 🙂. Budeme jej používat na jazyky jako HTML, CSS, JavaScript, JSON a další.
- Thunder Client - Díky tomuto rozšíření se vám bude lépe pracovat s API v pozdějších lekcích JavaScriptu.
Nastavení VS Code
Aby se nám s VS Code pracovalo dobře a zároveň nám všem fungovalo stejně, je potřeba provést základní nastavení. Z hlavního menu vyberete View → Command Palette... (nebo klávesová zkratka Ctrl + Shift + P resp. Command + Shift + P, tahle zkratka se bude hodit i později) a do vyhledávacího políčka napište
Open Settings
a vyberte položku Preferences: Open User Settings (JSON) viz obrázek.
Otevře se okno editoru. Jeho obsah smažte a místo něj vložte následující text. Nezapomeňte poté soubor uložit pomocí File → Save.
{
"window.zoomLevel": 0,
"files.autoSave": "off",
"files.eol": "\n",
"files.insertFinalNewline": true,
"editor.tabSize": 2,
"editor.links": false,
"editor.renderWhitespace": "boundary",
"editor.wordWrap": "on",
"editor.fontSize": 16,
"editor.multiCursorModifier": "alt",
"editor.formatOnSave": true,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
},
"prettier.singleQuote": true,
"prettier.arrowParens": "always",
"prettier.trailingComma": "all"
}