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 jedno z najlepszych rozszerzeń do vs code
która pozwoli nam zsynchronizować ustawienia szablony zainstalowane dodatki
skróty klawiaturowe i wszystko inne pomiędzy kilkoma maszynami
nazywa on się settings sync okej
został znaleziony możemy go zainstalować i powita nas taki welcome
screen gdzie musimy zalogować się na github i dlatego że te wszystkie pliki o
których mówię będą przechowywane w formie tak zwanej gistów na githubie a więc
muszę to tutaj kliknąć i zalogować się na github i po zalogowaniu
musimy jeszcze zautoryzować ten właśnie dodatek klikając
na ten zielony przycisk okej no i możemy zamknąć tą zakładkę wrócimy
sobie tutaj klikniemy tutaj skip to możemy już zamknąć i
teraz pokażę ci w jaki sposób możemy wysłać ustawienia więc
wystarczy że przyjdziemy do command palette wpiszemy sync i tutaj mamy z tym przedrostkiem
sync wszystkie możliwe komendy jakie są dla tego właśnie
dodatku i klikniemy sobie update upload settings
poczekamy chwilę i debug console nam się pojawi i za moment
okej tutaj klikniemy yes za pierwszym
razem i jak widzisz debug console
nam się tutaj po pojawił czyli mamy output i widzimy co
dokładnie się wydarzyło jeżeli teraz przejdę na githuba przejdę
do swoich gistów czyli tutaj your gists to
jak widzisz mamy tutaj coś takiego cloud settings jeżeli tutaj przejdziemy to jest tutaj kilka
plików i na przykład wszystkie ustawienia tutaj są które mieliśmy wszystkie dodatki
wszystkie ustawienia które pozmienialiśmy i tak dalej i dzięki temu właśnie
ten dodatek pozwala to pobrać na innej maszynie więc teraz
w jaki sposób możemy to zrobić przyjdziemy sobie do windowsa i
jestem w windowsie w vs code na początek sobie zainstalujemy ten dodatek sync settings
sync install okej powita nas podobny jak wcześniej
welcome screen więc musimy się zalogować przez githuba tutaj
nas pyta czy chcemy tak zaufamy tej domenie przejdę na github
zaloguję się na swoje konto jak
widzisz udało się zautoryzować w tym dodatku możemy zamknąć tą zakładkę
i tutaj już nas pyta o gista zobacz że został znaleziony
ten gist wgrany przed momentem mogę tutaj kliknąć klikniemy
close tab i teraz wystarczy
że wpiszemy w command palette sync download settings
wciśniemy enter i za moment tutaj właśnie w output pokaże nam się
wszystko co się dzieje wszystkie dodatki zostaną pobrane które mieliśmy na tamtym komputerze
i zostaną ustawione wszystkie takie same ustawienia czy
na przykład skróty klawiaturowe co ważne vs code jest świadom tego że pewne
skróty klawiaturowe na windowsie i na macu są inne więc jeżeli na macu sobie
ustawię coś na command to na windowsie oczywiście też będzie to działać ale
z controlem i jak widzisz w tym
momencie zmieniło nam się już całe tło czyli został ustawiony odpowiedni szablon
i od tej pory możemy sobie tutaj coś pozmieniać w ustawieniach i
wybrać z command pelette upload settings a
na innym komputerze pobrać lub możemy nawet ustawić automatyczne uploadowanie
gdybyśmy przeszli do preferencji i tutaj
wyszukamy sync to gdzieś tutaj będziemy mieli
jak widzisz autodownload czy autoupload możesz sobie to skopiować
do opcji i ustawić ja zazwyczaj sobie to wysyłam automatycznie jakoś
tak z przyzwyczajenia ale nic nie stoi na przeszkodzie aby również to tutaj sobie ustawić
przy okazji chciałbym ci pokazać jeszcze jeden fajny dodatek dlatego wrócimy do poprzedniego
edytora na macu i jak przejdziemy sobie do naszych ustawień to
wiemy że one wyglądają w ten sposób i niekoniecznie są posortowane
alfabetycznie i ja lubię to mieć to mieć posortowanie alfabetyczne z tego powodu że łatwiej mi jest
coś tutaj znaleźć a mam u siebie tych ustawień więcej niż jest tutaj dlatego pokażę ci jeszcze
fajny dodatek nazywa się json sort to
jest ten dodatek zainstalujemy go sobie i
teraz co ja robię zazwyczaj jak to sobie wysłać ustawienia otóż przechodzę
do tych ustawień zaznaczam wszystko co jest tutaj command shift p żeby przejść do palety
i wpisuję sort i mamy sort json zauważ że wszystko zostało
posortowane teraz alfabetycznie mogę zapisać i dopiero później robi
sobie upload ale możesz ustawić sobie automatyczny bo pewnie ma to więcej sensu żeby
o tym wszystkim nie musisz myśleć teraz zostało to wszystko wysłane
i na drugim komputerze znowu możemy sobie to pobrać jak
zatem widzisz bardzo przyda ten dodatek i jest to jeden z tych dodatków które uważam że są konieczne
do zainstalowania żeby nie stracić wszystkich swoich ustawień