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 możesz dostosować niemal
każdy skrót klawiaturowy jaki znajdziesz tutaj w vs code a także
jak przypisać komendy które nie mają skrótu klawiaturowego właśnie do takiego
skrótu przejdziemy sobie do command palette czyli command shift p lub
control shift p wpiszemy sobie keyboard i zauważ że
mamy tutaj kilka pozycji nas będzie interesowało open keyboard
shortcuts jeżeli sobie tutaj przejdziemy to widzimy całą taką tabelkę
gdzie po pierwsze widać jaki jest skrót klawiaturowy po
drugie jaka jest to komenda i tu mamy coś takiego jak when co
mówi nam kiedy ten skrót ma być aktywny więc tutaj możesz sobie pozmieniać
i znajdziesz tutaj praktycznie wszystko co chciałbyś zmienić natomiast
ja pokażę ci czy powiem ci co zmieniłem u siebie pokażę
ci kilka takich przykładów nie będę przechodził przez każdy skrót który mam u siebie ustawiony na
przykład gdybyśmy przeszli do pliku javascript to możemy za pomocą command
i backslash czy w zasadzie slash zwykły
slash wykomentować jakiś fragment i ja jestem przyzwyczajony do tego skrótu
jeszcze z czasów kiedy korzystałem z edytora sublime text natomiast tam miałem również
skrót kiedy nacisnąłem command alt i również ten slash że
tworzyło mi taki komentarz i jak możemy znaleźć go w command palette
i będzie to block comment czyli coś takiego i nie mamy
tutaj takiego skrótu chciałbym sobie go jednak ustawić dlatego wyszukamy
sobie tutaj block command i zauważ że oczywiście znajdziemy coś
takiego i jest tutaj skrót shift alt a on mi nie odpowiada
więc będę chciał go po prostu zmienić i wystarczy tutaj dwukrotnie nacisnąć i
zmienię sobie to właśnie na command alt i taki oto slash
teraz enterem zatwierdzamy jeżeli wrócę do tego pliku to
dokładnie w taki sposób jak widzisz mogę utworzyć taki blokowy komentarz więc
to jest jeden z przykładów jak możemy zmienić sobie skrót i jeśli chodzi
o inne to na przykład ja chciałbym otwierać terminal skrótem który dla ciebie
może być niewygodny dla mnie jest intuicyjny jest to command shift t więc
zobaczmy sobie tutaj terminal wyszukamy i to będzie
prawdopodobnie toggle terminal i jak widzisz tutaj mamy ten skrót
z którego korzystaliśmy czyli control i taki back tick będę chciał sobie
go zmienić i ja go ustawię na command shift oraz t wciskam
enter ale jeszcze zanim to zrobię to jak widzisz jedna jakaś inna komenda również
korzysta z takiego skrótu więc będziemy musieli zobaczyć jaka jest to komenda
i tutaj z kolei będziemy to mogli wyszukać w ten sposób
a że wpiszemy po prostu cmd
shift t powinno nam to również znaleźć jak
widać tak jest to reopen closed editor nie jest mi to potrzebne dlatego
albo możemy to zmienić na inny skrót albo po prostu kliknąć prawym przyciskiem i wybrać remove
key binding i on po prostu nam tutaj zniknie czyli przestał
być przypisany ale wciąż moglibyśmy tej komendy wyszukać i sobie to przepisać więc
teraz jeżeli wcisnę command shift t to będzie mi się otwierał terminal który się tutaj
znajduje jeżeli wcisnę jeszcze raz to będzie on zamykany i jeszcze
raz go otwieram i teraz jeżeli przejdę na przykład do tego edytora i wcisnę command shift t to
zostanie zrobiony tutaj focus na tenże terminal nie zostanie on zamknięty teraz
będąc tutaj w terminalu chciałbym sobie otworzyć na przykład nową zakładkę i ja jestem
przyzwyczajony do command t lub na przykład control t na windowsie tak jak otwieramy
nowe karty na przykład w przeglądarce internetowej natomiast tutaj jeżeli sobie wcisnę command t to
jak widzisz przeszliśmy to jakieś palety symboli będziemy później jeszcze z tego korzystać ale
ja wolę to mieć pod innym skrótem więc pokażę ci jak można tutaj ustawić skrót żeby
tworzyć nowe zakładki przejdziemy tutaj i wyszukamy sobie terminal
tab i może znajdziemy coś takiego albo
terminal new zobaczmy i to jest dokładnie ta akcja więc
też będę chciał zmienić ten skrót i zmienimy go na command t widzimy
że znowu mamy jakąś konfliktującą akcję więc za moment sobie
ją usuniemy natomiast chciałbym tutaj dodać jeszcze warunek when dlatego
że command t chcę żeby mi otwierał nową kartę terminala nową zakładkę ale
wyłącznie kiedy tutaj terminal jest aktywny niekiedy jestem na przykład tutaj więc jak
możemy to zrobić tutaj sobie klikniemy w tym miejscu i when wpiszemy właśnie
terminal focus okej
okej czyli to musimy edytować
w inny sposób już ci pokażę w jaki sposób przejdziemy
sobie do jsona który jest również za naszymi
plecami tutaj przechowywany w którym możemy to edytować bo chyba tutaj się tego
nie da okej da się edytować change when expression tak
czy siak pokażę ci za moment ten json wpiszmy tutaj terminal focus
to są takie można powiedzieć warunki które da się znaleźć właśnie gdzie
no w tym jsonie który jest oryginalny zaraz ci to pokażę ale najpierw jeszcze odbindujemy ten
command t który nam konfliktował czyli to był ten bo
on nie jest mi potrzebny więc ja sobie go może na razie usunę
w ten sposób natomiast pokażę ci jak przejść do jsona
żebyśmy wszystko co mamy może najpierw przetestujemy jeszcze czy nowe karty terminala się
otworzą i tak rzeczywiście jest tutaj widzimy że jest kilka tych kart mogę je
oczywiście zamknąć na przykład w ten sposób lub za pomocą tej ikony okej ale
przejdźmy do jsona wpiszemy sobie znowu keyboard i teraz
mamy coś takiego jak default keyboard shortcuts json
tutaj zobaczymy właśnie json z wszystkimi możliwymi skrótami
jakie są przypisane czyli to jest alternatywna wersja do tego ui które widziałeś
przed momentem tutaj właśnie można znaleźć coś takiego jak when żebyśmy wiedzieli z czego
można korzystać natomiast drugi json to będzie json nasz
czyli to co pozmienialiśmy tutaj zostanie zapisane i zauważ że wygląda to w taki
oto sposób i ja zmieniam sobie jeszcze więcej innych rzeczy na
przykład takich jak focus na te różne edytory i tak dalej ale nie będę
ci już tutaj tym zanudzał podlinkuję mój plik z ustawieniami skrótów
jeżeli będziesz chciał sobie również do niego zerknąć i jak zatem widzisz ustawianie
skrótów jest bardzo proste mamy również warunki które pozwalają
nam na przykład otwierać nową kartę terminala wyłącznie wtedy kiedy
w tym terminalu jesteśmy czyli jeżeli teraz wcisnę command t to nic się nie wydarzy
ale jeżeli będę w takim terminalu to command t będzie mi otwierał nowe karty
na koniec jeszcze pokażę ci tylko jedną rzecz gdybyśmy przeszli do extensions
i wpiszemy sobie keymap to jeżeli na przykład korzystałeś wcześniej z edytora sublime text
i jesteś przyzwyczajony do skrótów które tam były możesz
sobie taką keymapę zainstalować i wtedy będziesz miał ustawione większość skrótów
właśnie tak jak było to w edytorze sublime text podobnie dla atoma i dla
jeszcze innych edytorów z których być może korzystałeś więc wtedy nie musisz ręcznie
wszystkiego ustawiać ale jest to ustawione już przez taki dodatek za ciebie