Narzędzia JavaScript Full-Stack Web Developera: Konfiguracja edytora

0:00Tak jak to podkreślałem na każdym kroku

0:02mój edytor kodu i zasadniczo większość narzędzi, z których korzystam

0:06skonfigurowana jest w taki sposób, aby wyświetlała mi minimum niezbędnych

0:10informacji do tego, aby móc wykonać konkretne zadanie.

0:14W przypadku edytora kodu działa to tak, że praktycznie przez większość czasu jestem

0:18po prostu skupiony na samej zawartości pliku.

0:21Jedyną istotną dla mnie informacją poza samym kodem jest nazwa pliku oraz

0:25ewentualnie informacja o kolejnych otwartych plikach.

0:28Poza tym spotkałem się również z

0:30konfiguracjami, które wyłączały numerowanie linii.

0:33W mojej opinii jednak jest to zły pomysł

0:35ze względu na to, że wielokrotnie chociażby proces samej aplikacji często

0:39informuje nas o tym, w której linii wystąpił jakiś błąd.

0:42Z tego powodu wyłączenie tej informacji moim zdaniem jest dość kiepskim pomysłem.

0:47Cała reszta informacji, takich jak dodatkowe panele, sidebary boczne i np.

0:52okna wbudowanego terminala są moim zdaniem zbędne na czas pisania kodu.

0:56Przykładowo nawet teraz, w momencie gdy włączyłem jeden i drugi zwrócił uwagę jak

1:00mało przestrzeni roboczej mam tutaj na sam kod.

1:03Oczywiście w tym momencie sam font jest

1:05tutaj odpowiednio powiększony, ponieważ w trakcie nagrywania zależy mi na tym, aby

1:09dało się oglądać te materiały również na telefonie.

1:12Ale nawet pomimo tego, gdybyśmy mieli tutaj mniejszy font, to marnujemy mnóstwo

1:16przestrzeni na informacje, które w danej chwili nie są nam potrzebne.

1:19Dodatkowo bardzo negatywnie wpływa to na samo skupienie

1:22w momencie, gdy widzimy jak nam coś miga,

1:24zmienia się i zasadniczo tylko odwraca uwagę.

1:27I teraz przykładowo w momencie gdy

1:29chociażby instalujemy IntelliJ to widzimy następujący widok.

1:33Ten akurat pochodzi z Windowsa, natomiast na Macu wygląda to całkiem podobnie.

1:37Mamy tutaj zestaw różnego rodzaju folderów, przycisków, opcji, paneli

1:41bocznych i dodatkowych informacji o projekcie, które nie wnoszą absolutnie

1:45żadnej wartości, o ile w danej chwili nie jest to nam potrzebne.

1:49Z tego powodu za każdym razem, gdy otwieram edytor, który nie jest

1:52skonfigurowany, zwykle klikam prawym przyciskiem myszy na dany panel bądź

1:56sidebar i po prostu albo go ukrywam, albo w ogóle usuwam z panelu.

2:00W niektórych sytuacjach wyświetlają się różnego rodzaju ikonki i dodatkowe menu i

2:05w takiej sytuacji, aby je wyłączyć zwykle musimy przejść do ustawień wyglądu i tutaj

2:10w ustawieniach powyłączać sobie panele, których w danej chwili nie potrzebujemy.

2:14Ostatecznie teraz nie jestem w stanie zresetować moich ustawień po to, aby

2:18przeprowadzić przez cały proces konfiguracji edytora,

2:21natomiast te dwie wskazówki powinny w zupełności Ci wystarczyć do tego, aby

2:25oczywiście w momencie, gdy masz taką ochotę, dostosować to do swoich potrzeb.

2:29Jedynym wyzwaniem, które może się pojawić

2:31jest odnalezienie konkretnego elementu, ponieważ ich nazwy nie są oczywiste.

2:35Zwykle w takiej sytuacji po prostu opisywałem dany panel bądź zestaw

2:39przycisków w Googlu, a następnie dopisałem frazę W jaki sposób można to wyłączyć?

2:44oczywiście po angielsku

2:45i w rezultacie zwykle otrzymywałem odpowiedź.

2:48I tutaj analogiczną konfigurację można przeprowadzić również w Visual Studio Code więc

2:52jeżeli Cię to interesuje, to polecam

2:54zajrzeć na tego bloga, gdzie Caleb opisuje bardzo szczegółowo swój proces

