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

0:00Kolejnym wątkiem, który chciałbym poruszyć

0:01w temacie terminala jest jego konfiguracja i dostosowanie w pełni do naszych potrzeb.

0:07I tutaj nie wiem jak jest w Twoim

0:08przypadku, natomiast u mnie sama kwestia wizualna odgrywa ogromną rolę.

0:12Po prostu bardzo lubię pracować z narzędziami, które dobrze wyglądają,

0:16tym bardziej, że w obszar kwestii wizualnych wchodzą nie tylko walory

0:19estetyczne, ale również użyteczne, takie jak chociażby czytelność poszczególnych

0:24elementów i wyróżnianie opcji, na które trzeba zwrócić uwagę.

0:28W temacie samego terminala muszę tutaj przyznać, że też nie jest to jakiś szczególny obszar

0:32mojego zainteresowania, który zgłębiam z wielką pasją.

0:36Jest to bardziej narzędzie, które traktuję

0:38bardzo poważnie i jednocześnie dbam o to, aby odpowiednio je skonfigurować i

0:42korzystać z możliwie najlepszych dostępnych na rynku rozwiązań.

0:45Jednym z nich jest ZSH.

0:46Jeżeli interesuje Cię co to dokładnie

0:48jest, to odsyłam Cię do artykułów na ten temat,

0:50natomiast ja nie będę się na tym skupiał,

0:52ponieważ uważam, że akurat ta teoria nie jest jakoś szczególnie istotna.

0:56Znacznie bardziej istotne i praktyczne

0:58jest to, że na stronie ohmyz.sh znajdziemy specjalny framework, który

1:03umożliwi nam łatwiejsze zarządzanie ustawieniami naszego terminala.

1:07Jest to miejsce, w którym polecam spędzić jakiś wolny wieczór i chociażby przejrzeć

1:11tutaj jakieś najciekawsze ustawienia, pluginy, motywy i różnego rodzaju skróty,

1:15której jesteśmy w stanie podłączyć do naszego terminala.

1:19Nie będziemy sobie przechodzić przez każde z

1:21nich ze względu na to, że w mojej opinii to, które wybierzemy będzie mocno zależało od

1:25naszych preferencji oraz od naszego stylu pracy.

1:28Z tego względu właśnie raczej zachęcam do tego,

1:31aby zapoznać się z dokumentacją, którą mamy tutaj oraz dostępnymi opcjami.

1:35Naturalnie też nie chodzi tutaj o to, aby od deski do deski czytać te wszystkie

1:39dokumentacje, tylko bardziej przejrzeć nagłówki i jakieś poszczególne słowa

1:43kluczowe w poszukiwaniu opcji, które mogą okazać się dla nas przydatne.

1:47Jednocześnie niewykluczone, że na

1:49przestrzeni Twojej pracy spotkasz różnego rodzaju problemy i wyzwania, które prędzej

1:54czy później skierują Cię właśnie w to miejsce w celu doinstalowania jakiejś

1:57funkcji lub też doczytania, w jaki sposób ona działa.

2:00Swoją drogą, jak już jesteśmy przy wyglądzie, to muszę tutaj przyznać, że

2:04odgrywa on w moim przypadku ogromną rolę i z tego powodu zachęcam również do

2:08przejrzenia dostępnych motywów, które możemy oczywiście dodatkowo konfigurować.

2:12W moim przypadku przez bardzo długi czas, jak nie lata pracy korzystałem z tego

2:17pierwszego i chyba najpopularniejszego motywu.

2:20Jednocześnie w ostatnich dniach trafiłem na artykuł, który świetnie opisuje różnego

2:24rodzaju triki i możliwości konfiguracji samego terminala i szczerze mówiąc jest on

2:28szczególnie dobry, ponieważ w większości ustawienia, które omawiam tak naprawdę

2:32dotyczą ustawień, z których sam korzystam od wielu lat.

2:35I tutaj za chwilę przejdziemy przez nie bardziej szczegółowo.

2:38Natomiast chciałbym właśnie zwrócić uwagę na samo

2:41zainstalowanie motywu Material, który zapewne kojarzysz z różnego rodzaju

2:45edytorów, który w tym przypadku również może pozwolić Ci na dostosowanie swojego

2:49terminala tak, aby był dopasowany wyglądem do edytora, w którym pracujesz.

2:54I tutaj też znajdziesz bardzo prostą

2:55instrukcję instalacji, która sprowadza się w zasadzie do tego, aby pobrać paczkę, a

3:00następnie w ustawieniach samego terminala przejść do profili, a następnie do

3:04zakładki Color, gdzie znajdziesz możliwość zaimportowania motywu

3:08i tak jak widzisz u mnie jest to zrobione

