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 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. Można to
jednak 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 któ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ć. Mnie 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.