VSC Extensions ALL IN ONE

Logo Visual Studio Code z napisem dodatki
Loading Likes...

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!

You May Also Like

About the Author: 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" Hobby:
  • Programowanie: Typowy front: HTML/JS/CSS Do tego: Angular 2+/IONIC/Cordova
  • Rozwój osobisty - ciągły rozwój w każdym aspekcie życia: fizycznym/psychicznym/duchowym - do tego dążę i obserwuję/uczę się od: Kołcz Majk(Michał Wawrzyniak) oraz Mateusz Grzesiak [w przyszłości planuję zainteresować się co ma do powiedzenia multimiliarder Richard Branson]
  • Grafika - swego czasu interesowałem się retuszowaniem zdjęć w Photoshopie oraz tworzeniem grafik w Illustratorze
  • siatkówka (GeoVolley Team) na pozycji środkowego
  • 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 bardziej wejść w szczegóły kadrów, ujęć itd.
  • Psychologia - niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę :(

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Facebook
Inline
Inline