Visual Studio Code: Ustawienia fontów

1.42+

0:00Nasz edytor kodu zaczyna wyglądać całkiem nieźle natomiast jest

0:04jeszcze jedna bardzo ważna rzecz aby dobrze się patrzyło na kod a

0:08jest to nic innego jak font i font oczywiście możemy również zmienić natomiast

0:13możemy ustawić tylko takie fonty jakie mamy zainstalowane w systemie więc albo

0:17zainstalowane domyślnie w systemie albo pobrane z internetu i

0:21zainstalowane więc teraz jesteśmy na takiej stronie na git hubie programming fonts i

0:25tutaj jest kilka ciekawych przykładów fontów które ja również polecam ale w internecie

0:29znajdziesz mnóstwo takich zestawień więc wystarczy sobie znowu wyszukać best

0:33programming fonts i na pewno znajdziesz coś dla siebie więc jednym z takich

0:37fontów jest na przykład source code pro bardzo fajny font mamy courier new

0:42ten jest domyślnie praktycznie w każdym systemie tutaj

0:46mamy jeszcze jakiś inny natomiast ja z tych które polecam to jest na przykład

0:50monaco na macu domyślnie zainstalowany lub na przykład fira code więc

0:54teraz skupimy się nie na tym co jest na tej stronie poprzeglądaj sobie to później

0:58ale na tym jak ustawić font i teraz domyślnie tutaj mamy jakiś font ustawiony jeżeli

1:03przejdziemy sobie do ustawień jak widzisz nic tutaj na temat fontu nie mam oprócz font size

1:07które przedstawialiśmy w jednej poprzednich lekcji więc teraz

1:12jeśli wyszukamy sobie tutaj font to widzimy coś takiego jak font-family i właśnie

1:16na macu domyślnie jest to menlo w windowsie to będzie inny font mogę wybrać copy

1:20to settings i to nic nie zmieni ale już widzisz że podobnie jak na przykład w css

1:25fonty podajemy tutaj po przecinku a jeżeli font ma nazwę

1:29dwuczłonowa taką ze spacją pomiędzy to musimy to podać w apostrofach

1:33dlatego że w poprawnym jsonie tutaj nie możemy zawrzeć cudzysłowów w cudzysłowach

1:37czyli tutaj podamy to w ten sposób no i oczywiście edytor będzie szukał

1:41jeżeli w systemie nie ma menlo to spróbuję ustawić monaco jeżeli nie ma monaco to

1:45courier new i można to łatwo sprawdzić jeżeli tutaj usunę na przykład menlo i zapiszę

1:49to nasz font być może to zauważyłeś zmienił się na monaco w

1:53ten sposób możemy dostosować sobie font i ja na przykład mam zainstalowany

1:57bardzo fajny font taki jak fira code zapiszę

2:02i zobacz jak teraz nam się to wszystko zmieniło może nie aż tak znacznie ale

2:06zapewniam cię że ten font jest naprawdę bardzo czytelny i bardzo fajny do programowania

2:10zobaczmy czy tutaj mamy jakiś javascript coś tutaj się znajduje

2:15i wygląda to w taki oto sposób oczywiście oprócz zmiany fontu

2:19możemy również zmienić sobie line height i zobaczmy

2:23czy znajdziemy coś takiego editor lineheight

2:28oczywiście również to możemy przestawić to zależy od twoich preferencji i ja preferuję

2:32właśnie trochę większy lineheight czyli na przykład półtora zobaczmy okej

2:36półtora jest to za mało domyślnie było 0 więc

2:42zobaczmy jaki lineheight będzie większy okej wygląda na

2:48to że on tutaj jest brany w pikselach nie pamiętam jak miałem ustawione wcześniej

2:52więc ustawmy sobie na przykład 24 zobaczmy wygląda na to że tak że

2:56to jest w pikselach więc zobaczmy 30 jak będzie wyglądał

3:01warto sobie zerknąć na inne pliki być może jest delikatnie

3:05za duży przyznam że nie pamiętam teraz dokładnie jaki mam ustawiony na

3:09co dzień ale ustawmy sobie powiedzmy 26 no i to oczywiście również zależy od

3:13twoich preferencji jeżeli chodzi o inne rzeczy związane z fontami to

3:17pamiętam że mamy również coś takiego jak font ligatures to jest bardzo

3:22fajna rzecz ale przejdziemy do tego za moment zobaczmy jeszcze antialiasing

3:26jest coś takiego font aliasing

3:30i tutaj mamy domyślny ale możemy ustawić antialiased jak

3:35widzisz to w moim przypadku pogorszyło sprawę możemy ustawić none też wygląda

3:39brzydko i możemy ustawić auto więc najlepiej chyba zostawić

3:43to na default natomiast w zależności od systemu operacyjnego niektóre ustawienia tutaj

3:47mogą sprawić że będzie to wyglądało nieco lepiej więc warto o tym wiedzieć teraz

3:52przejdźmy jeszcze do ligatures dlatego że ja mam zainstalowany font fira code pokażę

