8 Wydajne rozszerzenia kodu Visual Studio dla programistów

Chociaż Microsoft wypuścił pierwszą stabilną wersję Visual Studio Code, swojego potężnego edytora kodu zaledwie kilka miesięcy temu, do marca 2016 r. Ma już wiele rozszerzeń, które mogą przenieść doświadczenie kodowania na wyższy poziom. The oficjalne rozszerzenia kodu Visual Studio są hostowane w Visual Studio Code Marketplace, z których wiele może być świetną pomocą dla twórców stron internetowych.

W tym poście przetestowałem kilka rozszerzeń kodu VS związanych z rozwojem frontonu i sporządziłem listę tych, które znalazłem najbardziej intuicyjny, łatwy w obsłudze i wygodny. To nie jest ostateczna lista wszystkich. Poświęć trochę czasu na przeglądanie rynku i zobacz, co jeszcze może ci zaoferować, zwłaszcza że wiele wspaniałych rozszerzeń ma dopiero nadejść.

Jak zainstalować rozszerzenia kodu VS

Instalowanie rozszerzenia jest bardzo proste w Visual Studio Code, jak możesz zrób to w edytorze kodu. W VS Code Marketplace każde rozszerzenie ma własną stronę, a na górze tej strony można znaleźć polecenie, które można zainstalować z danym rozszerzeniem.

Polecenie zawsze zaczyna się od ext install semestr. Aby zainstalować rozszerzenie, po prostu naciśnij CTRL + P wewnątrz kodu VS, aby uruchomić panel Szybkie otwarcie, skopiuj i wklej to polecenie w to i wreszcie uruchom ponownie edytor kodu aby nowe rozszerzenie działało.

8 Wydajne rozszerzenia kodu Visual Studio

Fragmenty HTML

Jeśli chcesz często pisać kod HTML w Visual Studio Code, rozszerzenie fragmentów kodu HTML może być przydatnym narzędziem, ponieważ dodaje wyszukaną obsługę HTML. Chociaż kod VS ma podstawowe wsparcie dla HTML, takie jak kolorowanie składni, rozszerzenie HTML Snippets wie o wiele więcej.

Prawdopodobnie najbardziej użyteczną cechą tego rozszerzenia jest to kiedy zaczniesz wpisywać nazwę znacznika HTML (bez początkowego nawiasu kątowego), fragmenty kodu HTML szybko wyświetla listę dostępnych opcji z krótką informacją o każdej z nich.

Po kliknięciu elementu, którego potrzebujesz, fragmenty kodu HTML dodają pełny tag HTML5 z jego najczęstszymi właściwościami. Na przykład, jeśli chcesz dodać link (znacznik zakotwiczenia) do swojego dokumentu, po prostu wpisz za do kodu VS, wybierz odpowiednią opcję w wyskakującym okienku, a fragmenty HTML wstawią niezbędne fragment do edytora bez żadnych kłopotów.

Autor tego rozszerzenia zwraca również uwagę na usuwanie przestarzałych elementów, więc jeśli chcesz użyć tagu HTML, którego nie możesz znaleźć na liście podręcznej, warto sprawdzić, czy jest on nadal ważny, czy nie.
Ukończenie klasy HTML CSS

Uzupełnienie klasy HTML CSS może być przydatnym rozszerzeniem, jeśli chcesz użyć wielu Klasy CSS w twoim projekcie. Często zdarza się nam, deweloperom, że jesteśmy nie jestem całkowicie pewien dokładnej nazwy klasy, ale po prostu siedzi w głębi naszego umysłu jako pasywna wiedza.

To inteligentne rozszerzenie daje rozwiązanie tego problemu pobiera nazwy wszystkich klas CSS w bieżącym obszarze roboczym i wyświetla listę o nich.

Powiedzmy, że chcesz stworzyć witrynę za pomocą Fundacji Zurb i chcesz użyć małej siatki. Nie pamiętasz, jak dokładnie nazywa się klasy, ale wiesz, że mają nazwy semantyczne.

Po ukończeniu klasy HTML CSS wystarczy zacząć wpisywać słowo mały, a dostępne opcje pojawiają się na ekranie od razu, dzięki czemu można łatwo wybrać ten, którego potrzebujesz.
Wyświetl w przeglądarce

Przeglądanie w przeglądarce to proste, ale potężne rozszerzenie kodu Visual Studio. Może ułatwić rozwój front-end, umożliwiając spójrz na wynik swojej pracy w przeglądarce podczas kodowania. Możesz otworzyć plik HTML w domyślnej przeglądarce bezpośrednio z kodu VS, naciskając CTRL + F1 skrót klawiszowy.

