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
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
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ść
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 ++
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
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)
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ść).
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
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.
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
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”.
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
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.
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
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!
VSinder – poznaj kogoś dzięki swojej klasie… w kodzie
„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.
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,