3:10i rzeczywiście wyświetla się tutaj Material Design Colors, w przypadku

3:13którego zresztą jak najeżdżam widać, że zmieniłem tło na nieco ciemniejsze.

3:17Jest to po prostu dla mnie zdecydowanie bardziej wygodne i swoją drogą jest to co

3:21prawda mały, ale jednak przykład dostosowania terminala do moich potrzeb.

3:26Podobnie też jak już jesteśmy w temacie

3:27moich potrzeb, to mogę tutaj zwrócić uwagę na ustawienia tekstu, w przypadku których

3:32bardzo zależało mi na wykorzystaniu fontu Operator Mono, z którym mam personalną

3:37relację, ponieważ przez lata wykorzystywałem go w edytorze kodu,

3:40natomiast pod napływem wielu komentarzy, które zawierały prośbę, abym zmienił ten

3:44mocno nieczytelny font, postanowiłem przerzucić się tam na Fira Code.

3:48Oczywiście mówię to trochę z przymrużeniem

3:50oka, ale jednocześnie zwracam uwagę na ten ważny aspekt dotyczący samych ustawień.

3:55Tutaj tylko przeklikam się przez te

3:57najważniejsze ustawienia, które mamy w poszczególnych zakładkach i oczywiście

4:02możesz wstrzymać ten materiał, aby sobie do nich zajrzeć lub też ewentualnie

4:05skorzystać z konfiguracji, którą dołączam do materiału w tej lekcji.

4:09Jednocześnie mamy tutaj jeszcze jeden bardzo istotny element, jakim są skróty

4:13klawiszowe, na które to zwracam uwagę przy praktycznie każdej możliwej okazji.

4:17Akurat tutaj w przypadku samego iTerma raczej

4:20nie wykorzystuję większości wbudowanych tutaj skrótów ze względu na to, że na co

4:24dzień raczej pracuję z Warpem, w przypadku którego wykorzystuję różnego rodzaju makra

4:29oraz tą możliwość swobodnej edycji tekstu, gdzie z kolei mogę wykorzystywać makra np.

4:34Keyboard Maestro, które jeszcze bardziej

4:36usprawniają pisanie bardziej złożonych poleceń.

4:39Tak czy inaczej zachęcam do tego, aby przejrzeć sobie listę dostępnych tutaj

4:42skrótów i ewentualnie ponownie dostosować je do swoich potrzeb.

4:47No i teraz proponuję, abyśmy wrócili do tego artykułu, który tak jak wspomniałem

4:50jest niesamowity i przede wszystkim przeprowadza nas przez instalację

4:54Homebrew, czyli Package Managera dla systemów macOS lub Linux (i ponownie Windows

4:59jest tutaj w tyle), z pomocą którego jako Full-Stack

5:02Web Developerzy będziemy w stanie instalować szereg różnych narzędzi i rozszerzeń

5:06i z tego powodu zdecydowanie warto go mieć w swoim systemie.

5:09Kolejnym elementem, o którym też już

5:11wspominałem, jest iTerm2, czyli zastępca dla wbudowanego w system terminala

5:16i w mojej opinii najlepsze dostępne na rynku aktualnie terminal.

5:19Oczywiście to może się zmienić, ponieważ Warp mocno depcze mu po piętach.

5:24W każdym razie już na tym etapie widać dlaczego zainstalowaliśmy Brew

5:27ponieważ z pomocą dosłownie jednego polecenia jesteśmy w stanie zainstalować iTerm.

5:33No i teraz kolejnym krokiem będzie

5:34zainstalowanie ZSH oraz Oh My ZSH, które ułatwi nam jego konfigurację.

5:40Zawsze pierwszą rzeczą, którą robię

5:42jest dostosowanie wyglądu

5:44aczkolwiek teraz zwracam uwagę na ten

5:46Material Team, o którym ja osobiście dowiedziałam się niedawno.

5:49No i tutaj jeżeli już chodzi o tę konkretnie konfigurację, to mamy plik zshrc,

5:53do którego możemy się dostać w następujący sposób.

5:57Tutaj na ten moment, jeżeli polecenie nano

5:59nic się nie mówi, to nie jest to nic innego jak edytor tekstu, z pomocą którego

6:03jesteśmy w stanie edytować zawartość pliku z poziomu właśnie terminala.

6:07I tutaj zazwyczaj plik konfiguracyjny, na którym nam teraz zależy znajduje się w

6:11katalogu domowym, do którego możemy odwołać się z pomocą tyldy.

6:15Mam nadzieję, że to, że wspominam o tak

6:17podstawowych elementach nie stanowi dla Ciebie większego problemu, aczkolwiek po

6:20prostu spotykam Frontend Developerów, którzy na co dzień nadal nie wykorzystują