Zauważ, że Widok w przeglądarce obsługuje tylko HTML, więc jeśli chcesz zobaczyć swoją stronę, musisz otworzyć plik HTML. ty nie można bezpośrednio uzyskać dostępu do przeglądarki z pliku CSS lub JavaScript.
Debugger dla Chrome

Debugger dla Chrome został zbudowany przez Microsoft i jest obecnie czwartym najczęściej pobieranym rozszerzeniem kodu Visual Studio.

Debugger dla Chrome umożliwia debuguj JavaScript w Google Chrome bez opuszczania edytora kodu. Oznacza to, że nie musisz pracować z transpilowanym JavaScriptem, który widzi przeglądarka, ale możesz wykonaj debugowanie bezpośrednio z oryginalnych plików źródłowych. Zobacz to demo, aby zobaczyć, jak to działa.

Rozszerzenie ma każdą cechę godnego debugera, takiego jak ustawienie punktu przerwania, oglądanie zmiennych, stepping, za poręczna konsola do debugowania, i wiele innych (zobacz listę funkcji pierwszego wydania).

Aby użyć tego rozszerzenia, musisz uruchomić Chrome z zdalne debugowanie włączone, i ustaw właściwą launch.json plik. To ostatnie może zająć trochę czasu, ale szczegółowe instrukcje na GitHub można znaleźć w tym, jak prawidłowo to zrobić.
JSHint

Rozszerzenie JSHint Visual Studio Code integruje popularne linter JavaScript JSHint bezpośrednio z edytorem kodu, więc możesz być informowanym o swoich błędach, gdy tylko je popełnisz. Domyślnie rozszerzenie JSHint używa domyślnych opcji lintera, które można dostosować za pomocą pliku konfiguracyjnego.

Użycie tego rozszerzenia jest dość proste, ponieważ JSHint oznacza błędy kolorem czerwonym, a powiadomienia zielonym podkreśleniem. Jeśli chcesz uzyskać więcej informacji na ten temat, po prostu najedź kursorem na podkreślone części, a JSHint unosi etykietę z opisem problemu na raz.
Fragmenty kodu jQuery

Fragmenty kodu jQuery mogą znacznie przyspieszyć tworzenie frontonu w kodzie Visual Studio, ponieważ pozwala na szybkie pisanie jQuery bez podstawowych błędów składniowych. Fragmenty kodu jQuery obecnie ma w pobliżu 130 dostępnych fragmentów możesz wywołać, wpisując odpowiedni spust.

Wszystkie fragmenty jQuery, ale jeden zaczyna się od jq prefiks. Jedynym wyjątkiem jest func wywołać to wstawia anonimową funkcję do edytora.

To przydatne rozszerzenie jest wygodną pomocą, gdy nie masz całkowitej pewności co do właściwej składni i chcesz poświęcić czas na sprawdzenie dokumentacji. Ułatwia również szybkie przewijanie dostępnych opcji.
Altana

Rozszerzenie kodu Bower VS może uczynić proces tworzenia aplikacji internetowych bardziej intuicyjnym dzięki integracji menedżera pakietów Bower z kodem Visual Studio.

Jeśli użyjesz tego rozszerzenia, użyjesz go nie musisz przełączać się między terminalem a edytorem, ale możesz łatwo wykonywać zadania zarządzania pakietami bezpośrednio w kodzie Visual Studio.

Rozszerzenie Bower prowadzi przez proces tworzenia projektu bower.json możesz także zainstalować, odinstalować, wyszukiwać, aktualizować pakiety, zarządzać pamięcią podręczną i wykonywać z nią wiele innych zadań (zobacz pełną listę funkcji).

Możesz uzyskaj dostęp do poleceń związanych z Bowerem, uruchamiając Paletę poleceń naciskając F1, pisanie na maszynie “Altana” na pasku wprowadzania, klikając “Altana” na liście rozwijanej, która się pojawi, i wybranie odpowiedniego polecenia Bower.
Historia Gita

Historia Git umożliwia Śledź zmiany projektu Git w Visual Studio Code. To rozszerzenie jest szczególnie przydatne, gdy chcesz przyczynić się do większego projektu Github i potrzebujesz sposobu na szybkie sprawdzenie modyfikacji wprowadzonych przez innych programistów.

Z zainstalowanym rozszerzeniem historii Git możesz zobacz historię całego pliku lub konkretna linia wewnątrz tego. Możesz również porównaj poprzednie wersje tego samego pliku.

Możesz uzyskać dostęp do poleceń związanych z historią Git, jeśli wpiszesz słowo “Git” do palety poleceń (F1), wybierz “Git” wewnątrz listy rozwijanej i na koniec wybierz potrzebne polecenie. Zauważ to musisz otworzyć plik którego chcesz zobaczyć historię, zanim będziesz mógł wykonać na niej jakiekolwiek działania.