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 jeszcze kilka ustawień które ja na co dzień mam
zmienione a wypracowałem to przez lata tak naprawdę gdzieś tam
dostosowywania vs code do swoich potrzeb nie będę pokazywał wszystkich ustawień jakie mam
u siebie ale takie które uznałem że mogą ci się również przydać więc przejdziemy do ustawień
i jednym z ciekawszych takich jeszcze w ui jest dostosowywanie kursora
jak widzisz on jest teraz cienki i mruga ale jeżeli sobie tutaj wpiszemy curson
to możemy zmienić go na przykład na solid to
jest to co robię ja czyli on teraz przestaje mrugać i możemy również zmienić
jego wygląd na przykład na block okej teraz
będzie on taki gruby ale możemy również i wydaje mi się że tak mam to ustawione na co dzień mam
ustawione na solid ale również mam ustawione jego width i skopiuję sobie to
do ustawień okej jak widzisz pojawił nam się taki problem że zmodyfikowałem
ten plik i go nie zapisałem a teraz przenosząc ustawienie chcę tutaj coś nadpisać więc
wtedy należy ten plik zapisać i teraz będziemy mogli to skopiować ja
u siebie mam to ustawione na 4 jeśli dobrze pamiętam jeżeli chcesz możesz
ustawić to sobie również na większą wartość innym z ustawień które
ja lubię mieć jeszcze takim dotyczącym ui jest renderowanie
tych linii wcięcia czyli tak zwanych indent lines jeżeli
one ci się podobają i ci pomagają to możesz je sobie zostawić chodzi o te linie one
mogą różnie wyglądać w zależności od szablonu ja za nimi nie przepadam więc
będę chciał je ukryć czyli będzie coś takiego jak indent lines
może to gdzieś znajdziemy chyba
nie to chyba będzie guides coś takiego render
indent guides dokładnie tak jak widzisz nie trzeba
pamiętać wszystkich tych ustawień ale jeżeli mniej więcej wiemy czego szukamy to znajdziemy i
teraz jak widzisz one zniknęły to wygląda jeszcze czyściej gdybyś nie chciał również na
przykład tutaj numeracji linii też można to wyłączyć ja to na razie zostawię
a potem pokażę ci jak można to zmieniać za pomocą skrótu klawiaturowego przejdźmy może
do kodu javascript który gdzieś tutaj się znajduje i jak widzisz mamy na
przykład podświetlanie pasującej pary nawiasów czyli
to jest włączone domyślnie ja u siebie w ustawieniach też wiem że mam to włączone
ale jak widać nie trzeba tego zmieniać jeżeli chciałbyś to z kolei zmienić to można to zrobić za
pomocą match brackets i tu mamy always ale możemy
ustawić near albo never okej czyli jest tutaj kilka takich opcji jedną
z ciekawszych opcji którą ja również mam ustawioną to jest opcja dotycząca takich jakby
podpowiedzi zauważ że jak tutaj zaczniemy cokolwiek sobie pisać to wyskakuje nam
takie pole z podpowiedziami i tutaj jest takie
delikatne opóźnienie i ono jest w porządku natomiast możemy je ustawić na
0 wtedy mam wrażenie że ten edytor jest naprawdę super szybki więc to
możemy zmienić w ustawieniach za pomocą quick suggestions delay
jak widzisz tutaj jest 10 możemy to przekopiować do ustawień i zmienić na przykład na
0 to jest coś co ciebie może irytować a dla mnie jest to przydatne że od
razu mi się to pojawia i nie ma tutaj takiego opóźnienia to jest jedna z tych
niewielkich rzeczy które można również znaleźć w ustawieniach innym ustawieniem
które mam u siebie jest na przykład wstawianie po zapisaniu pliku jeszcze
jednej nowej linii i jest ku temu wytłumaczenie która
podlinkuję jeżeli będziesz ciekaw natomiast pokażę ci jak możemy to ustawić
a będzie to insert final
new line tutaj jest na false ja to ustawiam na true i to oznacza że jeżeli
zapiszę sobie teraz plik to tutaj zawsze będzie dodawana taka linia zauważ mamy 24
linijki zapisuje jest jeszcze tutaj 25 wtedy wiadomo gdzie dokładnie
kończy się plik bo jest tutaj znak nowego wiersza i jeszcze innym ustawieniem
która uważam że można sobie ustawić jest na przykład coś takiego jak tutaj
klikamy prawym przyciskiem wybierzemy delete żeby usunąć plik to będziemy mieli
zapytanie czy na pewno chcemy to zrobić no i to jest okej jeżeli chcesz
tak to zostawić tutaj możemy zaznaczyć do not ask me again i to jest coś to
możemy zmienić wcześniej i ja to mam już u siebie w ustawieniach i to ustawienie
nazywa się confirm delete i ja
mam to ustawione na false wiem że jeżeli już kliknąłem prawym przyciskiem wybrałem delete
to raczej się nie pomyliłem a jak się pomylę to i tak zawsze mam jakąś
kontrolę wersji w stylu gita czyli może ten plik który jest nam tutaj
niepotrzebny usuwamy i ten plik po prostu znika wiem
że trochę przeskakuje po tych różnych ustawieniach ale po prostu przeglądałem sobie co ja u siebie mam ustawione
i te ciekawsze chcę ci pokazać więc jest troszeczkę chaotycznie jest jeszcze
na przykład takie ustawienie że jak mamy to jakieś białe znaki i zapiszemy to chcemy żeby
one zostały usunięte jak widzisz nie zostały a nie są one tutaj istotne
przez pomyłkę tutaj mogą zostać na przykład dodane więc możemy wyszukać ustawienia
trim i mamy coś takiego jak trim trailing white space ustawmy
sobie to na true teraz jeżeli tutaj przejdę i
zapiszę to nie ważne ile tutaj zrobię spacji z każdej linii jakieś
niepotrzebne białe znaki będą usuwane okej i to by było na tyle jeżeli
chodzi o część z ustawień które mam u siebie w trakcie tego kursu jeszcze będziemy
sobie instalować i różne dodatki różne rzeczy konfigurować więc do ustawień na pewno
jeszcze będziemy wracać z moim przypadku ta lista którą widzisz tutaj po prawej stronie jest
zdecydowanie dłuższa jak zatem mogłeś zobaczyć bardzo wiele rzeczy
można ustawić jeżeli jest coś co może cię denerwuje co chciałbyś ukryć
lub zmienić zachowanie tego edytora jakiejś jego konkretnej funkcji to
postaraj się to znaleźć w ustawieniach bo prawdopodobnie da się to ustawić