Visual Studio Code jest jednym z najpopularniejszych narzędzi wybieranych wśród twórców aplikacji internetowych. Jest to środowisko open source, całkowicie bezpłatne i wspierane przez społeczność programistyczną.
Używając Visual Studio Code macie dostep do tysięcy przeróżnych wtyczek a ich instalacja wymaga zazwyczaj jednego kliknięcia.
W tym artykule skupię się na omówieniu wtyczek szczególnie przydatnych w odniesieniu do produktywności i łatwości pracy w tym środowisku.
Tworząc moje dotychczasowe aplikacje webowe posługiwałem się zwykle Visual Studio w połączeniu z narzędziami deweloperskimi przeglądarki Mozila Firefox. Mówimy tutaj o aplikacjach ASP.NET Web Forms, ASP.NET MVC oraz ASP.NET Core MVC. Powyższe połączenie sprawdzało sie całkiem dobrze w przypadku technologii .NET.
Z uwagi na ostatnie (tymczasowe) zmiany w projektach prowadzonych przez mojego obecnego pracodawcę zacząłem pracować nad warstwą interfejsu użytkownika, tj. front-end. Wymagało to przejścia na Visual Studio Code i rozwiązania przyzwyczajeń zaczerpniętych z Visual Studio - odpowiednia konfiguracja czy instalacja wtyczek.
Wtyczka Chrome for Debugger szerzej opisana w artykule Visual Studio Code - Debugowanie aplikacji webowej spełnia swoje zadanie niezwykle dobrze. W moim przypadku wpłynęła pozytywnie na produktywność ponieważ proces rozwoju aplikacji jest podobny do tego z Visual Studio - kod aplikacji webowej możemy debugować nie opuszczając środowiska Visual Studio Code:
Jest to jedna z pierwszych wtyczek, którą zainstalowałem. Jest to zestaw najpopularniejszych motywów, które są tworzone dla różnych środowisk, tj. Sublime Text, IntelliJ IDEA oraz oczywiście Visual Studio Code.
Każdy z nas ma swoje własne preferencje kolorystyczne a ta wtyczka potrafi się dopasować do wszystkich gustów. Dla mnie domyślny motyw Sublime Text 3 był niesamowicie czytelny a przy pomocy tej wtyczki byłem w stanie dopasować Visual Studio Code do własnych preferencji.
Poniżej zrzut ekranu pokazujący dwa odmienne motywy:
Ta prosta wtyczka koloruje każde kolejne zagłębienie kodu innym kolorem w celu łatwiejszej identyfikacji każdego poziomu.
Taka koloryzacja kodu jest szczególnie pomocna w przypadku języków w których zagłębienia są istotne z punktu widzenia składni języka.
W przypadku rozbudowanych funkcji w językach takich jak JavaScript wcięcia stają sie nieco bardziej czytelne:
Jeżeli powyższe kolory sa dla Was za mało widoczne możecie sami skonfigurować inna paletę barw. Wystarczy przejść przez poniższe kroki:
// (Zmiana kolorów wymaga ponownego uruchomienia Visual Studio Code)
"indentRainbow.colors": [
"rgba(255,0,0,0.1)",
"rgba(255,0,0,0.2)",
"rgba(255,0,0,0.3)",
"rgba(255,0,0,0.4)",
"rgba(255,0,0,0.5)",
"rgba(255,0,0,0.6)",
"rgba(255,0,0,0.7)",
"rgba(255,0,0,0.8)",
"rgba(255,0,0,0.9)",
"rgba(255,0,0,1.0)",
"rgba(255,0,0,0.1)",
],
Nie jest to może najczytelniejsza paleta barw ale każdemu pozwoli zauważyć zmianę:
Jest to niezwykle przydatna wtyczka – zmienia kolor pasujących nazwiasów a jednocześnie podkreśla cały zakres, który zwijają dane nawiasy. Jeżeli dołączacie do zespołu, który rozwinął już projekt (poszczególne moduły) i chcecie dokonać poprawnej interpretacji danej funkcji ta wtyczka może okazać się niezastąpiona.
Na poniższym zrzucie ekranu możecie zobaczyć obszar, który zwija dany nawias oraz zaznaczony pasujący nawias klamrowy:
Jeżeli potrzebujecie tylko kawałka funkcjonalności ta wtyczka pozwala na szybki przegląd kodu i zaznaczenie tylko wybranego bloku (poprawnie, ze wszystkimi klamrami). Podobnie jak poprzednia wtyczka pozwala na personalizacje tj. dobór własnych kolorów czy sposób wykonywania dopasowania.
Podobnie jak w poprzednim przykładzie przechodzimy przez następujące kroki:
Funkcjonalność zaznaczania pasujących selektorów w języku HTML oraz JavaScript jest dostępna w Visual Studio Code bez instalowania żadnych wtyczek.
Jednakże to rozszerzenie jest nieco bardziej eleganckie i pozwala na większą personalizację niż rozwiązanie dostępne w Visual Studio Code. Na poniższym zrzucie ekranu możecie zobaczyć wyróżniony komponent:
Jedna z moich ulubionych wtyczek. Użyteczna zwłaszcza na wstępnym etapie pracy, gdy layout jest gotowy ale brakuje nam ukończonej implementacji API odpowiedzialnej za interesującą nas funkcjonalności.
Wtyczka ta pozwala na używanie różnych typów adnotacji dla różnych komentarzy poprzez ich odpowiednie kolorowanie:
Na powyższym zrzucie ekranu możecie zobaczyć różne typu używanych adnotacji:
W porównianiu z domyślnym sposobem przedstawiania komenatarzy dla mnie niezwykle czytelne (i trudne do przeoczenia) są ostrzeżenia i ‘do zrobienia’.
To juz ostatnie rozszerzenie wizualne – teraz pójdziemy do wtyczek bardziej technicznych bez których trudno wyobrazić sobie dalszą prace z Visual Studio Code.
Nie ulega wątpliwości, że jest to jedno z najpotężniejszych rozszerzeń dla Visual Studio Code.
Zwróć uwagę na ilość cennych informacji na temat kodu. W pierwszej kolejności możesz zobaczyć, że autorem zmian jestem ja (wybaczcie za rozmazany zrzut ekranu – nie jest to jeszcze kod dostępny publicznie).
Po drugie, umieszczając kursor na każdej kolejnej linii możesz zobaczyć historię git i autorów tych zmian:
Po trzecie, zatrzymując kursor na danej linii zobaczysz bardziej zaawansowane menu:
Możesz przeglądać historię zmian, przenieść się do zdalnego źródła czy zobaczyć wszystkie szczegóły ostatnich zmian danej osoby z zespołu.
To rozszerzenie jest ogromne i oferuje szereg naprawdę przydatnych funkcji.
Pracuje w środowisku, gdzie bardziej liczy sie wynik niż czas spędzony przez komputerem. Jest to niebywała zaleta pracy w środowisku międzynarodowym. Jeżeli jednak zależy Wam na sprawdzeniu produktywności lub/i czasu spędzonego nad projektem, warto zainteresować się wtyczką: WakaTime.
W pierwszej kolejności zakładany konto na stronie: https://wakatime.com - pozwala nam na wygenerowanie specjalnego klucza do śledzenia naszej aktywności.
Po zainstalowaniu wtyczki i załadowaniu naszego klucza wszelkie dane zaczną być gromadzone i
automatycznie pojawią się na pulpicie WakaTime, który można zobaczyć w przeglądarce:
Możecie również przejść do szczegółowego widoku projektu na którym pracujecie:
Nowoczesne programowanie zaleca/wymaga używanie lintera. Jest to narzędzie, które wykonuje analize kodu pod kątem błędów programowania, błędów stylistycznych czy związanych ze składnią. Niezwykle istotne w pracy w zespołach rozproszonych, kiedy każdy ma swoje własne preferencje pisania kodu. Wystarczy przygotować odpowiedni plik konfiguracyjny zasad ogólnych pisania kodu – każdy, kto nie będzie przestrzegał tych reguł będzie miał wyświetlane błędy po swojej stronie.
ESLint jest otwartym oprogramowaniem przygotowanym dla języka JavaScript , które działa na Node.js i wykonuje analizę kodu w locie.
Z naszej strony wymagania jest instalacja wtyczki oraz przygotowanie pliku reguł ogólnych.
ESLint jest w pełni konfigurowalny, reguły mogą być modyfikowane/usuwane/dodawane. W naszym projekcie używamy do tego pliku .eslintrc. Przykładowy zestaw reguł może przyjąć następującą postać:
{
"extends": "standard",
"rules" :{
"space-before-function-paren" : "off",
"quotes" :"off",
"no-extra-semi" :"off",
"semi" :"off",
"new-cap" :"off",
"no-undef" :"off",
"one-var" :"off",
"no-unused-vars":"off",
"comma-style":"off",
"indent" :"off",
"eol-last" :"off",
"spaced-comment":"off",
"curly":"off"
}
}
Jeżeli teraz spróbujemy napisać kod w postaci:
constructor(parentVM = null){
...
...
...
}
Efektem powyższego zapisu oraz zdefiniowanych reguł jest poniższy zrzut ekranu:
Jeżeli jednak nie mamy nic przeciwko, aby powyższa struktura była akceptowalana wystarczy dodać do pliku konfiguracyjnego poniższy wpis:
"space-before-blocks": "off"
Jak zaoszczędzić kilka sekund za każdym razem, kiedy wpisujesz w kodzie console.log celem sprawdzenia realnej wartości danego parametru? Zainstaluj powyższą wtyczkę...
Ja niestety miałem kilka problemów na samym początku – związanych z domyślną konfiguracją. Jednakże po szybkiej personalizacji bardzo polubiłem tą wtyczkę. Poniżej macie wyszczególnione wszystkie skróty klawiszowe związane z tą wtyczką:
Użycie wtyczki jest niezwykle proste. Zaznaczamy kursorem parametr, który chcemy poddać "inspekcji":
A następnie przy pomocy skrótu klawiszowego: Shift + L (w moim przypadku), poniżej zaznaczenia naszego parametru pojawia się przygotowany komentarz:
Niby to tylko kilka sekund...
To już wszystko w tym artykule!
Opisałem w nim wtyczki do Visual Studio Code z których sam korzystam i uważam za niezwykle przydatne – są to oczywiście moje własne preferencje. Korzystam jeszcze m.in z VS Live Share oraz vscode-icons. W kolejnym artykule opiszę kolejną paczkę wtyczek tak, aby każdy miał szerszą możliwość wyboru.
Mimo wszystko mam nadzieję, że używając Visual Studio Code przekonancie się do kilku z powyższych wtyczek, które poprawią Waszą produktywność i pomogą zaoszczędzić kilka cenny chwil.