Przydatne funkcje Visual Studio Code

Kategorie posta: Bez kategorii
Data publikacji 14 marca 2021
Data aktualizacji 14 marca 2021
Contributors Grano22
Czas czytania 3 min - 2 min

Siemka, w tym artykule podzielę się z wami przydatnymi funkcjami w edytorze kodu Visual Studio Code. Zacznijmy od skrótowców.

Skrótowce

Wpisanie kilku słów kluczowych (Emmet Abbreviation) pozwoli wam po wspisaniu danego słowa kluczowego wygenerowanie docelowaego fragmentu. Zapewne wiele osób to zna ale może nie każdy zna te kombinacje co przedstawię.

HTML

! - Wygeneruje gotowy podstawowy szkielet HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

!!! - Wygeneruje tag informacyjny o dokumencie HTML5 (<!DOCTYPE html>)

HTML Tree Emmet - Pozwoli wygenerować strukturę drzewa HTML a pomocą nastepującej składni :

tagname#id.className[attribute1="value1" attribute2="value2" attribute3]>childtag{textContent$symbolMeanIndex}*multiplyNumber

Ciekawie się sprawdza się świetnie przy kontenerach z dużą ilością powtarzalnych elemtów. Przykład:

div[id=":D" class="ddd"]>div.me[data-index="dd$"]*3
#Da
<div id=":D" class="ddd">
    <div class="me" data-index="dd1"></div>
    <div class="me" data-index="dd2"></div>
    <div class="me" data-index="dd3"></div>
</div>

Więcej na https://docs.emmet.io/cheat-sheet/.

Przydatne skróty klawiszowe

  • Shift + F8 i F8 - Przejdź do następnego błędu
  • Shift + Alt - Zaznaczanie wieloliniowe w tej samej pozycji kursora
  • Ctrl + \ - Dzielenie okna na dwie kolejne części (Nowa karta)
  • Ctrl + B - Chowa/pokazuje lewą zakładkę menu
  • F2 - Zmienia nazwę danego wyrażenia
  • Shift + Alt + Down/Up - Kopiuje linię w dół/górę
  • Alt + Down/Up - Przenosi daną linię w dół/górę
  • Shift + alt + Left/Right - Zaznacza mniejszty/większy zakres biorąc pod uwagę ograniczniki i linie
  • Ctrl + Grawis (~) - Pokazuje i chowa terminal
  • Ctrl + Shift + M(essages) - Pokazuje logi i błędy
  • Ctrl + Allt + Left/Right - Przesuwa bierzącą zakładkę na kartę po lewo/prawo
  • Shift + Alt + F(ormat) - Formatuje kodw tym tabulatory, aby wyglądał schludnie
  • Ctrl + Shift + P(alleter) - Pokazuje pole do wpisania szybkiej komendy dla edytora
  • Ctrl + P - Utwórz/otwórz szybko ...
  • Ctrl + D - wybiera kolejne takie samo zaznaczenie

Interesujące dodatki

  • Git Automator - rób szybkie commity i push'e na github'a za pomocą skrótów klawiszowych
  • Boostrap 4 + Font Awesome 4/5 Snippet - podpowiedzi składni i emmet dla B4 i FA4/5.
  • Live Server - Uruchom łatwo lokalny serwer do testowania dynamicznych i statycznych stron
  • ftp-sync - Synchronizuj łatwo swoją pracę z serwerem FTP
  • ESLint - Ecmascript linter dla łatwego tworzenia konfiguracji schematu składni dla każdego projektu