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+
Ta i kilka kolejnych lekcji będzie poświęcona językowi php
czyli jak w vs code pracować z tym językiem ważna uwaga jest taka że
nie będę umawiał wszystkich dodatków jakie można zainstalować sobie do tego edytora
w zależności od tego jak pracujesz czy na przykład piszesz testy jednostkowe czy nie i tak dalej
znajdziesz do tego odpowiednie dodatki ja chciałbym ci pokazać tylko te które
uważam za najważniejsze i będzie to w tej lekcji taka inteligencja
która pozwoli nam podpowiadać różne rzeczy w kodzie czy
pozwoli nam przechodzić do definicji i tak dalej ja sobie zainstalowałem tutaj czystą
instancji frameworka laravel wpisując polecenie w terminalu laravel
laravel czyli mam taką aplikację o takiej nazwie i na
tym przykładzie będę chciał ci pokazać jak możemy pracować z taką aplikacją przejdziemy
sobie do dowolnego pliku php na przykład tutaj i zauważ że kolorowanie
składni mamy już domyślnie w vs code czyli nic nie musimy tutaj instalować również
mamy jakieś podpowiedzi gdybym na przykład chciał skorzystać z jakiejś funkcji typu array combine
to również mi tutaj vs code podpowiada więc wydawałoby się że nic
więcej nie jest nam potrzebne ale żeby wydajnie pracować będziemy potrzebowali
jakiegoś rodzaju inteligencji która będzie się zachowywać tak jak w programach typu id
i zainstalujemy sobie teraz taki dodatek może jeszcze zanim to zrobię
to przejdziemy sobie do jakiegoś kontrolera na przykład tutaj powiedzmy login
controller i zauważ jedną rzecz że jeżeli nacisnę control
r czy command r żeby przejść sobie tutaj do symboli żadnych
symboli mi tutaj nie znalazło a widziałeś że w językach javascript tak było czyli vs code
po prostu nie rozumie co się w takim pliku dzieje podobnie gdybym chciał przejść tutaj
do definicji kontrolera czyli do tego też nie mogę tego
domyślnie zrobić dlatego przejdziemy sobie do dodatków i wpiszemy php intelli
i znajdzie nam taki dodatek jak php intellisense będę
chciał go zainstalować i po instalacji ten
dodatek sprawi że od razu tutaj już dużo rzeczy będzie dla nas dostępnych przejdę
z powrotem do symboli i zauważ że teraz już rozumie vs code
co tutaj się znajduje czyli mamy metodę construct mamy tutaj cały kontroler
i tak dalej jeżeli bym wpisał dwukropek to te symbole będą w takich grupach czyli
teraz już vs code rozumie o co chodzi i mogę nacisnąć command lub na windowsie powinno
to być control i kliknąć tutaj w kontroler aby przejść do definicji zobaczyć
gdzie to było zdefiniowane podobnie mogę zrobić z moim skrótem klawiaturowym który
ustawiłem czyli nacisnąć command shift r również przeskoczy
do tej definicji bardzo często to robię jeżeli nie wiem jak
dana metoda wygląda w jaki sposób z niej skorzystać natomiast teraz chciałbym
żebyśmy w ustawieniach 2 vs code wyłączyli sobie dwie rzeczy bo skoro mamy już
ten intellisense to vs code nie musi nam już podpowiadać tych
swoich rzeczy i zrobimy to tak że wyszukamy sobie php suggest basic
i po prostu to wyłączymy bo będzie to za nas robił już intellisense i
druga rzecz jest to php validate nie pokazałem ci że php
nam też domyślnie walidował tutaj w vs code ale tylko wtedy kiedy
na przykład popełnilibyśmy jakiś błąd i zapisalibyśmy plik wtedy ta walidacja
działała więc chciałbym tą walidacje też wyłączyć false
w ten sposób i teraz za nas to będzie robił intellisense tak być powinno
więc zauważ że teraz już nam coś na czerwono podświetla
mamy jakiś problem i jeżeli byśmy sobie przeszli tutaj to będziemy widzieli
że faktycznie w którymś pliku problem się znajduje a z kolei control lub command
shift m czyli do panelu problems jak przyjdziemy to również zobaczymy że jest
tutaj błąd jeszcze taka ważna uwaga musisz mieć w systemie zainstalowany język
php i na macu on został automatycznie wyłapany natomiast na windowsie
nie wiem czy będzie to domyślnie działać ale jeżeli nie to trzeba tutaj znaleźć
intelli coś takiego albo php
i gdzieś tutaj znajdziemy executable
path i tutaj trzeba było podać ścieżkę w systemie do tego języka
php czyli w razie czego o tym pamiętaj no i teraz widzisz mamy walidacje
mamy podpowiedzi i możemy na przykład przechodzić do takich
definicji możemy wyświetlać sobie wszystkie symbole bardzo wygodne
szczególnie jeżeli będziemy mieli w jakimś pliku więcej jakichś
metod tutaj mamy tych metod niewiele ale jak widzisz działa to poprawnie i
jeszcze jedna uwaga na początku jak zainstalujesz sobie ten intellisense może być tak że jak spróbujesz przejść
do jakiś definicji czy będziesz tutaj naciskał command lub control nie będzie się to podświetlać
to oznacza że w tle indeksuje sobie cały nasz projekt właśnie
ten intellisense więc to chwilkę może potrwać czasami tak jest a czasami działa to od razu
i tak naprawdę do wygodnej pracy z php to rozszerzenie już by
nam wystarczyło ale pokażę ci w lekcji kolejnej jak jeszcze możemy wymuszać
pewne standardy kodowania i formatować sobie automatycznie kod z cs fixer