6:24terminala lub robią to w absolutnie minimalnej formie i z tego powodu zależy

6:28mi na tym, abyśmy wszyscy mieli podobne zrozumienie.

6:31A tymczasem w tym pliku mamy kilka elementów, na które warto zwrócić uwagę,

6:35przy czym ja to teraz nie będę przechodził przez niego z wykorzystaniem edytora nano,

6:39tylko skorzystam ze skrótu klawiszowego Control X

6:42do tego, aby wyjść z pliku.

6:43A tak w ogóle to nie wiem czy to wyraźnie

6:45widać, ale tutaj mamy skróty, którymi możemy się posługiwać i tak naprawdę aby w

6:49miarę sprawnie posługiwać się edytorem nano wystarczy rzucić na nie okiem.

6:54Teraz chciałbym zwrócić Twoją uwagę na

6:56fakt, że edytory takie jak Sublime Text, Visual Studio Code czy np.

7:00IntelliJ posiadają swój interface CLI, z

7:02pomocą którego jesteśmy w stanie łatwiej otwierać pliki.

7:05I tak jak w tym przypadku normalnie musiałbym zlokalizować ten plik, a

7:08następnie otworzyć Sublime Text i otworzyć go wewnątrz niego

7:12a w tym przypadku wystarczy mi wykonanie następującego polecenia.

7:15I teraz mamy tutaj nasz plik konfiguracyjny, ale zanim do niego

7:18przejdziemy, chciałbym tylko zaznaczyć, że w przypadku wszystkich edytorów, które

7:22wymieniłem, musisz znaleźć sposób na to, aby zainstalować ich wersję CLI

7:25w swoim systemie.

7:27Sam proces różni się w zależności od systemu, natomiast w każdym przypadku jest

7:32bardzo wyraźnie opisany, więc nie widzę potrzeby, aby przez niego przechodzić.

7:36A jednocześnie mamy jeszcze tutaj kolejny wątek, który raz jeszcze podkreśla

7:39wyższość systemów macOS oraz Linux w kontekście programowania.

7:44Mianowicie tak jak widać w przypadku instalacji wersji CLI na Windowsie

7:48mamy tutaj wiele różnych kroków, które musimy podjąć i dodatkowo różnią się one w

7:52zależności od wersji systemu operacyjnego na którym pracujemy,

7:56a w przypadku Maca czy Linuxa jest to po

7:58prostu jedno polecenie, które trzeba uruchomić.

8:00I teraz co ważniejsze, to wszystko może wyglądać jak po prostu jeden mały wyjątek,

8:04natomiast w praktyce na każdym kroku gdy będziesz programować i rozwijać

8:08szczególnie Full-Stackowe aplikacje będziesz

8:11spotykać się właśnie z takimi problemami jak ten.

8:14Wracając jednak do naszego pliku konfiguracyjnego.

8:16Jak widać jest tutaj wiele różnych opcji, które są domyślnie zakomentowane.

8:20Warto je sobie przejrzeć, aby zobaczyć w ogóle co tutaj mamy dostępne,

8:24natomiast nasza uwaga w tym momencie powinna skupić się na pluginach.

8:28Tych pluginów wśród społeczności oczywiście jest nieporównywalnie więcej,

8:31natomiast w moim przypadku wystarcza w zupełności następująca lista.

8:35Ułatwia ona pracę z Gitem, Dockerem Package Managerem npm, czy też bardziej ogólne

8:40pluginy generalnie wspierające pisanie poleceń oraz obsługę samego terminala.

8:45Zdecydowanie polecam zajrzeć w dokumentację tych narzędzi.

8:49Tymczasem drugim plikiem, który będzie nas tutaj interesował będzie plik zshenv.

8:55W jego przypadku jego treść będę musiał niestety zasłonić, ponieważ mamy tutaj

8:59wiele szczegółów dotyczących realizowanych moich projektów

9:01natomiast najważniejszym fragmentem, który

9:03tutaj się znajduje jest słowo kluczowe alias.

9:06Chodzi o to, że w pracy Full Stack Web Developera istnieje wiele różnych poleceń

9:10i do różnego rodzaju skryptów, po które trzeba sięgać regularnie.

9:14Z tego powodu zamiast zapisywać lub zapamiętywać te wszystkie polecenia,

9:18znacznie lepiej jest zapisać je jako proste do zapamiętania aliasy.

9:22W ten sposób np.

9:23łączę się z wybranymi serwerami czy

9:25podłączam tutaj różnego rodzaju skrypty uruchamiające np.

9:29proces deploymentu w wybranym projekcie.

9:32Sama konfiguracja takiego aliasu jest niezwykle prosta i sprowadza się do

9:35zapisania frazy, której będziemy używać do wywołania polecenia oraz samego polecenia.

