Programowanie i WWW

Minimalistyczna konfiguracja Visual Studio Code

Visual Studio Code to obok narzędzi JetBrains, najpopularniejszy edytor kodu dla web developerów. Według mnie jest to w pełni zasłużone. Problem w tym że…

Visual Studio Code to obok narzędzi JetBrains, najpopularniejszy edytor kodu dla web developerów. Według mnie jest to w pełni zasłużone. Problem w tym że jego podstawowa konfiguracja, zupełnie nie spełnia moich oczekiwań. A wystarczy. kilka ustawień, aby to odmienić.

Osobiście jestem wielkim fanem optymalizacji pracy i dostosowania narzędzi w taki sposób, aby móc skupić się na pracy a nie na obsłudze aplikacji z których korzystam.

W VSC spędzam mnóstwo czasu i z tego powodu poświęciłem wiele uwagi, aby dostosować je do moich potrzeb.

Skróty klawiszowe
Skróty klawiszowe to w zasadzie absolutna podstawa efektywnej pracy. Sam zrozumiałem to jeszcze w czasach gdy pracowałem głównie w Photoshopie. Podobnie jest w przypadku Visual Studio Code. Skróty możemy przypisać w zasadzie do dowolnej akcji jaką wykonujemy.

Jednocześnie z ich pomocą jesteśmy w stanie kontrolować wyświetlanie wszystkich paneli i z tego powodu jedną z pierwszych akcji, które wykonuję przy konfiguracji IDE, jest ukrycie ich wszystkich.

W razie potrzeby po prostu wywołuję je skrótem klawiszowym. Alternatywnie włączam konkretną funkcję bezpośrednio, lub korzystając z opcji "Show All Commands", wybieram to, co mnie w danej chwili interesuje.

Efekt końcowy jest jednoznaczny: poza kodem i nazwą pliku, nie widzę żadnych innych przycisków, paneli oraz zbędnych informacji.

Sidebar
Ten również przez większość czasu jest nieaktywny, natomiast nie da się ukryć że nawigowanie po plikach projektu z pomocą sidebara jest bardzo przydatne, szczególnie w sytuacji gdy pracujemy nad nowym projektem, którego struktura nie jest nam jeszcze dobrze znana.

Poza faktem ukrywania sidebar'u, warto dodać że poruszam się po nim praktycznie wyłącznie z pomocą klawiatury. Jest to niezwykle efektywne, szczególnie w połączeniu z rozszerzeniem *Advanced New File, *które umożliwia tworzenie nowych plików i folderów bez konieczności sięgania po mysz. To mała ale bardzo, bardzo istotna sprawa w kontekście efektywności i utrzymania skupienia.

Font!
Na przestrzeni ostatnich lat wykorzystywałem różne fonty, które pozornie nie mają większego znaczenia pod kątem optymalizacji pracy. W mojej opinii odgrywają pewną rolę w kontekście emocji związanych z nawigowaniem po kodzie. Font musi być czytelny i przyjemny dla oka. To wpływa na komfort pracy a nawet czasem zdarza mi się po prostu cieszyć tym jak dobrze pracuje mi się z kodem napisanym ładnym fontem.

Przechodząc do konkretów: Fira Code i Operator Mono to moi faworyci. Operator Mono jest fontem płatnym ale po prostu go uwielbiam. Za to Fira Code dostępna jest całkowicie za darmo. Dodatkowo jeden i drugi font wspierają ligatury, których ja akurat nie jestem fanem, natomiast wiem że wiele osób nie wyobraża sobie bez nich życia 🙂 Możliwość włączenia ligatur dla fontu, znajdziesz w ustawieniach VSC.

Rozszerzenia
Szczerze mówiąc nie mam ich zbyt wiele i raczej nie zaskoczę Cię tutaj niczym szczególnym: Auto Close Tag, Advanced New File, Auto Rename Tag, Bracket Pair Colorizer, Material Theme & Icons, Quokka.js, Local History – to w zasadzie taki niezbędny setup. Cała reszta dotyczy wsparcia poszczególnych technologii i frameworków, natomiast mam ich dość dużo i szczerze mówiąc trudno mi je bezpośrednio tutaj opisywać.

