Te dodatki do Visual Studio Code odmienią Twój kod w 2021

przez Mateusz Hoffman
Mateusz wznoszący toast szampanem z logo Visual Studio Code

Szczęśliwego nowego roku! Rok 2020 już za nami, cyferka w kalendarzu całe szczęście przeskoczyła – ruszmy więc po nieznane z tym noworocznym zastrzykiem motywacji! Przykre statystyki mówią, że jedynie około 12 procent postanowień noworocznych dojdzie do skutku. „Nowy rok, nowy ja”? A może lepiej: „Nowy rok, nowe pluginy do Visual Studio Code”? Argument? Badge na GitHubie pokazują, że prawdopodobieństwo niepowodzenia i błędu jest dużo niższe.

Od najmłodszych lat jestem miłośnikiem gadżetów – zaopatrywałem się we wszystko, co sugerował mój umysł i na wszystko to na co pozwalał mój budżet. Nic dziwnego, że w świecie cyfrowych narzędzi również nie zapominam o ubarwianiu swojego życia zarówno prywatnego jak i zawodowego – te jednak zdecydowanie częściej się przydają. Bądźmy ze sobą szczerzy, keyboard pozwalający na wgrywanie jako sampla dźwięku prosiąt przydał mi się o wiele mniej niż dodatek do klasycznego Visual Studio imitujący wybuch przy każdym wpisywanym klawiszu. Co to była za frajda – pierwsza praca jako programista, pierwsze commit’y.

Dzisiaj jednak skupimy się na tych dodatkach do Visual Studio Code, które realnie usprawniają naszą pracę a dzięki ogromnej społeczności wokół IDE Microsoftu, takich smaczków nie brakuje.  Gotowy? Let’s go!

Mistrz Shaolin w świecie produktywnej pracy z kodem

Wspólne zdjęcie Johna Papa z Mateuszem Hoffmanem podczas Microsoft Ignite 2018

Na początek mała historia. W roku 2018 miałem okazję uczestniczyć w konferencji Microsoft Ignite organizowanej w Orlando, USA. Pośród wielu ciekawych prelekcji skupiających się na technologiach chmurowych czy nowościach w świecie .NET, odbywały się też prelekcje o charakterze luźnych tips&tricks w obszarze narzędzi, języków programowania. Na zdjęciu powyżej widzicie niesamowicie utalentowanego mistrza kodu… a obok stoi jakiś łysy facet. A tak poważnie, nie jest to bynajmniej znany lekarz i policjant Johnny Sins a jeden z moich ówczesnych (w sumie też obecnych) idoli, John Papa – twórca internetowych treści w obszarze technologii webowych oraz etatowo Developer Advocate w firmie Microsoft.

Sesja dotyczyła sztuczek w obszarze deploymentu aplikacji opartych o MEAN stack. Była jednak czymś zdecydowanie więcej – była też pokazem produktywności przy pracy prelegenta, który z prędkością światła wstukiwał kolejne linijki kodu, posiłkując się przy okazji różnymi dodatkami i snippetami. Zaimponowało mi to nawet o wiele bardziej niż samo „mięso” tej prezentacji.

Uświadomiłem sobie, że oprócz klasycznych umiejętności technicznych to właśnie te drobne usprawnienia i nawyki pozwalają nam pracować wydajniej i szybciej. Bądźmy jak John Papa…

 

Pomoc dla programisty płynąca z trzech stron

Wizualna reprezentacja trójpodziału pluginów
Dodatki, które dziś Ci przedstawię można rozmieścić w trzech kategoriach opartych o ich przeznaczenie. Każda z nich jest moim zdaniem równie ważna, co przedstawia ten zmyślny i skomplikowany rysunek powyżej. Te kategorie to:

  • Wizualne – dodatki poprawiające estetykę środowiska pracy. W tej kategorii znaleźć możemy wszelkiego rodzaju motywy kolorystyczne, ikony czy chociażby czcionki. Przy stanowisku roboczym dbamy o ładny i ergonomiczny setup z racji, że spędzamy przy nim wiele czasu. To samo dotyczy środowisk cyfrowych/wirtualnych.
  • Użytkowe – takie klasyczne, funkcjonalne mięso (czy też ciecierzyca dla osób z roślinną preferencją żywieniową). Dodatki pozwalające nam na integrację/interakcje z różnymi usługami zewnętrznymi, skróty i snippety pozwalające nam na zwiększenie szybkości naszej pracy oraz wiele, wiele innych. Pomysłowość autorów nie zna granic.
  • Czemunie – nie samymi mądrymi książkami człowiek żyje. Lubimy mieć dziesiąty z rzędu kubek ze śmiesznym pieskiem i pasującą do niego foremkę na jajko. Tutaj znajdziemy mniej użyteczne ale niemniej satysfakcjonujące dodatki z pogranicza kiczu. No zrzuć z twarzy tę poważną minę, uśmiechu trochę!

