16 najlepszych rozszerzeń VS Code dla programistów internetowych

Microsoft Visual Studio Code (VS Code) to jeden z najlepszych edytorów kodu dla programistów. Od czasu premiery jego popularność wzrosła nie tylko ze względu na stabilną platformę, którą zapewnia, ale także ze względu na rozszerzalny charakter, który Microsoft w nią wbudował. Rynek rozszerzeń to bogactwo dodatków i funkcji, które pozwalają programistom dostosować VS Code do wymarzonego środowiska programistycznego. Chcemy podzielić niektóre z najlepszych dostępnych obecnie rozszerzeń VS Code, aby nie przegapić żadnego.

1. Sublime Text Keymap i Importer ustawień

Na szczycie naszej listy znajduje się trafnie zatytułowany Sublime Text Keymap and Settings Importer. W przypadku, gdy tytuł nie był wystarczająco opisowy, to rozszerzenie pozwala pobrać istniejące mapy klawiszy i ustawienia Sublime Text, dzięki czemu możesz płynnie przejść do korzystania z VS Code jako domyślnego. Ponieważ tak wielu ludzi kocha Sublime i spędziło nad tym lata, sprawienie, by VS Code zachował zdobytą pamięć mięśniową od tego edytora, ma wiele sensu.

2. Fragmenty kodu JavaScript (ES6)

Wpisywanie kodu JavaScript (lub dowolnego kodu) może być uciążliwe, gdy w kółko powtarzasz te same fragmenty kodu. To rozszerzenie pomaga to złagodzić, pozwalając zasadniczo na pisanie skrótów do często używanych fragmentów kodu. Po uruchomieniu fragment kodu po prostu zastępuje tekst i wstawia go bezpośrednio do dokumentu.

3. Koloryzator pary wsporników 2

Niezależnie od języka, który kodujesz, nawiasy prawdopodobnie będą jego główną częścią. A trzymanie ich prosto może przyprawiać o ból głowy. Ale dzięki temu rozszerzeniu VS Code możesz oznaczyć kolorami pasujące pary, aby złagodzić ten problem i pracować nad tym, aby sam kod działał — a nie edytor.

4. ESLint

Pod wieloma względami, ESLint jest linter dla JavaScriptu. Wyłapywanie błędów i udzielanie natychmiastowych informacji zwrotnych i ostrzeżeń jest niezbędne do utrzymania czystości kodu zespołu, a naprawdę nie ma lepszego sposobu na zrobienie tego w JS niż ESLint. Zdecydowanie zalecamy zainstalowanie tego tak szybko, jak to możliwe.

5. Kierownik Projektu

Problem z VS Code, który pojawia się dość często, polega na tym, jak przełączać się między różnymi projektami. Domyślnie przepływ nie jest najbardziej intuicyjny. Dlatego Project Manager stara się rozwiązać ten problem, udostępniając menu na pasku bocznym, za pomocą którego można zapisywać różne foldery i projekty Git, aby łatwo przełączać się między nimi. To nie tyle ulepszenie edytora, co podniesienie jakości życia.

6. Podgląd przeglądarki

Jednym z bardziej nieprzyjemnych elementów tworzenia stron internetowych jest ładowanie i odświeżanie treści w różnych przeglądarkach w celu przetestowania. Podgląd przeglądarki pomaga ograniczyć ilość potrzebną do zrobienia tego, zapewniając solidny podgląd Twojej pracy w samym VS Code w nowym procesie Chrome.

7. Ładniejsza

Wszyscy chcemy ładniejszego kodu. Więc prawdopodobnie wszyscy powinniśmy zainstalować Prettier, aby sobie z tym poradzić. Opis opisuje Prettier jako „opiniowany program do formatowania kodu, który wymusza spójny styl, analizując kod i ponownie drukując go z własnymi regułami, które uwzględniają maksymalną długość linii, zawijając kod w razie potrzeby”. Możesz nie chcieć używać go dla każdego języka lub projektu, więc istnieje wiele ustawień konfiguracji, dzięki którym możesz dostosować go do swoich potrzeb.

8. gitlink

Lubimy gitlink ze względu na jego prostotę. Chociaż istnieje wiele rozszerzeń Git, jedną z rzeczy związanych z gitlink jest to, że jest prosty i robi tylko jedną rzecz. I robi to dobrze. Po prostu zaznacz fragment kodu, a gitlink przeniesie Cię do repozytorium online dla tego konkretnego fragmentu. Niezwykle przydatne jest szybkie przejście do repozytorium bez względu na to, gdzie jest ono hostowane zdalnie.

9. Lepsze komentarze

