Visual Studio Code to edytor kodu autorstwa Microsoft, ostatnimi czasy zyskujący bardzo dużą popularność. Oferuje liczne przydatne rozszerzenia oraz jest bardzo funkcjonalny. Dlatego ten artykuł przedstawia 10 rozszerzeń, które znacznie ułatwiają pracę.

Jak instaluje się pluginy w VSC? 

Po uruchomieniu edytora otwieramy panel rozszerzeń skrótem Ctrl + Shift + X. Następnie w wyszukiwarce wpisujemy nazwę rozszerzenia. Otrzymamy propozycję rozszerzeń. W celu zainstalowania danego pluginu należy kliknąć Install i Reload. Rozszerzenie będzie działać po przeładowaniu okna.

Przejdźmy do listy rozszerzeń.

Prettier

Nazwa rozszerzenia: Prettier – JavaScript formatter

Jest to rozszerzenie pozwalające na formatowanie kodu. Ujednolica kod JS i CSS. Jest on przydatny w zespołach, w których każdy programista może mieć inny zwyczaj układania kodu, tworząc spójny wizualnie kod. Po naciśnięciu Ctrl + Shift + P, należy wpisać >format i potwierdzić Enterem.

Minify

Nazwa rozszerzenia: minify

Pozwala nam na kompresje kodu JS, CSS i HTML. W związku z czym umożliwia to szybsze ładowanie strony poprzez mniejszy rozmiar plików. Kombinacja Ctrl + Shift + P, wpisujemy >minify, a następnie potwierdzamy Enterem. W katalogu pojawi się skompresowana wersja naszego pliku.

Sftp

Nazwa rozszerzenia: sftp

Synchronizacja projektu z serwerem FTP/SFTP

TODO Highlight

Nazwa rozszerzenia: TODO Highlight

Umożliwia podkreślenie każdego elementu kodu, który oznaczyliśmy komentarzem TODO lub FIXME. Należy nacisnąć Ctrl + Shift + P, następnie wpisać >todo i wybrać opcję Toggle highlight.

CSS Peek

Nazwa rozszerzenia: CSS Peek

To bardzo przydatne rozszerzenie w związku z tym, że pozwala na podgląd stylów CSS przypisanych do klasy lub identyfikatora. Po kliknięciu PPM na klase/identyfikator wybieramy z listy opcje Peek Definition. W oknie wyświetli się odpowiadający fragment CSS.

Faker

Nazwa rozszerzenia: vscode-faker

To rozszerzenie pozwala na generowanie przykładowych danych. Mamy możliwość pobrania losowego adresu, nazwiska, imienia i dziesiątki innych danych. W celu użycia rozszerzenia naciskamy kombinacje Ctrl + Shift + P, następnie wpisujemy >faker i wybieramy z listy odpowiednią kategorię.

Open-In-Browser

Nazwa rozszerzenia: open-in-browser

Proste narzędzie umożliwiające szybki podgląd strony w przeglądarce.

HTML Boilerplate

Nazwa rozszerzenia: HTML Boilerplate

To rozszerzenie zaoszczędza nasz czas, ponieważ momentalnie generuje podstawową strukturę HTML. Wewnątrz pliku .html należy wpisać html, a następnie Tab.

SVG Viewer

Nazwa rozszerzenia: SVG Viewer

Jest to bardzo przydatne rozszerzenie, ponieważ pozwala na podgląd plików SVG wewnątrz edytora VSC.

JSHint

Nazwa rozszerzenia: jshint

Ten plugin integruje JavaScript z Visual Studio Code. Ze względu na to będziesz powiadomiony o błędach od razu po ich popełnieniu. 

Wszystkie te rozszerzenia bardzo ułatwiają nam pracę w tym edytorze kodu, więc myślę, że warto je stosować.