Visual Studio CodeGit - GitHubReactJSHTML CSSNew

Visual Studio Code

VS CODE

Připravil jsem pro vás materiály pro správné používání Visual Studia Code.

Editace kódu

10

Formátuje kód

Shift + Alt + F

Formátuje kód dle nastavené preference. Je třeba mít nainstalovaný Prettier nebo jiný formátovač.

Editace kódu

10

Zakomentování a odkomentování

Ctrl + ´

Vloží komentář na vše co je označené - stejně komentář i odstraní

Obecné

10

Rychlé otevření souboru

Ctrl + P

Okno pro zadání názvu souboru a následné zobrazní ve VS Code

Obecné

10

Příkazové okno

Ctrl + Shift + P

F1

Okno pro spouštění příkazů VS Code, není terminál!

Editace kódu

9

Kurzo na další řádek

Ctrl + Enter

Přepne kurzor o jeden řádek níže.

Obecné

9

Seznam klávesových zkratek

Ctrl + K + Ctrl + S

Otevře editační seznam klávesových zkratek

Obecné

9

Nastavení uživatele

Ctrl + ,

Spustí okno s nastavením uživatele VS Code

Obecné

9

Zavře okno

Ctrl + Shift + W

Zavře okno VS Code

Obecné

9

Nové okno

Ctrl + Shift + N

Otevře nové okno VS Code pro práci na jiném projektu.

Terminál

8

Zobrazí terminál

Ctrl + ;

Zbrazí okno s terminálem.

Editace kódu

8

Vyhledání

Ctrl + F, Ctrl + H

Vyhledá řetězec - následně je možné všechny nalezené řetězce nahradit jiným.

Editace kódu

8

Smaže celý řádek

Ctrl + Shift + K

Smaže obsah celého řádku, na kterém se nachází kurzor

Editace kódu

7

Přejmenování

F2

Označení text a všechny texty, které mají stejné znaky přejmenuje - pouze v daném souboru.

Navigace

6

Další error nebo warning

F8

Přejde na další error nebo warning pokud v projektu je.

Navigace

6

Přejít na daný řádek

Ctrl + G

Přejde na číslo zadaného řádku.

Soubory

5

Otevře soubor

Ctrl + O

📂

Soubory

5

Uloží soubor

Ctrl + S

💾

VS Code Extension

Auto Close Tag

HTML

Automaticky uzavře HTML tag.

MarketPlace

Začátečník

1

VS Code Extension

Auto Rename Tag

HTML

Automaticky mění druhý z párového tagu, dle změn v prvním.

MarketPlace

Začátečník

1

VS Code Extension

Bracket Pair Colorizer 2

Kód

Zbarvuje všechny páry závorek, tak aby bylo jasně zřetelná, kde závorka začíná a kde má konec.

MarketPlace

Začátečník

1

VS Code Extension

Material Icon Theme

VS Code

Šablona pro změnu designu VS Code.

MarketPlace

Začátečník

1

VS Code Extension

Path Intellisense

Kód

Zobrazuje při importování souborů projektu cestu k danému souboru včetně ostatních složek a souborů.

MarketPlace

Začátečník

1

VS Code Extension

Peacock

VS Code

Jednoduše nastaví různé barvy pro projekty - při více otevřených VS Code najednou zlepšuje přehlednost v jakém projektu se nacházíte.

MarketPlace

Začátečník

1

VS Code Extension

Prettier - Code formatter

Kód

Formátuje zdrojové kódu různých jazyků - formátovací zkratka defaultně Shift + Alt + F

MarketPlace

Začátečník

1

VS Code Extension

HTML CSS Support

HTML

Napovídá CSS třídy a ID do HTML dle importovaného CSS v projektu.

MarketPlace

Začátečník

1

VS Code Extension

GitLens — Git supercharged

Git

Umožňuje lépe porozumět kódu, zobrazuje detailní informace o historii souboru.

MarketPlace

Mírně pokročilý

2

VS Code Extension

change-case

Kód

Mění názvy proměnný, funkcí a dalších textů dle zvolené konvence - camelCase, PascalCase, aj.

MarketPlace

Mírně pokročilý

2

VS Code Extension

JavaScript (ES6) code snippets

JavaScript

Snippety - zkratky pro rychlejšího JS kódu ve formátu ES6

MarketPlace

Pokročilý

3

VS Code Extension

Live Sass Compiler

CSS

Kompiluje po uložení .SCSS kód do .CSS

MarketPlace

Pokročilý

3

VS Code Extension

Import Cost

Optimalizace

Zobrazuje infromace o velikosti přidané knihovny.

MarketPlace

Všeználek

4

VS Code Extension

Thunder Client

HTTP

API

HTTP dotazy přímo z VS Code, alternativa Postman

MarketPlace

Všeználek

4

VS Code Extension

ES7 React/Redux/GraphQL/React-Native snippets

JavaScript

Snippety - zkratky pro rychlejší psaní kódu pro ReactJS

MarketPlace

Webař

5

VS Code Extension

Next.js snippets

JavaScript

Snippety - zkratky pro rychlejšího vytváření kódu ve frameworku Next.JS

MarketPlace

Profík

6

VS Code Extension

Apollo GraphQL

JavaScript

Zjedodušuje práci s GraphQL a psaní Query nebo Mutation.

MarketPlace

Profík

6

Kompletní série od instalace, přes nastavení až po klávesové zkrátky.

CZ

Tipy a vychytávky pro práci s VS Code.

EN

Automatická synchornizace nastavení, klávesových zkratek, rozšíření VS CODE! 🔥

EN