3:56ci w kolejnej lekcji jak instalować fonty który właśnie ma coś takiego jak ligatures i

4:01teraz na razie nie włączyliśmy ligatures ale czym one w ogóle są

4:05będę chciał ci pokazać na przykładzie pliku javascript jeżeli

4:09tworzysz w javascript to będziesz wiedział co ja tutaj chcę zapisać na przykład gdybym sobie

4:13stworzył funkcję fn która powiedzmy przyjmuje 2 parametry

4:17xy i jest to taka funkcja strzałkowa tak zwany arrow function i

4:21ona na przykład by zwracała x plus y powiedzmy

4:25że tylko tyle to zauważ że tutaj widzimy znak takiego nawiasa

4:30nawiasu i widzimy również znak równa się i teraz czym są ligatures

4:34jeżeli sobie przejdziemy do ustawień i tutaj

4:38będę chciał wyszukać ligatures oczywiście font musi to

4:42obsługiwać musisz znaleźć taki font który to obsługuje i włączymy sobie to na copy

4:46to settings i ustawimy na wartość true zapiszę zauważ jak

4:50to nam się zmieni tutaj od razu być może zauważyłeś że ta strzałka jest teraz jednolita

4:55mimo tego że nadal są to dwa znaki czyli jeżeli teraz usunę jeden

4:59znak to jak widzisz nie zostało usunięte wszystko tylko właśnie jeden znak

5:03i te ligatures takie symbole one są różne oczywiście

5:07na przykład jak byśmy sobie tutaj zrobili x plus plus to też zauważ że ten plus plus

5:11jest takim jakby jednym symbolem to jest jedna z tych ligatures

5:15również tutaj w akcji podobnie jak byśmy sobie zrobili takie potrójne porównanie

5:19to będzie wyglądać tak nie każdemu się to musi podobać ale szczerze mówiąc ja się do tego przyzwyczaiłem

5:24na co dzień z takich ligatures korzystam również coś takiego będzie

5:28wyglądać w ten sposób czyli jeżeli dopiero zaczynasz z programowaniem to lepiej żebyś tego

5:32nie włączał bo lepiej żebyś widział wykrzyknik i na przykład 2 znaki równa się natomiast z

5:37czasem lepiej patrzy się na kod który wygląda w ten sposób czyli pojedyncze

5:41takie zawsze zaprzeczenie i podwójne o w ten sposób

5:47wygląda właśnie tak więc jeżeli chcesz takie ligatures sobie włączyć

5:51to polecam ci to właśnie włączyć w ustawieniach ale przede wszystkim musisz znaleźć font

5:56który to obsługuje i znowu polecam wpisać w internecie programming fonts ligatures

6:01tak jak jest tutaj napisane ligatures i znajdziesz takie które będą odpowiednie

6:05no i tutaj gdybyśmy jeszcze poszukali pewnie jeszcze jakieś dodatkowe ustawienia odnośnie

6:10fontów się znajdą jak fontweight powiedzmy i jeszcze kilka innych

6:14co ważne możemy również ustawić osobno font dla terminala więc

6:18jeżeli bym sobie tutaj przeszedł view do terminal to jest zbudowany terminal o którym

6:22będziemy mówić później ale jeżeli jesteśmy w lekcjach o fontach to możemy wpisać terminal

6:27font i zauważ że znajdziemy również integrated terminal font

6:31family tutaj możemy ustawić zupełnie inny font i możemy również ustawić sobie

6:35jakąś czcionkę jakąś wielkość tego fontu

6:40więc jeżeli sobie to skopiujemy to ja zaraz sobie to tutaj ustawię i

6:44również skopiujmy te ustawienia i będę chciał ustawić powiedzmy menlo

6:49i jeżeli to zapiszę to w terminalu jak widzisz już nam się zmieniło i ustawimy sobie tutaj

6:53może też na 18 pikseli wielkość fontu żeby

6:57to wszystko było dla tego kursu lepiej widoczne tutaj również będziemy

7:01mogli ustawić sobie jeżeli dobrze pamiętam lineheight dokładnie tak

7:05to jest to ustawione na jeden skopiujmy to do ustawień ustawimy

7:09na przykład na 1.2 zobaczymy jak to będzie wyglądać jeżeli bym sobie tutaj sobie wpisał ls

7:14żeby wyświetlić pliki wygląda to tak i mam wrażenie że tutaj ustawiamy

7:19lineheight jakby proporcjonalnie czyli tak jak w css

7:23do tego a że tutaj ustawiamy ten lineheight jakby w wartości pikselowej

7:27bo tak mi tutaj wygląda bo jak ustawiłem i widziałeś wcześniej na przykład półtora to

7:31był bardzo mały ten lineheight okej to zatem tyle jeżeli chodzi o fonty możesz sobie

7:35jeszcze zerknąć jakie jeszcze tutaj ustawienia się znajdują natomiast jak znajdziesz w internecie jakiś

7:40fajne font i nie wiesz że go zainstalować w kolejnej lekcji będę chciał ci pokazać jak to zrobić

7:44na macu windowsie i w linuksie