Komentowanie kodu jest jednym z najważniejszych nawyków, jakie może mieć programista. Nawet bardziej niż to, komentując swój kod dobrze jest umiejętnością, która powinna być przedmiotem nauczania w każdej klasie informatycznej i kodowania bootcamp tam. To powiedziawszy, Better Comments to jedno z tych rozszerzeń VS Code, których każdy potrzebuje, ponieważ, jeśli wierzysz nazwie, pozwoli ci pozostawić lepsze komentarze w kodzie. Dzięki skrótom, które pozwalają odróżnić pytania, wykrzykniki, skomentowany kod, zapytania, alerty, podświetlenia i TODO, to rozszerzenie nie tylko ułatwi Ci życie, ale także ułatwi życie Twojego zespołu. I każdy programista, który przyjdzie po ciebie w projekcie. Nie możemy tego wystarczająco polecić.

10. Ikony kodu VS

Główną częścią dostosowywania VS Code za pomocą rozszerzeń jest faktyczne dostosowywanie. Nie tylko zmiany funkcjonalności. Dzięki ikonom VS Code edytor staje się nieco bardziej kolorowy i łatwiejszy w nawigacji. System plików jest pokryty ikonami reprezentującymi różne typy plików, które pojawiają się w eksploratorze, a także w samych kartach dokumentów. To sprawia, że ​​​​praca przez skomplikowane systemy plików jest znacznie łatwiejsza i mniej bolesna. Dosłownie czasami. Tak łatwe do odczytania ikony zapobiegają zmęczeniu oczu, a tym samym bólom głowy. Więc dla swojego zdrowia zainstaluj ikony VS Code.

11. Automatyczne zamykanie tagu

Może to my, ale wpisywanie znaczników zamykających dla dowolnego języka staje się takim obowiązkiem. Jest coś w dodawaniu tego / na końcu, co sprawia, że ​​naciśnięcia klawiszy są trochę nieprzyjemne. Nigdy strach. Automatyczne zamykanie tagu ułatwiło nam życie. Dlatego chcemy ułatwić Ci pracę. Jest to proste i łatwe, możesz pisać między nimi i po prostu wciskać klawisze, aby przejść do następnego wiersza lub do końca tego. Zainstaluj to i daj palcom przerwę od gimnastyki ręcznego zamykania tagów.

12. kolorowanie

CSS jest świetny. Wybór kolorów w CSS nie jest. Kiedy masz do czynienia z kodami szesnastkowym i wartościami RGBA, czasami trudno jest sobie wyobrazić, jaką paletę ustawiono dla witryny. To rozszerzenie pomaga złagodzić ten problem, zapewniając wizualną notatkę dla wszystkich kodów kolorów używanych w plikach. Możesz zobaczyć kolory, których używasz w samym tekście, jako wyróżnienie, dzięki czemu nie musisz ciągle przełączać się między próbkami i selektorami kolorów i tak dalej.

13. Polakod

Polacode jest jak aparat Polaroid do edytora kodu. Zaprojektowany, aby tworzenie migawek kodu było czystsze i łatwiejsze, jest to pozycja obowiązkowa dla każdego autora samouczków, który chce, aby ich kod był odpowiedni.

14. GitLens

Trudno w pełni wyjaśnić, co sprawia, że ​​GitLens jest tak świetny. Działa to tak, jakby Git i VS Code zostały zaprojektowane z myślą o sobie nawzajem, a zamiast pracować przez hierarchie wiersza poleceń, otrzymujesz wizualizacje i szczegółowe informacje, które usuwają wiele zamieszania z zespołowej pracy Git. Możesz wyświetlać rzeczy po najechaniu kursorem, zobaczyć ostatnie zmiany i adnotacje, widoki porównawcze w samym VS Code, mapy popularności, historię linii i wiele więcej. Zasadniczo jest to idealne rozszerzenie Git i uważamy, że powinieneś je zainstalować od razu.

15. Serwer na żywo

Czy kiedykolwiek chciałeś uruchomić lokalny serwer deweloperski z poziomu swojego IDE i pracować nad nim w czasie rzeczywistym? Bez względu na to, jak odpowiedziałeś na to pytanie, będziesz chciał spróbować Live Server. Bo właśnie to możesz z tym zrobić. Chociaż może to nie całkowicie wyeliminować zapotrzebowanie na produkty takie jak Local by Flywheel i MAMP, z pewnością ogranicza ich konieczność w wielu sytuacjach.

16. Upiększ

Beautify używa popularnego js-beautify, aby Twój JavaScript wyglądał ładnie i schludnie. Nie martw się o przerywane linie, dziwne odstępy i wcięcia. Wystarczy kliknąć przycisk, a cały kod będzie gotowy do zbliżenia (może z Polacode z góry).

Wniosek

Ta lista może zawierać tysiące pozycji. W rzeczywistości prawdopodobnie niektórzy z was mają zainstalowane setki różnych rozszerzeń, które można włączać i wyłączać w różnym czasie. Ale uważamy, że są to rozszerzenia VS Code, które możesz zainstalować, a następnie dowiedzieć się, czego jeszcze chcesz, gdy zagłębisz się w rynek.

Jakie są Twoje rozszerzenia VS Code? Daj nam znać w komentarzach!

Artykuł wyróżniony obrazem autorstwa SVIATLANA SHEINA / shutterstock.com