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 przeskakiwać do definicji danej
metody czy na przykład klasy i znowu tutaj vs code działa świetnie
z javascriptem ale jeżeli zainstalujesz sobie później dodatki do pracy z
językiem php ruby czy z jakimkolwiek innym którym pracujesz czy z pythonem
to również one będą oferowały takie same opcję więc
ten edytor odpowiednio rozszerzą jeżeli z naszego pluginu wyeksportuję sobie
klasę w ten sposób w javascript to w innym pliku mogę ją zaimportować i
po pierwsze to co jest fajne to vs code tutaj z automatu to wszystko rozumie czyli
mogę powiedzieć import plugin from i tutaj mi już podpowiada ścieżkę plugin
i następnie mogę utworzyć nową instancję powiedzmy new
plugin i jak widzisz od razu nam
pokazuje parametr że jest to parameter name że musimy go tutaj podać więc
powiedzmy powiemy sobie tutaj test i teraz będę chciał napisać p do
work i znowu vs code jest inteligentny i nam podpowiada
że taka metoda w ogóle istnieje więc rzeczywiście taka metoda jest jak utworzyłem
nową instancję to mogę z niej skorzystać natomiast to co chciałbym ci teraz pokazać
to jest to że czasami jesteśmy w jakimś pliku i widzimy jakąś
metodę z której korzystamy my lub zrobił to ktoś inny i chcielibyśmy zobaczyć jak ona
wygląda gdzie ona się znajduje więc możemy do niej przejść i jeżeli zaznaczę
taką metodę wystarczy że tutaj jestem otworzę command palette to mogę wpisać go
to definition i przeskoczymy od razu do tejże
metody i ja będę chciał sobie to ustawić na jakiś wygodny skrót
klawiaturowy więc przejdziemy sobie do keyboard shortcuts i wyszukamy
tutaj go to definition okej
to jest to i ja ustawiam to u siebie ale zrób to tak jak chcesz na
command shift r dlaczego dlatego że command r w poprzedniej lekcji pokazałam
że ustawiam na to aby pokazać wszystkie symbole na przykład metody w danym pliku a
command shift r przeskakuje mi do takiej metody więc jeżeli tak
to zrobię jestem w dowolnym pliku i z tego też korzystam cały czas naprawdę
bardzo bardzo wiele szczególnie w języku php naciskam command shift r i
przechodzę do pliku on został otwarty jak widzisz w nowej zakładce gdzie ta metoda została
stworzona i mogę zobaczyć jak ona wygląda i na przykład w języku php fajne
jest to że mogę wszystko przeskakiwać również do plików które nie ja napisałem które znajdują się w
katalogu vendor i zostały jako zależności pobrane do mojego projektu
czasami chcę zobaczyć jak coś zostało zaimplementowane żeby lepiej to zrozumieć i
mogę to zrobić właśnie w taki sposób polecam ci znowu ustawienie
takiego skrótu przyswojenie go sobie i korzystanie z niego na co dzień
bo naprawdę bardzo ułatwia pracę