Dodatki wizualne

Czcionka Fira Code – nie tylko czytelność

Przejdź do strony dodatku »

Na pierwszy ogień leci znana i lubiana sporej części programistów czcionka Fira Code. Czcionka będąca de facto rozszerzeniem popularnej czcionki Fira Mono (kategoryzowanej często jako „ta nerdowska”) o ligatury.

Jak podaje Wikipedia: Ligatura – połączenie dwóch lub więcej liter w jedną. W typografii jest to czcionka lub glif w foncie cyfrowym, których oczko zawiera co najmniej dwie połączone litery w postaci jednego wspólnego, nowego znaku, np. w połączeniu liter fi, gdy kropka z litery i jest jednocześnie końcem litery f.

Super tylko przecież to nie przyda mi się w kodzie, nie? Jak to mówi Radek Kotarski: „Nic bardziej mylnego”. Programiści na co dzień mają okazję używać symboli takich jak chociażby:

  • => (lambda/arrow function)
  • >, <, <=, >= (znaki graficzne mniejszości/większości)
  • ==, =!= (równość, zaprzeczenie równości)
  • wiele innych jak := czy ++

Przykłady ligatur dostępnych w czcionce Fira Code

Małe usprawnienie dla człowieka, wielkie odciążenie dla jego mózgu. Informacje dotyczące procesu instalacji i konfiguracji znajdziesz w podlinkowanym repozytorium.


Motyw Tokyo Night – nie przypomina stolicy Japonii ale dobrze się koduje

Przejdź do strony dodatku »

Bez zbędnego wyjaśniania przedstawiam Ci kolejny z proponowanych przeze mnie dodatków wizualnych – tym razem jest to motyw/skórka do naszego IDE. Pomimo, że temat jest dosyć sporny i mocno indywidualny, wyniki wielu badań i ankiet pokazują zdecydowaną przewagę ciemnych motywów jako pierwszy wybór przy pracy z kodem (co być może wynika z lepszej tolerancji naszego oka)

Wyniki jednej z ankiet dotyczących preferencji kolorystycznej motywów IDE. Zwycięstwo ciemnych 92% nad 8% jasnymi.

Motyw, który dziś dla Ciebie wybrałem zalicza się właśnie do tych ciemnych. Testując wiele różnych palet kolorystycznych, najbardziej przypadają mi do gusty motywy z odcieniami koloru niebieskiego (a według psychologii koloru, niebieski uspokaja umysł i pobudza naszą kreatywność).

Zrzut ekranu prezentujący motyw

Mógłbyś pomyśleć: „Co to za różnica – podoba mi się coś to pobieram i tyle”. Przyznaję Ci tu pełną zgodę – warto jednak pamiętać, że odpowiednio przygotowane środowisko i narzędzia przynoszą długofalową korzyść przy pracy.


Dodatki użytkowe

Regex Previewer – bohater na którego nie zasługujemy

Przejdź do strony dodatku »

Zaczynamy od zagadki: co jest ulubionym zajęciem programisty podczas pracy nad turbo ważnym projektem? Spójność z wymaganiami? Kubek ciepłej kawy? Ależ skądże! Wiadomo, że chodzi o bezsensowne bujanie się z dopracowywaniem wyrażeń regularnych. A tak na poważnie to nie znam osobiście nikogo, kto skrycie kocha się z RegExp’em.

Zrzut ekranu z Visual Studio Code

No więc tutaj z odsieczą przychodzi do nas Christof Marti z dodatkiem umożliwiającym nam pracę z wyrażeniami regularnymi w dokumentach otwartych side-by-side wewnątrz Visual Studio Code. Prosta rzecz a cieszy!


GitLens – kontrola wersji na sterydach

Przejdź do strony dodatku »