2:58konfigurowania edytora i dostosowywania go do swoich potrzeb.

3:02I właśnie Caleb jest przykładem osoby,

3:04która jak widzisz wyłącza tutaj numerowanie linii

3:06więc uważam, że nie warto stosować

3:08wszystkich jego wskazówki. Zresztą to samo ma zastosowanie do mnie.

3:12Co więcej, nawet jeżeli nie interesuje Cię

3:14konfiguracja w Visual Studio Code i pracujesz już w IntelliJ bądź jakiejś

3:18innej aplikacji od JetBrains to i tak polecam zapoznać Ci się z tym

3:22artykułem ze względu na to, że być może znajdziesz tutaj jakieś inspiracje np.

3:26rozszerzeń, które również będzie można wykorzystać w innym edytorze kodu.

3:30Podobnie też poza samymi rozszerzeniami warto zwrócić uwagę na różnego rodzaju

3:34techniki i ustawienia, które stosuje Caleb ze względu na to, że jego optymalizacja

3:39pracy moim zdaniem jest naprawdę na wysokim poziomie.

3:42Tymczasem jeszcze zaznaczę w tym momencie jedną rzecz.

3:45To, że panele są wyłączone, nie oznacza to tego, że nie jestem w stanie np.

3:49łatwo po nie sięgnąć.

3:50Część ze skrótów naturalnie pamiętam i szczerze mówiąc nie ma ich zbyt wiele, a

3:54jednocześnie czasem zdarzają się sytuacje takie jak np.

3:57breadcrumbs, w przypadku którego nie przepisałem żadnych skrótów

4:00ale tak jak widzisz z pomocą palety

4:02komend po prostu wyszukuję sobie tą opcję, a następnie przełączam ustawienie w

4:06zależności od tego czy w danej chwili jest mi potrzebne.

4:09Kolejnym sposobem, który sprawdza się w tej sytuacji niesamowicie jest oczywiście

4:13Raycast, w przypadku którego mamy do dyspozycji rozszerzenie Search Menu Items, które

4:18umożliwia nam przeszukiwanie wszystkich opcji z tego głównego panelu menu.

4:22W rezultacie jestem w stanie niesamowicie

4:24szybko sięgać po różne opcje, nawet jeżeli nie pamiętam skrótu klawiszowego.

4:28Kolejnym elementem, na który warto zwrócić

4:30uwagę jest sama kolorystyka oraz ogólnie styl samego interfejsu.

4:35W moim przypadku jest to naturalnie Material Team i tutaj jeżeli chodzi o samą

4:39kolorystykę to oczywiście zależy ona od własnych preferencji,

4:43natomiast w momencie gdy będziesz ją wybierać pamiętaj tylko o tym, aby dobrać

4:46ją w taki sposób, aby poszczególne elementy kodu były wyraźnie zaznaczone

4:51kolorystycznie bądź w jakiejś innej wizualnej formie.

4:54To samo tyczy się samego fontu i w moim

4:56przypadku przez długi czas wykorzystywałem ten font operator mono,

5:00natomiast aktualnie wykorzystuje Fira Code, który również sprawdza się

5:03fenomenalnie i dodatkowo oferuje ligatury, które

5:06wiele osób preferuje, natomiast ja osobiście nie mogę się do nich przekonać.

5:11Tak czy inaczej pamiętaj o tym, że wszystkie elementy dostosowania Twojego

5:15edytora raczej jest dobrze dopasować do własnych preferencji i swoich potrzeb

5:19i z tego powodu nawet jeżeli ja pokazuję

5:21Ci jakieś różne ustawienia, to oczywiście niekoniecznie musisz po nie sięgać.

5:25Jednocześnie chciałbym jeszcze tylko

5:27zwrócić uwagę na fakt, że możesz dostosować różne elementy, np.

5:31podkreślania składni.

5:32Przykładowo, jeżeli tutaj wyszukamy sobie

5:35decorators, no to mamy tutaj ustawienie i akurat w tym momencie znajdujemy się w TypeScript,

5:40więc musimy odnaleźć na liście decorator i zwróć uwagę, że jest on

5:44zaznaczony innym kolorem niż ten domyślny w JavaScripcie.

5:48Chodzi o to, że w tym momencie, akurat gdy pracuję, z NestJS, chcę mieć jasne

5:52rozróżnienie tego, czym jest dekorator, a czym jest np.

5:55nazwa metody.

5:56W ten sposób nawet wizualnie szybko jestem w stanie objąć wzrokiem poszczególne

