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+
Pracujemy nadal nad wyglądem edytora więc będę chciał ci pokazać
jak ukryć niepotrzebne przynajmniej w moim mniemaniu części
tego edytora czy panele które nie przydają się aż tak bardzo jak mogłoby się wydawać pierwszą
z rzeczy którą chciałbym ukryć jest taka minimapa która pojawia się w tym
miejscu nie wiem czy ktoś z tego korzysta jeżeli mamy bardzo duży plik to możemy tutaj przewijać
i mamy jakby jakiś podgląd jak ten plik wygląda natomiast dla
mnie nigdy nie było to przydatne a tylko mi przeszkadza i zajmuje tutaj cenne miejsce
więc możemy przejść do ustawień i po prostu wyszukać minimap i
mamy coś takiego jak editor minimap enabled true ustawiamy to na
false i minimapa nam zniknęła gdybyś jednak chciał ją zostawić ale
coś w niej zmienić to jak widzisz ona również ma swoje dedykowane opcje to jest pierwszy
kandydat do moim zdaniem wyrzucenia drugim jest breadcrumbs czyli
jest to taka ścieżka i ona również mi osobiście się nie
przydaje jeżeli chcesz możesz ją zostawić ja sobie ją usunę breadcrumbs znowu
znajdziemy stosowną opcję breadcrumbs nam znika co ciekawe można
również usunąć te zakładki ale ja akurat nie wyobrażam sobie bez zakładek życia
więc je pozostawiam wiedz jednak że możesz wyszukać na przykład tabs i
znajdziesz również opcję aby je usunąć kolejną rzeczą którą ja zawsze ukrywam jest ten
activity bar nie jest on mi potrzebny dlatego że do poszczególnych paneli które tutaj
są ja przechodzę za pomocą skrótów na przykład jeżeli chce przejść do powiedzmy
rozszerzeń to wciskam control shift x jeżeli
chcę wrócić do explorera to control shift e jeżeli do wyszukiwania control shift f
więc ja nauczyłam się tych skrótów klawiaturowych i
z nich po prostu korzystam dlatego będę chciał ten activity panel usunąć
activity bar visible mamy
tutaj tutaj true co ważne możesz również przejść do view i mamy tutaj coś takiego jak appearance i na
przykład show activity bar również możemy to tutaj odznaczyć i również
powinna się taka opcja wtedy pojawić w naszym jsonie więc ja to ustawię na
false przypomnę ci jeszcze jeżeli już zapomniałeś że możemy możemy
wrócić tutaj przestawiając to json na ui do
tej wersji ustawień która jest taka bardziej wyklikiwalna jeżeli byś ją wolał
ja wolę taką jsonową od razu widzę co tutaj sobie ustawiłem okej
jak widzisz activity bar nam zniknął kolejną rzeczą która nie jest mi potrzebna jest tutaj
coś takiego jak outline i w zależności od piku zauważ że to się może zmieniać
mamy tutaj jakieś rzeczy związane z tym plikiem ja tego panelu
nie lubię nie potrzebuję klikam prawym przyciskiem i tutaj odznaczam bo
jego można w ten sposób ukryć i outline nam zniknął na dole mamy status
bar który ja normalnie też mam ukryty bo wbrew pozorom nie jest mi aż tak bardzo potrzebne
to co tutaj jest pokazane ale ja go zostawię w tym kursie bo jeszcze parę razy sobie
tutaj zerkniemy natomiast tutaj jest coś takiego powiedzmy jak ten dzwonek
notifications o coś takiego jak feedback moim zdaniem to jest również
zbędne żeby to tutaj było więc możemy spróbować to ukryć jak
widzisz łatwo to wszystko można wyszukać tutaj nie ma feedback ale będzie coś takiego jak
rating na pewno tutaj
coś takiego jest w tym momencie nie pamiętam jak dokładnie to ukryć a chyba nie da się
tego zrobić ten sposób okej wygląda na to że da się tweet feedback
czyli prawym przyciskiem i to odznaczyć i nam to zniknęło nie wiem
czy to jest odzwierciedlane tutaj w opcjach chyba jednak nie jest więc może
tego również tutaj nie być chociaż dałbym głowę że takie ustawienie i tutaj się znajdowało
ale teraz go tutaj nie widzę być może zostało to zmienione w którejś z wersji
ale jak widzisz ukryć to można no i teraz jeszcze jedna rzecz której ja bardzo
nie lubię mianowicie open editors i teraz dla jednych to może być zaleta
dla mnie jest to wada bo mi to zajmuje miejsce i przeszkadza a więc to są otwarte zakładki
które ja i tak widzę tutaj nie potrzebuję ich mieć w tym miejscu dlatego
możemy ustawić ile otwartych edytorów ma się tutaj znajdować wyszukajmy
na open editors coś takiego tutaj powinno zostać znalezione
okej mamy tutaj coś takiego jak explorer open editors
visible czyli 9 ma być widocznych chciałbym to skopiować do ustawień i ustawić na
0 jeśli ustawimy na 0 cały ten panel nam znika i o to chodziło
żeby ten vs code wyglądał po prostu czyściej jeżeli chodzi o chowanie samego sidebara
to możemy robić za pomocą skrótu command czy control b więc
to robimy można powiedzieć na bieżąco natomiast inne panele można ukryć
permanentnie tak jak to zrobiłem jedyną rzeczą której nie potrafię ukryć bo nie ma tego do
dzisiaj w opcjach to są te ikonki tutaj które na przykład pozwalają
nam pokazać wszystkie otwarte edytory zamknąć wszystkie czy
zamknąć tylko te które są zapisane możemy to robić jak widzisz za pomocą skrótów klawiaturowych
co ja robię więc chciałbym te ikonki ukryć ale nie da się tego zrobić w prosty sposób
jest pewien sposób jak to zrobić za pomocą dodatku ale po każdej aktualizacji
edytora musimy to robić od nowa tak więc jak widzisz w ten sposób możemy sobie trochę
wyczyścić ten ui jeżeli tylko chcesz żeby tak u ciebie
wyglądał ten edytor jeżeli nie to zostaw sobie część z tych rzeczy które pokazałem
jak ukryć w kolejnej lekcji pokażę ci natomiast jeszcze kilka ustawień
które uważam że są przydatne i ja na codzień z nich korzystam