Jako programista, miałem przyjemność pracować zarówno z Git’em jak i SVN’em – lawirując od dedykowanych narzędzi, przez CLI (bo tak wygląda bardziej profesjonalnie), wracając znów do narzędzi (bo jednak łatwiej dla leniwych) i kończąc na klasycznym „to zależy”.

Zrzut ekranu z Visual Studio Code

Visual Studio Code oferuje nam udogodnienia przy pracy z Git’em już out-of-the-box aczkolwiek w realiach pracy zawodowej, często brakuje nam szybkiego dostępu do historii commitów, adnotacji w plikach, klarownego widoku dostępnego drzewa branchy czy innych nieco bardziej zaawansowanych funkcji. Wtyczka GitLens stała się już pewnego rodzaju standardem w setupach wielu programistów aczkolwiek uznałem, że nie mogło jej zabraknąć i dziś.


Import Cost – Twój bundle Ci za to podziękuje

Przejdź do strony dodatku »

Sztuka pisania czystego i spójnego kodu jest bardzo istotna. Niemniej jednak większość takich zabiegów pozwala nam na poprawę jakości wewnątrz organizacji oraz zapobiega powstawaniu niepotrzebnych błędów w procesie produkcyjnym. Rozwój technologii, „powszechności innowacji”, co przekłada się na konkurencyjność i wyścig o jak najlepsze doświadczenie użytkownika. Optymalizacja kodu oraz dbanie o jego performance jest już dziś standardem o którym nie możemy zapominać aby nie „wypaść z gry”. Jednym z elementów na który musimy zwracać uwagę jest wielkość paczki, którą publikujemy – wpływa ona naturalnie na to jak duże assety będą musiały zostać zaciągnięte przez przeglądarkę użytkownika. Potrafi to być dosyć żmudne w momencie kiedy przychodzi nam o takowe aspekty dbać manualnie.

Zrzut ekranu z Visual Studio Code

Tutaj z pomocą przychodzi wtyczka Import Cost, która w liniach importu paczek 3rd party wyświetla nam informację o jej wielkości w zależności od tego jak dużą część z nich staramy się zaciągnąć. Taka informacja daje nam jasny sygnał do zastanowienia się czy aby na pewno potrzebujemy zaimportować paczkę w całości czy tylko niektóre, niezbędne jej elementy.

Ułatwia prace i poprawia nawyki. Win-win.


Dodatki z kategorii „Czemunie”

Power Mode – poczuj się jak tytan kodu

Przejdź do strony dodatku »

Dodatek bardzo podobny do tego opisywanego w historycznym wstępie wpisu. Dodatkowo nalicza wskaźnik combo –  zmotywuje Cie do pisania ale niestety jednocześnie zwiększy ilość kodu pisanego bez zastanowienia żeby nie przerwać serii. Ach i te efekty rodem z Hollywood!

Zrzut ekranu z Visual Studio Code


VSinder – poznaj kogoś dzięki swojej klasie… w kodzie

Przejdź do strony dodatku »

„Sześciopak na brzuchu? Opel Astra w gazie? Pff! Pokaż mi swój kod!” – tak właśnie będzie wyglądał powszechny flirt na ulicy… nigdy. Ale nic nie szkodzi, mimo wszystko w Twoim IDE możesz spróbować szczęścia w miłości.

VSinder, czyli VS Code’owa wersja Tindera stworzona przez YouTubera Ben’a Awad’a pozwala na wykorzystanie znanej mechaniki swipe’owania do poszukiwania swojej kodowej drugiej połówki.

Zrzut ekranu z Visual Studio Code

Nie ma się tu co rozpisywać, sprawdź to sam. A jeżeli interesuje Cie ten projekt od zaplecza, polecam Ci film w tej tematyce na jego kanale:


Słowem zakończenia

Mam nadzieje, że spodobała Ci się moja lista propozycji wtyczkowych na 2021 rok. W przyszłości zamierzam opublikować poradnik dotyczący podstaw tworzenia własnych wtyczek do Visual Studio Code, co może być doskonałą okazją dla wielu z Was do stworzenia czegoś, co odmieni życie tysięcy programistów i kto wie… być może znajdzie się na podobnej liście u kogoś na świecie!

Spełniania postanowień w Nowym Roku,

Darmowy ebook dla subkrybentów

You may also like