Poznaj najlepszy edytor kodu
4 godz. 1 min · HTML i CSS · Full-stack i Programowanie
Piotr PalarzWeb DeveloperW tej sekcji kursu zobaczysz jak zainstalować edytor w 3 najpopularniejszych systemach operacyjnych. Następnie poznasz główne panele tworzące interfejs VS Code, a także nauczysz się korzystać z panelu ustawień, aby w przyszłości dostosować do własnych potrzeb niemal każdy detal.
Aby praca z jakimkolwiek edytorem kodu była przyjemna, należy dostosować jego wygląd do swoich preferencji. W przypadku VS Code jest to bardzo proste, a ogrom szablonów, ikon czy dostępnych fontów zadowoli każdego. W kursie dowiesz się jak wyszukiwać i instalować szablony, jak szybko je zmieniać czy jak skonfigurować font z ligaturami.Następnie poznasz najważniejsze skróty klawiaturowe, a także sposoby na ich modyfikację lub nawet konfigurację własnych. To właśnie dzięki nim praca staje się wydajna, gdy jak najrzadziej sięgamy po myszkę.
VS Code oferuje szereg możliwości sprawnego poruszania się zarówno po całym projekcie jak i po jednym, wybranym pliku. W tej sekcji kursu zobaczysz jak szybko wyszukiwać plików i do nich przeskakiwać, jak przeszukiwać aktywny plik, a także jak korzystać z globalnej wyszukiwarki, która z czasem staje się nieodzownym narzędziem w rękach sprawnego dewelopera.Nie zabraknie również informacji o tym jak korzystać z wielu kursorów jednocześnie, jak przenosić, kopiować czy usuwać linie kodu czy szybko tworzyć całe pliki i katalogi.
Choć VS Code jest pełnoprawnym edytorem kodu już tuż po instalacji, to jego prawdziwy potencjał poznajemy dopiero wtedy, gdy przechodzimy do panelu rozszerzeń. Znajdziemy tam tysiące dodatków do tego edytora. Część z nich to szablony zmieniające jego wygląd, część do drobne narzędzia ułatwiające np. tworzenie plików, a część do prawdziwe "kombajny", np. do pracy z Gitem czy zamiany edytora w IDE dla wybranego języka.Z kursu dowiesz się jak wyszukiwać i instalować rozszerzenia, a także poznasz wiele z nich i zobaczysz jak mogą znacznie ułatwić codzienną pracę z kodem.
W tej sekcji kursu poznasz najpopularniejsze sposoby na wydajną pracę z językami HTML, CSS, JavaScript i PHP. Zobaczysz jak działa Emmet i w jaki sposób ułatwia pisanie kodu HTML i CSS, skonfigurujesz Prettier do formatowania kodu oraz narzędzie ESLint do walidacji i pilnowania standardów JavaScript.Zobaczysz również jak zamienić VS Code w prawdziwy IDE do pracy z językiem PHP, automatycznym formatowaniem kodu czy współpracy z frameworkiem Laravel.
Choć system kontroli Git jest narzędziem niezbędnym w pracy każdego programisty, większość przyznaje, że zna tylko podstawowe komendy, a gdy zachodzi potrzeba, np. wycofania zmian, szuka rozwiązania w internecie. Wszystko to za sprawą bardzo wielu komend Gita, a także ich specyficznych opcji.W kursie zobaczysz, że z poziomu VS Code można pracować z Gitem dużo prościej, w zasadzie wszystko "wyklikując". Nauczysz się tworzyć commity, synchronizować kod ze zdalnym repozytorium, porzucać zmiany, przywracać pliki czy przeglądać historię utworzonych commitów.
Kurs ten jest dla wszystkich osób, które chcą wydajniej pracować z kodem. Niezależnie czy jest to kod HTML, CSS, JavaScript, PHP czy Python, każdy z tych języków znajdzie wsparcie w Visual Studio Code. Kurs omawia edytor od podstaw, a wiedza z zakresu wymienionych wyżej języków nie jest wymagana, choć dla części z nich prezentowane są dedykowane rozwiązania.
1.42+
W tej lekcji pokażę ci w jaki sposób pracować z wbudowanym terminalem
jest to narzędzie z którego być może korzystasz jeżeli jesteś web developerem jeżeli
jeszcze się z nim nie zaprzyjaźniłeś to polecam ci przejść pod link który znajdziesz
na timeline i tam znajdziesz dwa tutoriale w których pokazuje jak zacząć
przygodę z wierszem poleceń w systemie windows lub z terminalem na macu i
również to będzie miało zastosowanie dla systemu linux więc tutaj możemy otworzyć
sobie terminal za pomocą tego domyślnego skrótu czyli control i tylda ale
ja sobie to przemapowałem do command shift t i on domyślnie otwiera się tutaj u dołu
jak widzisz to jest cały panel który ma jeszcze kilka innych zakładek i część z nich jeszcze
zobaczymy w tym kursie natomiast sam terminal jest w tym miejscu i co ważne
domyślnie jest otwierany taki sam terminal jak masz ustawiony w systemie czyli
jeżeli ja u siebie bym sobie otworzył item 2 mam taką nakładkę to
dokładnie to samo co tutaj wpisuje to będzie się działo w tym miejscu czyli tutaj
mogę sobie wylistować pliki w tym katalogu i wykonywać wszystkie te polecenia które normalnie
mogę wykonywać w systemie ja u siebie na co dzień pracuję na większym
monitorze niż ten na którym teraz nagrywam więc terminal mam z prawej strony
ale tak czy siak jak nie jest mi potrzebny to za pomocą command j go po prostu ukrywam
w tym terminalu możemy sobie oczywiście uruchomić dowolny proces
tak jak w każdym innym terminalu czyli ja mam tutaj za pomocą mpm
zainstalowany http server i mogę go sobie teraz uruchomić
na przykład w ten sposób dzięki temu w przeglądarce możemy przejść pod taki adres i
nasza strona się wyświetli to co jest ważne być może zauważyłeś to po starcie
nowego terminala jesteśmy od razu w tym katalogu jaki mamy tutaj
podpięty czyli jest to nasz ten katalog główny tak jest ustawiony terminal za
pomocą control c mogę ten proces zatrzymać i pwd pokaże nam dokładnie ścieżkę
do tego oto katalogu czyli mogę sobie na przykład tutaj uruchomić
jeden proces command k swoją drogą na macu czyści konsolę
ale tylko na macu chyba i mogę uruchomić jeden proces za pomocą command t
otworzę sobie drugą zakładkę i mam teraz już dwa terminale tu mogę robić inne rzeczy
i zazwyczaj właśnie w ten sposób pracuję aby przeskakiwać pomiędzy terminalami
jak mam tutaj dwa takie terminale można to zrobić oczywiście z użyciem myszki
ale ja preferuję kiedy nie muszę nie korzystać z myszki więc
jest do tego skrót klawiaturowy który ja u siebie tak czy siak przemapowałem na
inny więc jeżeli byśmy weszli sobie w keyboard shortcuts to
znajdziemy taką komendę jak terminal focus next i
możemy od razu tutaj dopisać terminal żeby zawęzić jeszcze te wyniki i
to jest tutaj to jest ten domyślny skrót natomiast ja u siebie go ustawiłem na inny
u mnie jest to command shift i nawias kwadratowy w
ten sposób okej i focus
previous też coś takiego powinniśmy
znaleźć terminal jest to tutaj ja sobie ustawiłem
na command shift i nawias kwadratowy w tę stronę nie dla każdego to musi być wygodne
ale jak widzimy też przy okazji nadpisałem jakieś inne skróty więc będę chciał sprawdzić command
plus shift widzisz że on tak też można wyszukiwać plus ten nawias
mieliśmy tutaj coś takiego jak open previous editor nie jest mi to
potrzebne więc jak widzisz usuwam sobie to i kolejny nawias
to będzie focus czy open next editor również sobie to usuwam dzięki
temu jak sobie teraz przejdę tutaj do terminala to za pomocą tego skrótu o którym mówiłem będę przeskakiwać
pomiędzy tymi terminalami okej wydaje się jakby coś nie działało więc
spróbujemy raz jeszcze okej znalazłem problem widzę że tutaj mam akcję
workbench action terminal focus previous panel a to nie powinna być ta
akcja to powinna być akcja focus po
prostu focus previous terminal to powinno być tutaj ustawione więc
jeszcze raz sobie to przemapuję i focus next jak widzisz należy
zwracać uwagę na to co dokładnie ustawiamy jak ja na potrzeby tego kursu po prostu
wyczyściłem wszystkie swoje ustawienia to będzie to
ustawię sobie to w ten sposób no i jeszcze żeby nie mieć konfliktu to
będę musiał usunąć te które zrobiłem
wcześniej czyli remove a jak widzisz jest to bardzo proste i
również remove teraz to powinno działać i jak widać działa jak sobie
tutaj spojrzysz to będziesz widział że zmieniają mi się te terminale
i dokładnie w taki sposób pracuję na co dzień tutaj jeszcze jedna
fajna rzecz możemy sobie tutaj zrobić taki podział tych terminali i
to będzie gdzieś tutaj czyli
split i zauważ że wtedy będziemy mieli dwa niezależne terminale po prostu
będziemy je widzieli w ten sposób więc jak widzisz tutaj jest bardzo wiele opcji dlatego
też był skrót klawiaturowy który też w razie czego można zmienić ze swojej strony
dodam tylko tyle że odkąd korzystam z edytora vs code to cały czas używam
tego wbudowanego terminala zwykłego terminala używam tylko wtedy kiedy jestem
poza projektem vs code