Wpadłem ostatnio na Tweeta, gdzie zapytano o dodatki do VSC i wysypała się fala komentarzy. Przejrzałem większość i oto mamy dla was najlepsze dodatki. Wpis mega długi – 24 pozycje z czego w niektórych po kilka linków. Osobiście uważam, że lepiej jest umieścić w jednym miejscu najważniejsze rzeczy niż rozbijać to na parę wpisów. Zawsze możesz wrócić do nas i dokończyć research później. Nie dodawałem gifów ani obrazków ze względu na przejrzystość – całość krótko opisana, podlinkowane tytuły do pozycji na markecie. Wystarczy kliknąć zainstaluj.

1. Bracket Pair Colorizer – nie ma nic gorszego niż masa {}() nawiasów obok siebie. Konwencje i różne narzędzia do upiększania kodu są pomocne, ale jeśli mamy naprawdę dużo nawiasów (zwłaszcza tych kończących) to można się pogubić. Dzięki Bracket Pair Colorizer każda para nawiasów będzie w innym kolorze lub jeśli chcesz może być w takim samym kolorze w zależności od poziomu kodu.
2. HTML Snippet – zaczynasz wpisywać jakiś tag, a po zatwierdzeniu Tab’em rozszerzenie nam go dokańcza.
3. WakaTime – specjalny dodatek, który kontroluje naszą pracę. Zbiera różne statystyki, które później możemy sprawdzić na stronie. Coś jak smart opaska do kontrolowania funkcji życiowych, tylko w tym wypadku funkcji życiowych naszego programowania. 😉
4. VS Color Picker – feature, który pomaga nam w wyborze koloru. Możemy w łatwy sposób zmieniać formę zapisu koloru oraz mamy bezpośredni podgląd inline.
5. Typescript Hero – dla ludzi, którzy programują dużo w TS. Bardzo dużo funkcji, a mamy bardzo dużo rozszerzeń, dlatego nie będę opisywał dokładnie wszystkich.
   TSlint – także dla TSowiczów (podkreśla błędy).
6. SVG Viewer – otwieranie plików svg w oknie edytora. Przydatne, jeśli ktoś pracuje dużo z tego typu plikami, ale nie tylko. Często chcemy na szybko podejrzeć co to za grafika, a z tym rozszerzeniem to banalnie łatwe.
7. Sonar Lint – nie tylko podkreśla błędy, ale także w okienku “problemy” wyświetla nam informacje. Kiedy klikniemy w dany błąd, narzędzie automatycznie naprawia go.
8. Setting Sync – pozwala zaimportować nasze rozszerzenie dzięki stronie github. W ten sposób możemy dowolnie importować nasze ustawienia i rozszerzenia na wielu urządzeniach.
9. Sass – kolorowanie składni, automatyczne dokańczanie naszych poleceń i skróty. Wszystko oczywiście odnosi się do preprocesora SASS.
10. RegExp Previewer – to narzędzie ułatwiające pracę z wyrażeniami regularnymi. Mamy podgląd live – czego chcieć więcej? (no np. lepszego SEO w Angularze 😛 )
11. Quokka.js – MEGA GENIALNE rozszerzenie! Podgląd na żywo naszego wyjściowego kodu inline i nie tylko. Nietestety są 2 wersje – fajniejsza PRO, za którą trzeba zapłacić dość sporo, bo 50$, ale też wersja COMMUNITY z ograniczonymi bajerami, ale też całkiem spoko. Możecie też namówić swojego pracodawcę, który może kupić rozszerzenie za 100$.
12. Prietter – Code Formatter – piszecie brzydki kod tzn. brak spacji, enterów, czasami ich nadmiar…Zaznaczacie ctr+shift+p i wszystko formatuje się Wam w bardzo przejrzysty i elegancki sposób. MUST HAVE! 😀
    Beautify – to samo pod klawiszem F1. Wybierajcie, które lepsze.
13. Path Intellisense – podpowiedzi do ścieżek. Znacie podpowiedzi w VSC? (ctr+spacja) To jest to samo tylko, że do ścieżek.
    Path Autocomplete – to samo tylko w nieco odświeżonej formie.
14. Npm intellisense – do importowania importów i nie tylko.
15. npm – walidacja naszego package.json z kodem/edytorem
16. JavaScript ES6 code snippets – skróty do ES6, które zatwierdzamy Tab’em
17. Intellisense for CSS class name – jak sama nazwa wskazuje podpowiedzi do class.
    HTML class suggestions – podobna sprawa jak wyżej, sami zdecydujcie, który wybieracie.
18. Import Cost – pokazuje ile będzie kosztowało nas zaimportowanie danego pliku inline. Spoko, aczkolwiek są narzędzia, które same przetwarzają na końcu nasze multimedia i dopasowują (zmniejszają, minifikują) do umieszczenia na stronie internetowej.
19. Git History – bardzo przydatne narzędzie, które pomaga nam pracować przy projekcie. W genialny sposób pokazuje nam całą historię z gita.
20. Code Metrics – pomaga nam przy zasadach “clear code’u”
21. Check updates NPM – dostajemy informacje o zaktualizowaniu paczek. Nie zawsze chcemy aktualizować paczki automatycznie, a to narzędzie przypomina nam, kiedy możemy skorzystać z nowszych wersji.
22. Bootstrap 4 & Font Awesome snippets – “must have” dla każdego, kto używa Bootstrapa.
23. Auto Rename Tag – to wkurzające uczucie, kiedy musicie osobno edytować początkowy i końcowy tag html. Nigdy więcej z tym narzędziem!
24. AngularDoc for VSC – mega! Musisz sam się przekonać!
    Angular v5 Snippets – skróty od Johna Papa’y 🙂 Tak tak, to właśnie ten znany Papa John.
    Angular Language Service – podpowiedzi do pisania składni w Angularze
    Angular Essentials – paczka zawierająca najważniejsze paczki do Angulara (też Johna Papa’y)
    Angular 5 Snippets – tym razem coś od Mikael’a Marlound

Jeśli macie jakieś do uzupełnienia listy to piszcie w komentarzach!

Sebastian Mieszczańczyk

Studia: Wyższa Szkoła Ekonomii i Informatyki w Krakowie
Profil: “Informatyka i Ekonometria”
Specjalizacja: “Programowanie urządzeń mobilnych i aplikacji sieciowych”
Siatkówka (GeoVolley Team) na pozycji środkowego
Hobby:
Oprócz programowania i wszystkiego co z tym związane…
Filmy – od dawna pasjonuję się nie tylko oglądaniem filmów, ale także analizowaniem ich pod kątem stworzenia ( Mój link do filmweba) – w liceum dzięki profilowi z modułem filmowym mogłem wejść głębiej w szczegóły kadrów, ujęć itd.
Psychologia – niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę 🙁