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+
Żeby zasymulować jak kilku deweloperów pracuje nad jednym
repozytorium to będę chciał sobie to repo sklonować wybiorę tutaj na bitbuckecie clone
i teraz w terminalu będąc na desktopie wkleję to i będziemy mieli za
moment utworzony folder html app który otworzę sobie w nowej instancji
vs code więc wpiszemy code html app w
ten sposób vs code nam uruchomi i przejdziemy sobie do tego okna
będąc tutaj przejdziemy sobie na przykład do pliku app i
coś zmienimy powiedzmy że dodamy sobie tutaj zmienimy
ten alt czyli było vue logo i napiszemy sobie 2 nie musimy tutaj za dużo
kombinować ważne żeby coś się zmieniło od razu widzimy że coś zmodyfikowaliśmy
więc jak przyjdę do tego panelu source control skrótem klawiaturowym
to będę mógł te zmiany dodać wpisać tutaj na przykład change alt
desc i zapisać no i teraz będę mógł zrobić
taką rzecz jak na przykład push żeby wysłać to do zdalnego repozytorium
albo sync w tym przypadku zadziała to tak samo i
zostanie to tam wysłane czyli tutaj na razie żadnego konfliktu nie ma konflikt natomiast
pojawi się kiedy wrócimy do tego edytora i będziemy chcieli
tutaj to zmodyfikować zauważ że tutaj oczywiście te zmiany nie są wyłapane bo
należałoby najpierw zrobić pull i gdybym teraz zrobił pull nie byłoby problemu te zmiany
by tutaj były zaaplikowane natomiast jeżeli w tym samym miejscu
zmienimy to w ten sposób czy tu było vue logo 2 a my powiemy vue
logo 3 nie wiedząc że ktoś z naszego zespołu już to zmodyfikował to
jeżeli teraz będziemy chcieli takie zmiany sobie dodać i napiszemy sobie też change
powiedzmy alt description żeby
tutaj ten opis był troszeczkę inny żebyśmy to mogli rozróżnić i jeżeli teraz
stwierdzimy okej wykonaliśmy swoją pracę i chcemy te zmiany wysłać albo
jeżeli zrobimy push też będą te błędy albo jeżeli zrobimy sync to
też będą te błędy tylko jak zrobimy push to po prostu nam powie że tam
są nowsze zmiany najpierw trzeba je zaciągnąć jeżeli zrobimy sync one się pobiorą klikamy
okej to mogliśmy też kliknąć żeby już tego nie pokazywał i zauważ merge
conflicts czyli git można powiedzieć bo to nawet nie vs code
ale git nie wie co ma z tym zrobić ale w kapitalny sposób
i to jest jedna z najlepszych rzeczy w vs code ten edytor nam pokazuje zmiany dlatego
że nie wiem czy wiesz ale git takie właśnie znaczki dodaje nam do plików tekstowych i
gdybyśmy normalnie chcieli te konflikty rozwiązywać ręcznie to naprawdę byłby
to koszmar teraz nam tutaj pokazuje vs code w tych zmian może być tutaj
więcej że w naszej aktualnej tutaj zmianie my
wpisaliśmy vue logo 3 ale zmiana która do nas przyleciała można powiedzieć
czyli incoming change ona ma vue logo 2 i my musimy tutaj podjąć
decyzję bo git nie potrafi która z tych zmian powinna zostać i możemy
wybrać accept current change to jest nasza zmiana vue logo 3 albo
ta która przyszła albo obydwie albo możemy jeszcze porównać czasami
fajne jest to compare możemy sobie porównywać jeżeli w pliku jest więcej zmian zamknę
to command w albo control w i wybiorę że powiedzmy
mój kolega dokonał tutaj lepszej zmiany czyli kliknę
accept incoming change zrobimy to w ten sposób no i teraz
ten plik jeszcze musimy zapisać to jest ważne i będziemy tutaj mieli taki zmodyfikowany
plik i teraz klikniemy sobie oczywiście tutaj że chcemy to wszystko
dodać i tutaj mamy message dla commita
może w ten sposób wyglądać zaaplikujemy to sobie i w ten sposób
powinno być wszystko okej jak sobie tutaj wpiszemy git status to
nic nie mamy a git log pokaże nam merge branch master no i
okej i teraz możemy sobie kliknąć sync zobaczmy
jest okej mamy taką zmianę jak tutaj widać oczywiście
my moglibyśmy razem z tym commitem wrzucić tam inne zmiany które
niekonfliktowały i teraz ta osoba tutaj gdyby sobie kliknęła
sync to oczywiście wszystkie te jej zmiany by się jej pobrały także
jak najbardziej mogłoby tak być tylko tam gdzie git ewidentnie ma konflikt i
nie wie co zrobić prosi nas o to abyśmy to my zdecydowali jak
widzisz rozwiązywanie konfliktów nie jest takie straszne szczególnie kiedy bardzo
ładnie nam to wszystko pokazuje i formatuje vs code oraz pozwala nam wybrać
te zmiany które chcemy zaaplikować