6:00elementy kodu i to ułatwia nawigowanie po nim oraz samo zrozumienie.

6:05Zatem jeżeli chodzi o sam wygląd edytora, można to sprowadzić do dwóch rzeczy.

6:09Wyłączenia wszystkich zbędnych paneli oraz dostosowania motywu kolorystycznego i

6:14fontu w taki sposób, aby nam służył i nie przeszkadzał w czytaniu kodu.

6:18A jeżeli jeszcze dodatkowo uda nam się osiągnąć efekt, który po prostu nam się

6:21podoba, to z pewnością dodatkowo na tym skorzystamy.

6:25Kolejnym elementem, jaki bez wątpienia

6:27trzeba poruszyć przy okazji konfiguracji edytorów i to zarówno mam tutaj na myśli

6:31IntelliJ jak i SublimeText 3 to oczywiście lista rozszerzeń.

6:35Tutaj muszę przyznać, że spotykałem się z różnymi osobami, które np.

6:39instalują dziesiątki bądź nawet setki pluginów do swoich edytorów, z czego i tak

6:44realnie wykorzystują tylko małą część z nich.

6:47Jeżeli chodzi o mnie, preferuję raczej dokładnie odwrotne podejście polegające na

6:51tym, że tak jak widzisz w moim przypadku jest zainstalowanych 17 wtyczek.

6:55Są to naprawdę podstawowe wtyczki, takie

6:58jak obsługa plików .env , wtyczki dotyczące w tym przypadku

7:02Material Icons, czyli ikonek, które wyświetlane są tutaj,

7:05następnie mamy plugin wspierający składnie Blade, ponieważ jeden z moich projektów

7:09wykorzystuje Laravel i tam właśnie ten silnik szablonów jest wykorzystywany.

7:14Następnie mamy wtyczkę, która umożliwia wykorzystanie Emmeta w zasadzie niemalże w

7:18każdym pliku i jest to również niesamowicie przydatne, ponieważ

7:21niejednokrotnie przyjdzie Ci pisać składnie HTML w plikach, które html

7:25nie są. Kolejnym rozszerzeniem, które w tym momencie jest jak widzisz wyłączone

7:30jest Gist Snippet, czyli zasadniczo jest to

7:32proste rozszerzenie, które umożliwia szybkie tworzenie gistów.

7:36Również bardzo mocno mi się przydaje, szczególnie w momencie, gdy potrzebuję

7:39jakoś szybko podzielić się fragmentem kodu.

7:42I teraz kolejny na liście jest GitHub Copilot, czyli nic innego jak sztuczna inteligencja

7:47od Microsoftu, która pomaga nam w pisaniu kodu.

7:49Tutaj samego Copilota wykorzystuję głównie do celów edukacyjnych oraz np.

7:54przygotowywania jakichś pojedynczych fragmentów kodu

7:56i właśnie samego Copilota nie wykorzystuję

7:59raczej w projektach komercyjnych ze względu na to, że są różne wątpliwości na

8:03temat sposobu przetwarzanych przez niego danych.

8:05Idąc dalej mamy jeszcze wsparcie dla Handlebars oraz tutaj mamy Hugo i Go, ponieważ

8:10również posiadam jeden projekt w tej technologii

8:12i analogicznie też mamy jeszcze wsparcie dla Vue, Laravel, PHP i np.

8:17Svelte. Tutaj jeszcze ponownie mamy Material

8:19Design i jak widzisz jeszcze na liście pojawia się kilka rozszerzeń dla

8:23konkretnych technologii oraz rozszerzenie Tabnine, które analogicznie jak GitHub Copilot,

8:28aczkolwiek w znacząco mniejszym stopniu pomaga nam w pisaniu kodu.

8:33No i teraz jeżeli chodzi o rozszerzenia, to jak widzisz nie stosuję tutaj niczego

8:36dziwnego poza tym, co jest mi absolutnie niezbędne do pracy.

8:40Ma to przede wszystkim wymiar taki, że rozszerzenia rozwijane przez niezależnych

8:44developerów lubią sprawiać różnego rodzaju problemy.

8:48Z tego powodu ograniczam ich wykorzystanie do niezbędnego minimum, ponieważ nie chcę

8:52dokładać sobie pracy związanej z ich konfiguracją, crashami aktualizacjami i

8:57wieloma różnymi innymi konfliktami, które można z łatwością spotkać.