9:40Z całą pewnością z samą konfiguracją raczej nie

9:43będziesz mieć problemu, ale jednocześnie przykładowo tak jak mamy w pierwszej linii

9:47mogą pojawić się elementy, na które warto zwrócić uwagę.

9:50Przykładowo w tym przypadku wykorzystujemy

9:52zmienną przekazaną do tego konkretnego polecenia.

9:55Czyli konkretnie mamy tutaj odwołanie do aplikacji iA Writer, którą.

9:59Do pisania tekstów i analogicznie jak to było w przypadku Sublime Text czy innych

10:04edytorów kodu, wykorzystuję tutaj polecenie, do którego przekazuję właśnie

10:07zmienną w postaci nazwy pliku, który chcę otworzyć.

10:10I teraz jeszcze zostając na chwilę przy

10:12temacie aliasów, to możesz je wykorzystywać nie tylko w celu

10:15wykorzystywania bardzo skomplikowanych i złożonych poleceń, ale również w przypadku

10:19tych niesamowicie prostych, które łatwo zapamiętać.

10:22Po prostu istnieją polecenia, po które sięgamy praktycznie na każdym kroku i

10:26robimy to wielokrotnie, więc warto zastosować taką mikro optymalizację w

10:30postaci zapisania krótszego aliasu, które pozwoli nam sięgnąć po konkretne polecenie

10:35i tym samym wyeliminować ewentualną możliwość popełnienia chociażby literówki.

10:40I ostatnią rzeczą, na którą jeszcze trzeba zwrócić

10:42uwagę to samo zdefiniowanie aliasu niczego nie zmienia.

10:46Trzeba z niego korzystać i to jest chyba największą barierą, ponieważ łączy się

10:50bezpośrednio z koniecznością zmiany nawyku.

10:52Z tego powodu zachęcam do tego, aby nie

10:54instalować szeregu różnych rozszerzeń, które dodają nam mnóstwa aliasów, z

10:58których i tak nigdy nie skorzystamy, ale w zamian przygotować sobie naprawdę prostą

11:03listę aliasów, które przede wszystkim stworzyliśmy sami, więc łatwiej nam będzie

11:07je zapamiętać, a dodatkowo faktycznie będziemy z nich korzystać.

11:10Mało tego, bardzo istotnym nawykiem w

11:12kontekście aliasów i pozostałych podobnych funkcji, takich jak chociażby Text Expander

11:16jest to, aby wyrobić sobie nawyk ich dodawania.

11:20Mianowicie za każdym razem, gdy przyłapiesz się na tym, że wpisujesz jakieś długie

11:24polecenie, w przypadku którego zdarza Ci się np.

11:26popełniać błędy albo po prostu je

11:28zapominać, to jest to moment, w którym warto dodać alias.

11:32Z kolei jeszcze na sam koniec wracając do rozszerzeń, tutaj chociażby w tym artykule

11:37znajdziesz nieco bardziej rozszerzoną listę

11:39aczkolwiek dla mnie te pozostałe

11:40rozszerzenia raczej nie wnoszą żadnej wartości.

11:43Jednocześnie bardzo zachęcam do

11:45przejrzenia ich pełnej listy, która dostępna jest dokładnie tutaj.

11:48Najprostszą możliwą zasadą weryfikowania

11:51tych rozszerzeń jest po prostu sprawdzenie, które z nich dotyczą

11:54narzędzi, z którymi zdarza Ci się pracować.

11:57Przykładowo, jeżeli zdarza Ci się pracować

11:59z Flutterem, mamy tutaj właśnie jakiś plugin, który jego dotyczy i w tym

12:03przypadku jest to lista aliasów, które mogą Ci się przydać.

12:05Niewykluczone więc, że jeżeli pracujesz z Flutterem, warto będzie go zainstalować.

12:10Wszystkich rozszerzeń jak widać jest tutaj

12:11zdecydowanie więcej i nie będziemy mieć czasu na to, aby przez nie przechodzić,

12:15natomiast z dużym prawdopodobieństwem możesz uznać, że te, które pokazuję tutaj

12:20są tymi, które praktycznie każdy z nas może bez zastanowienia zainstalować.

12:25I w tym momencie chciałbym zakończyć temat konfiguracji.

12:27I chciałem tylko raz jeszcze podkreślić,

12:29że w załączniku do tej lekcji znajdziesz konfigurację, z której sam korzystam

12:33aczkolwiek jeżeli miałbym coś do tego

12:35dodać to polecam skonfigurować swój terminal od podstaw, tym bardziej, że sam

12:39proces nie jest bardzo skomplikowany i sprowadza się głównie do tego, aby

12:43zapoznać się z możliwościami, które oferuje wspomniany tutaj framework.