Przydatne tricki w VS Code

Visual Studio Code to lekki i szybki edytor tekstowy, posiada wiele wbudowanych funkcji, o których możesz nie wiedzieć.

StackOverflow od kilku lat prowadzi ankiety wśród programistów, aby dowiedzieć się jakie panują trendy. Ankieta w 2021 roku pokazuje jak bardzo VS Code jest popularny. W ankiecie głos zabrało ponad 82 tyś programistów z całego świata (możliwy był wybór kilku opcji).

Jak widać przewaga VS Code jest kolosalna, o dziwo Sublime Text dość nisko, nie sądziłem, że Notepad++ jest jeszcze tak popularny :)

Również używam VS Code, kiedyś więcej, obecnie przeskakuję pomiędzy VS Code oraz WebStorm, którego również polecam.

StackOverflow - Ankieta 2021

Wracając do tricków, nie będzie to odkrycie Ameryki, możliwe, że wszystkie rzeczy, które tutaj przeczytasz już znasz, jeśli nie to daj znać, która rzecz jest według Ciebie najciekawsza.

Fragmenty (Code Snippets)

Jeśli często używasz tego samego lub podobnego kodu, to code snippets będą dla Ciebie idealne. Świetnym przykładem może być media query w CSS. Rzadko korzystam z Bootstrapa czy innych frameworków CSS, więc wszystkie CSSy piszę sam. Oczywiście mam już pewne standardy i nie przepisuję kodu nawigacji po raz 100, jednak zawsze trzeba coś dopisać, dostosować do innej rozdzielczości.

Fragment to gotowy kawałek kodu, który możesz w łatwy sposób wywołać za pomocą ustalonego przez Ciebie skrótu. W moim przypadku skrót to mq. Po wpisaniu mq VS Code automatycznie mi dodaje fragment w wybranym przeze mnie miejscu.

VS Code- Fragment 1

VS Code widzi mój fragment, wystarczy kliknąć TAB i kod, który widzisz w czarnym okienku doda się do mojego pliku CSS.

VS Code- Fragment 2

VS Code- Mixin 1

Mój fragment posiada zmienne, dlatego pierwszy argument jest pusty, abym mógł zdefiniować minimalną szerokość. Mój mixin do media query widzisz powyżej, tam zdefiniowałem sobie szerokości pod nazwami, tablet, tabletw oraz desktop.

Po ponownym kliknięciu TAB przenosimy się do środka naszego @include a tam już normalnie tworzymy własne CSSy. Easy!

Jak dodać nowy snippet?

W VS Code, na dole po lewej stronie masz ikonkę ustawień, kliknij w nią i wybierz User Snippets / Fragmenty. Zobaczysz listę wszystkich fragmentów, w tym miejscu możesz również dodać swój własny snippet. Możesz stworzyć globalny fragment lub tylko dla wybranego projektu.

VS Code- Snippet 1

Podajemy nazwę naszego nowego fragmentu i klikamy enter, utworzy się nowy plik z taką zawartością:

VS Code- Snippet 2

Jest tutaj sporo skomentowanego tekstu aby wyjaśnić Ci co zmienić, aby wszystko działało. Pokażę Ci jak wygląda mój fragment dla media query.

VS Code- Snippet 3

include breakpoint = to nazwa mojego fragmentu.

scope = wspierane języki dla naszego fragmentu (scss, javascript itd).

prefix = tutaj ważne, czyli kombinacja klawiszy przez które nasz fragment się pojawi.

body = treść naszego fragmentu, możesz wpisać tutaj dowolną treść, która pojawi się po wpisaniu naszego prefixu. $1 to zmienna, pojawi się tam kursor, aby wpisać własną wartość - tłumaczyłem to troszkę wyżej.

description = opis naszego fragmentu.

Zapisz plik i właśnie stworzyłeś swój pierwszy fragment! Otwórz teraz plik np. SCSS i wypróbuj go :)

Wiele kursorów

Wyobraź sobie sytuację, w której masz sporo tego samego tekstu, np. ścieżkę do obrazków, do każdej z tych ścieżek musisz dodać ../. Wiele kursorów pomoże Ci w tym zadaniu. Przytrzymaj OPT(osx) / ALT(windows) + kliknij w wybrane miejsce aby dodać nowy kursor.

Zen Mode

Chcesz się jeszcze bardziej skupić na pracy? Włącz Zen Mode, który wyłącza panel boczny oraz górny, zostaje tylko Twój kod. Aby włączyć tryb Zen kliknij ctrl + K, po czym puść ctrl i kliknij Z

Kliknij dwa razy ESC i powróć do normalnego widoku.

VS Code- Zen Mode

Terminal

CTRL J włączy terminal, już nie musisz odpalać kolejnej aplikacji, aby wysłać zmiany na github. Terminal w VS Code działa bardzo płynnie, oraz świetnie współpracuje np z ZSH.

Szybkie wyszkiwanie plików

Jeżeli pracujesz nad sporym projektem i nie chce Ci się szukać plików po folderach, to opcja szybkie wybiernie plików jest dla Ciebie. Na klawiaturze wybierz CTRL P i zacznij wpisywać nazwę pliku.

Powójny widok plików

Często aby zaoszczędzić czas robię "split" plików, czyli po jednej stronie mam np. plik SCSS, a po prawej JS.

VS Code- Split

Podsumowanie

Zapewne jest jeszcze wiele skrótów, których nie znam, jednak te, które przedstawiłem Ci dzisiaj na prawdę poprawiaja mi pracę, szczególnie fragmenty. Mam nadzieję, że czegoś się dziś nauczyłeś! 🙂