Kódím.cz
1

Instalace nástrojů

Před tím, než začneme tvořit weby, je potřeba si počítač vybavit nástroji, které nám usnadní práci.

Visual Studio Code

logo 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 HelpAbout, v dialogovém okně by se měla zobrazit verze 1.75.1 nebo novější. Pokud máte starší verzi, zvolte v menu HelpCheck 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.

Rozšíření

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 ViewCommand Palette... a do vyhledávacího políčka napište

Open Settings

a vyberte položku Preferences: Open User Settings (JSON) viz obrázek.

Nastavení

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í FileSave.

{
  "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"
}