Przydatne wtyczki do VS Code

Przejdźmy zatem do przedstawienia kilku rozszerzeń, które z pewnością ułatwią/przyspieszą pracę w projektach.

Auto Close Tag

Wtyczka Auto Close Tag jest bardzo prostym mechanizmem domykającym otwarte tagi HTML (także XML). Podczas pisania kodu czasem zdarza się zapomnieć zamknąć jakiś tag co powoduje problemy z renderowaniem się strony. Ta wtyczka temu zapobiega, automatyzując ten proces. Działa to następująco: piszemy tag <div>, rozszerzenie dopisze samo tag zamykający </div> jednocześnie pozostawiając kursor wewnątrz, by można było szybko kontynuować pisanie. Można też zdefiniować listę tagów, które domykane nie będą.

Źródło: Auto Close Tag

Bracket Pair Colorizer 2

To rozszerzenie z pewnością ułatwi pracę typowym „wzrokowcom”. Działanie jego polega na tym, że dobierze w pary nawiasy i ustawi im ten sam kolor. Dodatkowo pomiędzy pierwszą a ostatnią linią danego bloku będzie widoczna pionowa linia tego samego koloru. Oczywiście konfiguracja kolorystyczna jest możliwa. Wizualnie działa to następująco:

Źródło: Bracket Pair Colorizer 2

Git Graph

Bardzo przydatne narzędzie do wizualizacji repozytorium GIT’a. Przydatne, a jednocześnie bardzo rozbudowane jeśli chodzi o możliwości. Przy pracy w dużych repozytoriach w dużych zespołach deweloperskich nie trudno o pomyłkę w wersjonowaniu kodu. Tutaj z pomocą przychodzi narzędzie Git Graph dające duże możliwości kontroli nad kodem w repozytorium.

Najważniejsze możliwości wtyczki to:

• podgląd drzewa repozytorium (branche lokalne i zdalne),
• przegląd tagów,
• możliwość tworzenia, łączenia, usuwania branchy,
• wyświetlania informacji o commitach (kto, kiedy i co dodał),
• możliwość kopiowania hashy,
• wyświetlanie i porównywanie zmian.

Źródło: Git Graph

npm, po prostu

Tego narzędzia chyba nie trzeba nikomu przedstawiać. W przypadku rozszerzenia do VS Code, pozwala ono na szybsze zarządzanie paczkami i zależnościami. Pozwala także na kontrolę poprawności zainstalowanych paczek określonych w pliku package.json. Narzędzie wskaże też, które paczki są zdefiniowane, jednak nie zostały zainstalowane lub są w wersji już niewspieranej.

Źródło: npm

CodeSnap

Kolejne rozszerzenie jest przydatne dla osób, które dzielą się swoim kodem w sposób graficzny. Pozwala ono na prezentację kodu w bardzo stylowy sposób w formie grafiki. Co tu dużo pisać, zobaczcie sami.

Źródło: CodeSnap

Prettier – Code formatter

Prettier jest jednym z najważniejszych rozszerzeń, z których korzystam. Głównym zadaniem do jakiego został stworzony jest utrzymanie spójności kodu pomiędzy programistami i środowiskami. Zapewni to jednolicie sformatowany kod pisany przez kilka osób. Uruchamia formatowanie w zależności od potrzeb: w momencie zapisu pliku lub wywołany skrótem klawiszowym. Cała konfiguracja zawarta jest w pliku .prettierrc w katalogu domowym projektu. Przykładowo:

{
  "singleQuote": true,
  "trailingComma": "all",
  "arrowParens": "always",
  "semi": true,
  "tabWidth": 2,
  "printWidth": 120
}

Źródło: Prettier – Code formatter

Podsumowanie

Przedstawiłem kilka wtyczek, których sam używam w codziennej pracy. Chciałbym poznać jakich wy używacie wtyczek w swoich projektach.