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 jak w vs code możemy porównywać dwa pliki
i jest to super przydatna rzecz do której często dawniej wykorzystywałem
dedykowane programy chciałbym sobie porównać dwa pliki php jest
to plik konfiguracyjny php ini dla wersji 73 oraz 74 przykład
z życia wzięty jakiś czas temu potrzebowałem zaktualizować wersję php chciałem
zobaczyć co między tymi plikami się zmieniło jeżeli chodzi o moje ustawienia i
przekopiować do nowszej wersji tutaj są domyślne ustawienia ale jeżeli te
dwa pliki byśmy sobie tutaj otworzyli i zaznaczymy sobie na przykład php
73 przejdziemy do command palette i wpiszemy compare to
możemy znaleźć coś takiego jak compare active file with czyli chcemy ten plik
73 porównać z 74 i otworzy nam się taki
oto widok powiększę to na cały ekran i powiem ci że to jest genialny widok
z jakiego powodu po pierwsze dlatego że dokładnie widzimy co się gdzie zmieniło czyli mogę skrolować
oba pliki na raz widzę że tu nie było żadnych zmian w tym miejscu są jakieś
zmiany to znaczy w pliku 73 który jest po lewej zostały
takie rzeczy usunięte względem pliku 74 czyli innymi słowy
te rzeczy są w pliku 73 a nie ma ich w pliku 74 w tym miejscu
i co ważne vs code zachował tutaj również taką można powiedzieć odległość
po to żeby kolejne linijki nadal się ze sobą schodziły w ten sposób wizualnie
naprawdę kapitalnie porównuje się pliki więc lecimy sobie dalej i widzimy co
się gdzie zmieniło tutaj nie ma żadnych zmian tutaj też nie tutaj
widzimy że z kolei coś zostało dodane do pliku php 74 a nie było
tego w pliku php 73 tutaj gdzie są te plusy to coś zostało
dodane poza tym wszystko jest tak samo chociaż nie ta linijka
jest czerwona znaczy że tutaj coś się zmieniło mogę skrolować sobie na bok jeżeli twoja
myszka to obsługuje jeżeli nie to na strzałkach i zobaczymy że
gdzieś jakaś zmiana jest tutaj jeśli przeskrolujemy widzimy że te
rzeczy zostały dodane nie ma ich tutaj na końcu kończyło się to na signals a tutaj dwie nowe
w zasadzie jedna nowa rzecz została dodana czyli dokładnie
naprawdę widać co się w danym pliku zmieniło idziemy sobie dalej znowu są
tutaj takie zmiany i tak dalej więc tak wygląda taki porównywanie
tutaj też widzimy że w tym pliku było coś takiego i html errors on
w tym pliku jest to zakomentowane więc nawet taka drobna zmiana najpierw
na czerwono że coś się zmieniło a po drugie tutaj taki troszkę jak widzisz jaśniejszym
kolorem ten średnik jest zaznaczony znaczy że tym się różnią te dwie
linijki niczym innym ale właśnie tym średnikiem no i jak
widzisz tak to wygląda można bardzo dokładnie powoli prześledzić sobie zmiany
w dwóch plikach więc jakie pliki będziesz chciał porównywać to już zależy od ciebie natomiast
powiem ci że jest to jedno z najlepszych narzędzi jakie możemy do tego wykorzystać
i jest to wszystko dostępne bez instalacji żadnych dodatkowych rozszerzeń na
koniec jeszcze ci pokażę jak możemy porównywać dwa pliki jak to uruchomić z
poziomu terminala poleceniem code więc to wszystko pozamykam otowrzę sobie
terminal i będąc tutaj na desktopie wpiszemy code wiesz już że tym poleceniem
można na przykład otworzyć edytor swoją drogą tutaj można wpisać help
i zobaczyć ile różnych rzeczy możemy tutaj zrobić
z pomocą tego właśnie polecenia ale ja sobie wpiszę
code minus d żeby właśnie porównać to będzie prawdopodobnie
skrót od div czyli pokaż różnicę i podamy pierwszy plik php 73
tutaj chciałbym 73 i drugi plik php 74
jeżeli wcisnę enter otworzy mi się znowu edytor vs code
i jak widzisz dokładnie taka sama porównywarka jak wcześniej więc jeżeli
jest ci wygodniej szybciej można to uruchomić z poziomu terminala