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 tym rozdziale pokażę ci jak wygodnie możemy pracować z
gitem wewnątrz edytora vs code git jest system kontroli
wersji i jeżeli z niego korzystałeś to wiesz że jak my wszyscy web developrzy
znamy tak naprawdę na pamięć tylko kilka podstawowych komend
które zazwyczaj wystarczą nam do tego aby skutecznie pracować
z gitem natomiast czasami jest tak że chcemy przywrócić jakiś jeden specyficzny plik
i wtedy już zaczyna się zastanawianie jak dokładnie wyglądała ta komenda
i wszystkie jej argumenty z użyciem vs code możesz tutaj to wszystko
wyklikać mamy tutaj taki projekt jak wcześniej i będę chciał założyć
nowe repozytorium normalnie zrobiłbym to w terminalu wpisując git init ale
nie będę tego robił tylko zrobimy to z poziomu vs code przejdziemy
sobie do panelu source control i on jest pod command shift g ja
sobie tak to ustawiłem możesz zobaczyć jak wygląda domyślny skrót tutaj
jest ten panel scm zauważ że nic ciekawego tutaj nie ma ale jeżeli klikniemy
plus to będziemy mogli utworzyć nowe repozytorium
co ważne jak zwykle wszystkie te rzeczy również są pod command palette możemy wpisać
git i tutaj będzie na przykład initialize repository to jest dokładnie to samo
więc możemy w tym katalogu utworzyć sobie nowe repozytorium
i od razu się okazuje że takie repozytorium jest i mamy tutaj przy tych
wszystkich plikach tak coś takiego jak u czyli unstaged changes
a w zasadzie na razie to jest jeszcze untracked czyli ten plik jest nie śledzony tutaj
nie ma więcej plików dlatego że mamy plik git ignore i
ten plik nam mówi które pliki mają być wykluczone on tutaj już był od
początku w tej aplikacji gdybyśmy z kolei tutaj w terminalu wpisali
sobie git status czyli zrobili to w taki standardowy sposób zobaczymy
dokładnie to samo to są untracked files i teraz możemy te pliki sobie
dodać więc możemy tutaj albo pojedyncze dodawać tylko te pliki które chcemy
albo możemy dodać wszystkie jak najedziemy tutaj to wyskakuje nam taki
plus i zobaczymy stage all changes teraz one wszystkie już są
dodane i są jak widzisz staged czyli w tym staging area nie są
już tutaj pod zakładką zmiany jeżeli tutaj teraz znowu bym wpisał git status
żeby zobaczyć co się stało to zobaczymy że te wszystkie pliki są dodane
i one są jakby w poczekalni czekają na to aby je zapisać commitem
w repozytorium więc teraz możemy wykonać swój pierwszy commit możemy
oczywiście zrobić to tutaj wpisując commit git commit jeżeli tak dla ciebie
jest szybciej ale możesz również tutaj wpisać wiadomość dla commita zazwyczaj
na początku wpisujemy tutaj initial commit w ten sposób i
albo command enter nacisnąć prawdopodobnie control
enter na windowsie albo tutaj na tym ticku jak widzisz commit zacommitowaliśmy
zmiany i teraz tych zmian już tutaj nie ma jeżeli tutaj sobie
wyczyszczę wpiszę git status to się okaże że nic tutaj nie
mamy a jak wpiszę git log to zobaczymy że faktycznie zapisaliśmy taki commit o
nazwie initial commit to tyle tytułem wstępu w kolejnych lekcjach będziemy
przyglądać się kolejnym możliwościom tego oto panelu