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+
Chociaż dodatków do pracy z html i css
jest cała masa do vs code zachęcam cię żebyś również sobie poszperał
trochę w internecie to ja będę chciał ci pokazać jeszcze tylko 1 z nich dlatego że
może on być bardzo przydatny szczególnie jeżeli pracujesz z bibliotekami takimi jak
na przykład bootstrap przejdziemy sobie do wyszukiwarki rozszerzeń
i wpiszemy css intelli powinno nam znaleźć coś
takiego jak intellisense for css class names in html
zainstalujemy sobie takie rozszerzeniem i już ci mówię co ono nam umożliwia
otóż jeżeli chciałbym tutaj zmienić klasę tego diva i wpiszę in
zauważ że od razu mi znalazło invisible i na tab mogę to rozszerzyć
teraz skąd to się wzięło mamy tutaj taki plik jak
main.css i zauważ że tutaj jest klasa invisible więc wszystkie klasy
które tutaj są zostały można powiedzieć sczytane przez to
rozszerzenie dlatego że linkujemy ten plik w tym miejscu dzięki temu
można powiedzieć że ten dodatek wie jakie tam są klasy
i nam je tutaj podpowiada natomiast jeżeli byśmy sobie zalinkowali z
zewnątrz link do biblioteki bootstrap to ona
ma bardzo bardzo wiele klas i w zasadzie na tym polega korzystanie z niej że po prostu przepisujemy
te klasy do elementów html i zauważ że teraz również mógłbym z nich
korzystać na przykład tutaj mogłem wpisać btn jak button ale
jeżeli tego ci nie wyłapuje to trzeba jeszcze przeładować okno czyli zrobimy
command shift p i wpiszemy reload deweloper
reload window przyda nam się wszystko od nowa ten
dodatek powinien wyłapać zmiany i zauważ że jak teraz będę chciał wpisać na przykład
btn to mi to tutaj wszystko znajduje na przykład btn dark
w ten sposób czyli wszystkie klasy jakie są w plikach css podłączonych
do tego dokumentu co ciekawe można również
byłoby korzystać z emmeta czyli gdybym chciał stworzyć button i tutaj mieć auto
complete tych klas to możemy przejść do ustawień i wpiszemy sobie emmet
i wyszukamy tutaj czegoś takiego jak html css class completion
enable emmet support zmienimy to na true i teraz jeżeli
wpiszesz jeszcze raz button btn zauważ
że od razu nam tutaj podpowiada wszystkie te klasy które zostały znalezione
w tych css czyli nie jest specyficzne dla bootstrapa po prostu ten dodatek
wczytał sobie link do bootstrapa i znalazł nam wszystkie klasy możemy to zrobić w ten sposób
i za pomocą tabulatora rozwinąć i będziemy mieli coś takiego oczywiście
w bootstrapie musiałbym dodać dwie klasy btn i btn info
i wtedy wyglądałoby to poprawnie także bardzo ciekawy dodatek polecam
jeżeli korzystasz z takiej biblioteki jak na przykład bootstrap i chcesz mieć takie auto completion
natomiast jeżeli ogólnie chodzi o inne dodatki to tak jak wspomniałem zachęcam
żebyś poszperał w internecie również i tutaj właśnie w extension
w kategorii html wyszukał sobie sprawdził które są popularne poczytał
ich opisy i znalazł coś co przyspieszy i ułatwi twoją pracę
bootstrap.css · 1 min
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">