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, v dialogovém okně by se měla zobrazit verze 1.75.1 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.
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.
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... 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"
}