9:01Jednocześnie nie zamykam się tutaj na instalację jakiś dodatkowych wtyczek oraz

9:06raz na jakiś czas przeglądam sobie artykuły np.

9:08takie jak ten, w ramach których można spotkać różnego rodzaju techniki i

9:13praktyki, o których wcześniej po prostu nie słyszałem, a jednocześnie mogą

9:16stanowić dodatkowy element mojego stylu pracy.

9:20No i teraz myślę, że warto jeszcze rzucić

9:21okiem na Sublime Text, w przypadku którego przede wszystkim należy zainstalować

9:26Package Control do tego, aby móc instalować nowe wtyczki i w moim przypadku są to

9:30AdvancedNewFile ułatwia tworzenie plików

9:32AutoFileName ułatwiająca wpisywanie nazw plików np.

9:36w momencie gdy je importujemy do kodu.

9:38Poza nią naturalnie mamy tutaj Emmet ESLint oraz Formatter.

9:42W przypadku Formattera pokazywałem Ci jak działa w przypadku np.

9:46obiektów JSON, ale oczywiście również sprawdza się w pozostałych przypadkach.

9:50JavaScript Snippets to po prostu zestaw różnego

9:52rodzaju krótkich Snippetów, które ułatwiają pisanie kodu np.

9:56CL oraz tab ułatwia wpisanie console.log.

10:00Idąc tutaj dalej mamy ponownie Materialize, czyli wtyczkę umożliwiającą

10:04dostosowanie wyglądu oraz oczywiście Package Control i wsparcie dla np.

10:08PHP oraz dodatkową wtyczkę do pracy z obiektami JSON.

10:12Następną jest rekomendowana niemal wszędzie wtyczka rozszerzająca możliwości

10:17Sidebar, a konkretnie menu kontekstowego, które się tam znajduje

10:20i w zasadzie jest to już ostatnia na mojej liście.

10:23Zatem ponownie, jak widzisz, mamy tutaj

10:25przykład ograniczenia wtyczek praktycznie do minimum, a jednocześnie mam zachowaną

10:29tutaj tą maksymalną użyteczność, na której naprawdę bardzo mi zależy.

10:34No i tutaj jeszcze w kontekście edytorów chciałbym poruszyć temat ich CLI, czyli

10:38zasadniczo komendy subl oraz idea, w przypadku których możemy podać ścieżkę do

10:42pliku lub katalogu, aby otworzyć je wewnątrz takiego edytora.

10:46Przykładowo, jeżeli przejdziemy sobie do

10:48katalogu demo, a następnie podam tutaj polecenie subl.

10:51No to tak jak widzisz, natychmiast

10:53otworzył się edytor na katalogu, który w danej chwili wybrałem.

10:57Analogicznie też mam tutaj makra Keyboard Maestro

10:59w przypadku których wystarczy zaznaczyć plik lub katalog, a następnie

11:03uruchomić tutaj skrypt Shell, który posługuje się dokładnie tym poleceniem, a następnie

11:08przekazuje tutaj zmienną aktualnie zaznaczonego pliku.

11:11Dodam tylko, że jeżeli chcesz

11:13skonfigurować coś takiego u siebie, to byłaby potrzeba wykorzystania tutaj akcji

11:17umożliwiającej iterowanie po zaznaczeniu plików z Findera, ponieważ w moim

11:22przypadku odbywa się to na nieco innej zasadzie.

11:25W każdym razie w takiej sytuacji chodzi po

11:27prostu o to, że mielibyśmy tutaj zmienną, w której zapisana jest ścieżka do pliku, a

11:31następnie te dwie akcje wykonali byśmy dokładnie tutaj.

11:35Efekt byłby taki, że w momencie uruchomienia tej akcji aktualnie

11:38zaznaczony plik w Finderze zostanie uruchomiony

11:41w tym przypadku w IntelliJ.

11:43W przypadku Sublime Text wygląda to dokładnie tak samo.

11:46Teraz nie będę skupiał się tutaj na wykorzystaniu Keyboard Maestro, aczkolwiek

11:50miej na uwadze sam fakt możliwości uruchomienia tych aplikacji np.

11:54skrótem klawiszowym i tym samym ułatwienia sobie rozpoczęcia pracy nad projektem.

11:59Teraz jeżeli chodzi o samą konfiguracja edytorów, to byłoby już na tyle,

12:03dziękuję Ci za uwagę i zapraszam do kolejnej lekcji.