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 prostszy sposób tworzyć snippety czyli
na przykład chciałbym sobie utworzyć nowy plik tutaj już za pomocą snippetu php zrobimy
coś takiego może mu ustawi jeszcze language mode na php i teraz stworzę
sobie tutaj klasę czyli napiszę na przykład class tutaj chciałbym żeby była jej nazwa
powiedzmy name i żeby to wyglądało w ten sposób i chciałbym taki snippet sobie utworzyć
z tego zaznaczenia więc musimy sobie zainstalować dodatek który się nazywa
snippet creator wyszukajmy to jest dokładnie ten
dodatek ale tutaj mamy deprecated więc to będzie ten
kolejny okej zainstalujemy czyli
zwracaj uwagę również na coś tak jak deprecated czyli porzucony zainstalowaliśmy ten
snippet creator i teraz jeżeli sobie zaznaczę coś takiego to będę mógł
wpisać snippet i wybrać tutaj create snippet to jest dzięki
właśnie temu dodatkowi i teraz mogę wpisać nazwę czyli taką jak podawaliśmy w tym jsonie w lekcji
poprzedniej na przykład będzie to php class
mogę wpisać prefix chciałbym żeby to było cls class
następnie opis wpiszę sobie znowu php
class i jak widzisz taki snippet został
utworzony jeżeli byśmy sobie teraz wpisali snippet i wybrali configure
user snippets i przejdziemy sobie do php to zauważ że
taki prefix został tutaj dodany i taki snippet został utworzony a
dlaczego został utworzony w php json no właśnie dlatego że ten dodatek
z którego skorzystaliśmy wykrył że jesteśmy w pliku już php i
umieścił to w odpowiednim miejscu czyli teraz już taki snippet mamy a więc taką
klasę będę mógł utworzyć wpisując po prostu cls i taka klasa
zostanie utworzona jak widzisz dzięki temu dodatkowi możesz już mieć jakiś fragment
kodu i po prostu na jego podstawie utworzyć sobie snippet ale
ja bym go chciał jeszcze zmodyfikować o tyle żeby tutaj podawać sobie dolar
1 i dzięki temu jak wpiszemy cls to będę mógł tutaj wpisać od
razu nazwę co ciekawe tutaj również można zrobić coś takiego zauważ
1 i tutaj dwukropek i na przykład name jeśli coś takiego zapiszemy
wpiszę cls to od razu będziemy mieli to name które wpisałem i jest zaznaczone
i można to zmienić na coś innego na przykład na person czyli
jak chcesz mieć jakieś predefiniowane opcje w snippetach to można to robić w ten sposób gdybyś chciał
dodać kolejny skok w którym się coś wpisuje to tam byś zrobił dolar 2 i jeżeli
miałby mieć jakąś wartość to wyglądało by to następująco teraz chciałbym ci jeszcze
pokazać że w snippetach możemy korzystać ze specjalnych zmiennych które są na tej stronie
wylistowane na przykład current year czyli możemy sobie zrobić jakiś
snippet który nam generuje ładny komentarz i tam będziemy mieli na przykład copyright i
dany rok więc to może być bardzo przydatne ja natomiast pokażę ci
na tym przykładzie tej klasy w php jak możemy dodać sobie nazwę pliku
czyli będzie to tm filename base do naszego
snippeta i co nam to umożliwi czyli wrócimy sobie tutaj do snippeta
który utworzyliśmy i będę chciał tutaj zrobić coś takiego czyli podać tą
zmienną która tm filename base zapisać
to i zobaczmy co się teraz stanie jak skorzystamy z cls
jak widzisz mamy untitled 1 czyli można powiedzieć że nie to czego chcieliśmy ale
powiem ci dlaczego tak jest zazwyczaj ja sobie tworzę pliki
na przykład w ten sposób że tutaj bym utworzył new file albo za pomocą advanced new file
czyli dodatku który zainstalowaliśmy wcześniej chciałbym tutaj
stworzyć nowy plik i nazywałby się na przykład person php
w ten sposób i dopiero teraz bym tutaj wpisał php rozwinął znacznik i
wpisał cl żeby stworzyć klasę i jak z czegoś takiego skorzystam to
zauważ że od razu z nazwy pliku zostało
to zczytane czyli person i zostało to tutaj wstawione a więc z takich zmiennych
również można korzystać no i powiem ci że ja mam mnóstwo takich snippetów na przykład
na tworzenie nowych metod czyli jakbym chciał zrobić public function nazwa
funkcji i tak dalej to wpisuje sobie po prostu met jak metod albo
pmet jak protected method teraz ich tutaj nie mam bo mam czystą instancję
na potrzeby tego kursu ale normalnie mam mnóstwo takich snippetów polecam ci
żebyś te fragmenty kodu które często piszesz ręcznie po
prostu sobie zautomatyzował i stworzył snippety już wiesz jak to zrobić