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+
Teraz pokażę ci bardzo fajny dodatek który nazywa się to do highlight
możemy go znaleźć w ten sposób zainstalujemy i zaraz
zobaczysz co on nam oferuje otóż wystarczy że teraz będąc
w dowolnym pliku na przykład tutaj w javascriptowym wiemy że coś mamy do dorobienia
i dodamy sobie tutaj gdzie dopiszemy to do w ten sposób zauważ że już
to jest podświetlane na żółto i napiszemy powiedzmy żeby to
dokończyć później w
ten sposob i zapiszemy to jest pierwsza rzecz a druga jest taka że możemy gdzieś powiedzieć
że powiedzmy mamy jakiś back i wiemy że trzeba go naprawić to mogę tutaj sobie dodać
drugą rzecz czyli fixme i to będzie kolorowane na kolor taki różowy i
możemy napisać this function is not correct
coś w tym stylu powiedzmy i dzięki temu przechodząc
po plikach od razu te rzeczy widzimy ale to nie wszystko dlatego że teraz możemy
skorzystać z command palette wpisać to do highlight i wybrać
list highlighted annotations i teraz co nam to da wcisnę enter
i zobaczysz możemy wybrać albo wszystkie albo same to do i same fixme wybierzmy wszystkie
otworzy nam się panel boczny tu gdzie jest terminal ale właśnie w panelu output
i tutaj zobaczymy wszystkie pliki w których coś zostało znalezione i możemy kliknąć z
command na windowsie to powinno być control click i przejdź do takiego pliku natomiast
jeżeli wyskoczy ci taki błąd jak mamy tutaj to musimy zmienić
jedną rzecz w ustawieniach mianowicie wyszukać sobie toggle uri i
będziemy mieli to do highlight toggle uri ustawmy to na wartość true i
teraz jeszcze raz sobie wyszukam czyli command palette to do hoghlight list
highlighted annotations i teraz tutaj to wygląda już trochę inaczej mogę kliknąć
i bez problemu przejść do tego miejsca w pliku więc bardzo wygodna rzecz możemy
wrócić do rzeczy chcemy poprawić albo dokończyć tylko teraz
jedna bardzo ważna uwaga jeżeli będziesz miał projekt w którym będzie dużo plików na przykład
katalog node modules lub vendor jeżeli pracujesz z językiem php to
to to highlight może ci nawet zawiesić edytor dlatego że będzie wyszukiwać
we wszystkich tych plikach czasem jest tysiące tych plików i może to trwać długo
i tak jak wspomniałem może przywieszać edytor dlatego można wykluczyć pewne katalogi i
dlatego gdybyśmy przeszli tutaj i wyszukali sobie to do
highlight to
mamy coś takiego jak exclude ok no i widać że domyślnie node modules jest wykluczone
i jeszcze kilka innych katalogów natomiast tak jak wspomniałem w php
mamy taki katalog jak vendor z zależnościami z composera on tutaj
nie jest wylistowany więc to wszystko należałoby wtedy przekopiować do settings i dodać
jeszcze tutaj kolejne katalogi więc o tym pamiętaj jeżeli będziesz
słyszał na przykład wiatraki w swoim laptopie że się uruchomiły czyli procesor
pracuje na bardzo dużych obrotach kiedy uruchomisz to do highlight
to oznacza że prawdopodobnie skanuje on jakieś katalogi których nie powinien niemniej
jednak poza tym uważam go za świetny dodatek z którego często korzystam