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+
Przejdźmy teraz do tego w jaki sposób wije vs code pokazuje nam
że coś się dzieje w naszym repozytorium po pierwsze jak możesz zobaczyć widzimy tutaj takie
m to oznacza modified czyli że plik został zmodyfikowany a
nie jest zapisany w repozytorium jeżeli byśmy sobie przeszli teraz na
przykład tutaj do app i jeżeli coś bym tutaj zmienił na
przykład mieliśmy coś takiego jak v if zmienię to na false tutaj zauważ
że od razu nam się tutaj pokazuje coś takiego to oznacza że w tej linijce coś
zostało względem ostatniego commita z repozytorium zmienione i możemy
tutaj kliknąć i to co jest super to nam od razu pokaże różnicę czyli minus
to jest co to zniknęło a plus to co się pojawiło od razu można zobaczyć różnicę
i co ciekawe tutaj od razu są pewne opcje które pozwalają nam na przykład dodać
tą zmianę do tego staging area czyli do takiej poczekalni
aby później ją zacommitować możemy wycofać zmiany możemy tutaj przejść do
kolejnych zmian lub zamknąć ten panel również przyciskiem escape jeżeli wcisnę tutaj revert change
to zauważ że wycofamy tę zmianę czyli wrócimy do stanu jaki był w
ostatnim commicie jeżeli natomiast znowu byśmy sobie tutaj coś zmienili zapisze
i od razu nam tutaj git pokaże że mamy ten plik zmodyfikowany
przejdę do panelu właśnie source control czyli command
shift g nacisnąłem u siebie przypomnę jeszcze że domyślny skrót
znajdziesz tutaj pod scm i widzimy teraz że mamy zmiany
w dwóch plikach i mogę albo dodać jeden plik i zacommitować bo czasami tak się zdarza że
faktycznie pozmieniamy sporo plików ale uznamy że żeby te commity miały sens
to tylko jakaś zmiana z jednego pliku powinna wylądować w commicie a
inne były przy okazji i chcemy na przykład zrobić je w kolejnym commicie to możemy
dodać poszczególne pliki w ten sposób na przykład dodam ten plik i on teraz jest w tym staging
area jak widzisz jeżeli zdecyduję że chcę go stąd usunąć mogę to zrobić ale
pokażę ci jeszcze jak tutaj sobie wpiszemy git status tak jak byśmy to robili ręcznie
że faktycznie mamy jeden plik zmodyfikowany i nie dodany drugi już dodaliśmy do
staging area jeżeli go stąd wycofam i znowu tutaj zrobię git status
to widzimy że dwa pliki są zmodyfikowane mogę również dodać wszystkie pliki
czyli stage all changes i wtedy
te wszystkie pliki tutaj się pojawią na zielono co ważne jeżeli na
tym etapie byśmy uznali że jednak tych zmian nie chcemy commitować tylko chcemy je wycofać
to możemy sobie tutaj kliknąć i wybrać coś takiego jak discard all
changes jeżeli tutaj to zrobimy okej prawdopodobnie
nic się nie zmieni ale to dlatego że te pliki są w staging area czyli najpierw byśmy
sobie zrobili jeszcze raz unstage all changes okej
i teraz widzimy że tutaj dalej to jest zmodyfikowane tak jak było i teraz możemy zrobić
discard all changes zobacz powie nam że w dwóch plikach
będziemy mieli jakieś zmiany więc możemy to zrobić i zauważ że powróciło
nam do takiego stanu jak mieliśmy wcześniej jeżeli natomiast chciałbym
tutaj to zmienić i uznam że ten plik zacommituję dodamy go
i powiemy tutaj powiedzmy change v if
zacommitujemy to sobie jest to już w repozytorium jeżeli teraz
chciałbym cofnąć tą zmianę to discard all changes nic nam nie da
dlatego że nie mamy żadnych aktywnych zmian ale wtedy możemy cofnąć o jeden commit wybierając
tutaj na przykład undo last commit i zauważ że wtedy uda nam
się cofnąć i ten plik będzie miał status zmodyfikowany tak
to będzie wyglądać jeżeli sobie przejdziemy do tego pliku tutaj mamy true a
tutaj mamy false jeżeli zobaczymy tutaj git status to okaże się że właśnie
w staging area jest ten plik wyciągnięty z ostatniego commita czyli cofnęliśmy
ostatni commit w naszym systemie plików cały czas jest ten który mamy tutaj z false
oznacza to tylko tyle że jeżeli ten plik teraz stąd wyciągnę wrócmy
sobie do app to ten plik jest teraz traktowany jako zmodyfikowany
bo cofnęliśmy ostatni commit w którym było true tutaj mamy false i teraz
możemy wybrać sobie discard all changes zobacz
i wrócimy do wartości true gdybyśmy tutaj zrobili git log
to jak widzisz mamy teraz tylko jeden initial
commit bo o cały jeden commit się cofnęliśmy w ten zatem sposób możesz po
pierwsze widzieć zmiany jakie są w plikach jeżeli zmodyfikujesz jakąś linijkę
to będziesz to widział możesz je dodawać do staging area i commitować
natomiast w kolejnej lekcji pokażę ci jak te zmiany synchronizować ze zdalnym repozytorium