cresvin.pl

Rozszerzenia do VSCode, którę musisz mieć!

Praktyczne i popularne rozszerzenia do Visual Studio Code, które każdy web deweloper powinien znać i mieć w swoim edytorze.

Wprowadzenie

Jeśli spędzasz dużo czasu w Visual Studio Code, dobrze dobrane rozszerzenia mogą znacznie przyspieszyć Twoją pracę i poprawić komfort kodowania. Poniżej znajdziesz listę sprawdzonych narzędzi, które warto zainstalować, niezależnie od tego, czy tworzysz aplikacje webowe, REST API, czy pracujesz z Tailwindem, Reactem albo MDX. To zestawienie pomoże Ci zautomatyzować wiele powtarzalnych czynności i skupić się na tym, co najważniejsze - pisaniu dobrego kodu.

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense

To rozszerzenie zapewnia inteligentne podpowiedzi i automatyczne uzupełnianie klas Tailwind CSS w trakcie pisania. Dzięki niemu nie musisz pamiętać wszystkich klas - edytor sam podpowie Ci właściwe nazwy, pokaże podgląd stylów, a także ostrzeże, gdy wpiszesz coś nieprawidłowego. To ogromna oszczędność czasu dla każdego, kto pracuje z Tailwindem.

Template String Converter

To małe, ale niezwykle przydatne narzędzie automatycznie przekształca zwykłe stringi na template stringi (czyli zapisane za pomocą ), gdy tylko zaczniesz wpisywać ${. Dzięki temu nie musisz ręcznie zmieniać cudzysłowów, co pozwala szybciej pisać dynamiczne wyrażenia w JavaScripcie i TypeScripcie.

Template String Converter

Prettier - Code formatter

Prettier to jedno z najpopularniejszych narzędzi do automatycznego formatowania kodu. Działa w wielu językach, takich jak JavaScript, TypeScript, CSS czy JSON, i pozwala zachować jednolity styl w całym projekcie. Po zapisaniu pliku kod jest automatycznie porządkowany zgodnie z wcześniej zdefiniowanymi regułami, co znacząco poprawia jego czytelność.

Prettier - Code formatter

ES7+ React/Redux/React-Native snippets

To rozszerzenie znacznie przyspiesza pracę z Reactem, Reduxem i React Native, oferując gotowe snippet-y do tworzenia komponentów, hooków czy funkcji Reduxowych. Zamiast pisać wszystko od zera, możesz używać prostych skrótów, które rozwijają się w pełne bloki kodu - zgodne z aktualnymi standardami ES7+ i TypeScriptem.

ES7+ React/Redux/React-Native snippets

Live Server

Live Server to idealne rozwiązanie, jeśli pracujesz z klasycznymi stronami HTML/CSS/JS. Umożliwia uruchomienie lokalnego serwera deweloperskiego z funkcją automatycznego przeładowywania strony przy każdej zmianie w pliku. Dzięki temu natychmiast widzisz efekty swoich działań bez konieczności ręcznego odświeżania przeglądarki.

ES7+ React/Redux/React-Native snippets

Thunder Client

Thunder Client to lekki, szybki i wygodny klient REST API, zintegrowany bezpośrednio z VS Code. Jest świetną alternatywą dla Postmana, zwłaszcza jeśli nie chcesz opuszczać edytora. Pozwala na testowanie endpointów, analizę odpowiedzi, zapisywanie kolekcji zapytań i korzystanie z różnych środowisk - wszystko z poziomu jednego panelu.

Thunder Client

MDX

To rozszerzenie wprowadza pełne wsparcie dla plików .mdx, które łączą składnię Markdowna z komponentami React. Dzięki niemu zyskujesz podświetlanie składni, lepsze IntelliSense dla JSX w treści Markdowna oraz ogólny komfort pracy przy dokumentacji i blogach tworzonych w MDX.

MDX