*Własne style CSS dla … Visual Studio Code? *
Visual Studio Code można modyfikować pisząc własny kod CSS! Jest to możliwe z pomocą rozszerzenia Custom CSS and JS Loader. Natomiast uwaga: to rozszerzenie po włączeniu sprawia że po uruchomieniu VSC będzie Ci się wyświetlać informacja o błędzie który wymaga przeinstalowania całego programu.

Wynika to z faktu, że to rozszerzenie ingeruje w pliki VSC. Natomiast można to usunąć z pomocą rozszerzenia Fix VSCode Checksums.

Dodatkowo style należy przeładować po każdej aktualizacji VSC.

Także trochę problemów ale moim zdaniem warto, ponieważ możemy pozbyć się niechcianych przycisków, modyfikować ich wygląd a nawet dodawać nowe wizualne elementy do naszego interfejsu.

Minimalistyczna konfiguracja VSC i przydatne rozszerzenia
W tym miejscu chciałbym Cię odesłać do artykułu Caleba, od k†órego czerpałem wiele tych inspiracji, szczególnie w osiągnięciu prawdziwej, minimalistycznej konfiguracji: https://calebporzio.com/my-vs-code-setup-2

Zaznaczę tylko że część rekomendowanych przez niego ustawień warto sprawdzić. Mi np. nie podoba się opcja wyłączenia numerów linii w edytorze.

Ostatecznie jest to kwestia indywidualna i jeżeli chcesz odmienić swoje VSC, koniecznie zapoznaj się z powyższym artykułem. No i mam nadzieję że moje wskazówki, również stanowią dla Ciebie wartość.

Lista linków z Newslettera:

Superhuman – świetny klient poczty



Superhuman to świetna aplikacja do zarządzania pocztą e-mail. Jednocześnie jest bardzo droga (ponad 100 zł / mc), natomiast polecam przynajmniej wypróbować. Coś dla fanów wysokiej produktywności i minimalizmu

Dropshare – udostępnianie plików / zrzutów ekranów



Dropshare umożliwia łatwe dzielenie się plikami i zrzutami ekranu, które szybko trafiają na nasz serwer a nawet mogą być udostępnione w formie prostej strony www.

Łatwiejsza praca z API w VSC



REST Client to proste i wygodne rozszerzenie do pracy z API, bezpośrednio w Visual Studio Code. Postman / Insomnia nie są już potrzebne 🙂

Szybkie i ładne strony www w Webflow



Systemflow to framework z komponentami Figma / Webflow, umożliwiający niesamowicie szybkie tworzenie stron no-code.

Syntax.fm – podcast dla front-end developera



Syntax.fm to jedyny techniczny podcast którego słucham regularnie. Poza wartościowymi rozmowami, można dowiedzieć się dużo na temat dobrych praktyk i nowości z branży.

UDOSTĘPNIJ ARTYKUŁ:

Powiązane artykuły

Programowanie i WWW

Programiści „10x” oraz „1000x”

Słyszałeś określenie "10x programmer"? Chodzi o programistów, którzy są w stanie rozwiązywać problemy w czasie 10x krótszym niż pozostali. Często mówi się, że to mit. Czy na…

Programowanie i WWW

Co front-end developer musi wiedzieć o backendzie? 👀

Pracując jako front-end developer prędzej czy później spotkasz się z back-endem. Zła wiadomość jest taka, że zrozumienie tego co dzieje się po drugiej stronie jest potrzebne a…

Programowanie i WWW

Czy webdev kręci się w kółko? ♻️

Cześć 👋Początek roku to czas kiedy zasypują nas różnego rodzaju podsumowania tego co było i przewidywania tego co będzie.Podczas gdy w podsumowaniu nie ma nic złego, tak…

Pozostań na bieżąco!

Już nigdy nie przegapisz ważnych informacji, promocji oraz nowych kursów. Zapisz się na newsletter już teraz!

Zapisując się do newslettera akceptujesz naszą politykę prywatności