Visual Studio Code (VS Code) oferuje wiele cennych funkcji i skrótów upraszczających tworzenie kodu HTML. Te funkcje są przydatne i pozwalają programistom spędzać mniej czasu na pisaniu kodu. Chociaż możesz nie korzystać ze wszystkich dostępnych skrótów, poznanie najważniejszych może bardzo pomóc. W tym artykule omówiono niektóre z najwygodniejszych skrótów, które należy wziąć pod uwagę podczas kodowania HTML.

Skróty Emmeta

Kod VS obsługuje Emmeta. To narzędzie ułatwia pisanie kodu CSS i HTML za pomocą skrótów. Podstawowa struktura HTML rozwija się, jeśli wpiszesz an wykrzyknik (!) a następnie naciśnij Patka.

Emmet wprowadza możliwości rozbudowy, które skracają czas potrzebny na kodowanie przy użyciu HTML w Visual Studio Code. Możesz użyć tego również w innych edytorach. Zapisywanie wyrażeń skróconych skutkuje utworzeniem kompletnych struktur w formacie HTML.

• Podstawowe skróty Emmeta: Te skróty rozszerzają niektóre powszechnie używane elementy. Pisanie na maszynie p a potem uderzyć Patka rozszerza się w <p></p>chwila P rozszerza się do <p></p>. Jeśli wpiszesz ul>li*3rozwinie się do listy zawierającej trzy elementy.
• Elementy zagnieżdżone: > może być użyte do określenia elementów potomnych. Na przykład, p>h1 rozszerza się do <p><h1></h1></p>zasadniczo tworząc <p> element zawierający element
  

  .

• Mnożenie: Mnożenie generuje wiele elementów. Dodawanie *3 do uporządkowanej listy generuje listę z trzema pozycjami.
• Atrybuty: Dodaj atrybuty do elementów HTML w nawiasach kwadratowych. Na przykład, [href=”#”] staje się <a href="#"></a>tworząc element zakotwiczenia z atrybutem href.
• Składnia podobna do CSS: Składnia jest inspirowana selektorami CSS, dzięki czemu jest znajoma i intuicyjna dla twórców stron internetowych.
• Wyrażenia matematyczne: Wewnątrz skrótów można wykonywać podstawowe operacje matematyczne. Na przykład, p>ul>li.item$*3 rozwinie się do elementu

  zawierającego uporządkowaną listę z trzema elementami listy o nazwach klas element1, element2 i element3.

Skróty rozwija się poprzez wpisanie, a następnie naciśnięcie klawisza Patka przycisk. Jeśli istnieje kilka prawidłowych wyjaśnień skrótu, przełączaj je, naciskając przycisk Patka ponownie opcja. Skróty Emmet nie są specyficzne dla VS Code. Możesz ich używać w innych edytorach obsługujących Emmet.

Zawijanie tagów

Wybierz linię lub polecenie, a następnie naciśnij Ctrl+Shift+G jeśli używasz Linuksa lub Windowsa. Jeśli używasz komputera Mac, użyj Cmd+Shift+G. Ten skrót otacza wybraną treść znacznikiem HTML.

Jest to wygodna funkcja w VS Code. Przydaje się, gdy musisz opatrzyć treść treści tagami lub gdy potrzebujesz uporządkować swój kod. Wybór może obejmować pojedynczą linię, wiele linii lub blok kodu.

Inną opcją jest kliknięcie prawym przyciskiem myszy wybranego kodu i wybranie go Owiń skrótem w menu kontekstowym. Kiedy uruchomisz polecenie zawijania tagów, pojawi się monit, w którym możesz wybrać żądaną nazwę tagu HTML. Jeśli wejdziesz pna przykład element

otacza wybrany kod.

Zawijanie tagów pomaga w znacznikach i strukturze kodu bez konieczności ręcznego wpisywania tagów otwierających i zamykających. Oszczędza to dużo czasu i zmniejsza częstość występowania błędów składniowych.

Formatowanie

Formatowanie kodu HTML to dobry sposób na zachowanie spójności i czytelności projektów. W VS Code wbudowane opcje formatowania pozwalają, aby akcja odbywała się automatycznie w HTML zgodnie z predefiniowanymi regułami.

Skrót klawiaturowy używany do formatowania HTML to Shift+Alt+F dla Windowsa i Linuksa. Shift+Opcja+F działa na macOS-ie.

Skrót może sformatować cały dokument HTML lub część kodu. Po jego naciśnięciu zastosowane zostaną reguły formatowania. Odstępy wcięć i podziały wierszy są odpowiednio dostosowywane.

Możesz także automatycznie formatować kod w VS Code.

Komentowanie

Możesz komentować lub odkomentować zarówno w pojedynczej linii, jak i w wielu liniach kodu, wybranych jednocześnie. Jeśli komentarz już istnieje, skrót usuwa go, a jeśli nie jest skomentowany, dodaje się komentarze. Komentarze w formacie HTML są zawarte w znacznikach .

Nawigacja po kodzie

Odnosi się to do możliwości poruszania się pomiędzy różnymi częściami bazy kodu lub przeskakiwania bezpośrednio do definicji w atrybutach lub tagach HTML. Używając Ctrl+] opcja w systemach Linux i Windows umożliwiająca nawigację po tagach. Użytkownicy komputerów Mac mogą korzystać Cmd+] aby przejść do znacznika zamykającego elementu. Aby przejść do znacznika otwierającego, naciśnij Ctrl+[[ dla Windows i Linux lub Cmd +[[ dla Maca.

Aby przejść do definicji atrybutu lub znacznika, użyj opcji F12 klucz. Identyfikuje odpowiedni tag zamykający lub otwierający bazę kodu, aby znaleźć właściwą lokalizację.

Nadal będziesz mieć dostęp do definicji, jeśli przytrzymasz klawisz Control i klikniesz atrybut lub znacznik HTML w systemie Windows. Naciskać Polecenie + kliknięcie w systemie macOS w celu wykonania tej samej czynności. Eliminuje to konieczność ręcznego wyszukiwania lokalizacji.

Tryb Zen

Ten tryb nie rozprasza uwagi. Ułatwia programistom skupienie się całkowicie na kodzie poprzez ukrywanie przycisków i pasków narzędzi. Aktywuj ten tryb za pomocą Ctrl+KZ skrót w systemie Windows i Cmd+KZ na Macu. Alternatywnie przejdź do Pogląd i wtedy Wygląd. Włącz Tryb Zen Tutaj.

Paleta poleceń

Jest to szeroko stosowana funkcja w VS Code i jest szczególnie przydatna dla początkujących. Reprezentuje każdą konfigurację, skrót i opcję funkcjonalności i ma formę listy.

Wszystko, co musisz zrobić, to wpisać w palecie poleceń, co chcesz zrobić. Otrzymasz różne polecenia, które Ci pomogą.

Aby uzyskać dostęp do palety poleceń, użyj opcji Ctrl+Shift+P skrót dla Windowsa. Skrót dla Maca to Cmd+Shift+P.

Wyszukaj pliki

Jeśli w bieżących plikach projektu znajduje się tekst, którego potrzebujesz, możesz uzyskać do niego dostęp, klikając ikonę Szukaj na pasku bocznym. Alternatywnie użyj Ctrl+Shift+F skrót w systemie Windows lub Cmd+Shift+F na Macu.

Usuń poprzednie słowo

Jeśli przytrzymasz klawisz Backspace, aby usunąć słowo, możesz przypadkowo usunąć inne części. Aby ograniczyć usuwanie do poprzedniego słowa, użyj opcji Ctrl+Backspace skrót w systemie Windows lub Cmd+Backspace na Macu.

Kopiuj linię

Podczas programowania programiści czasami muszą kopiować i wklejać linie do innych części projektu. W razie potrzeby można następnie wprowadzić drobne zmiany w liniach. Skrót klawiaturowy to dobry sposób na przyspieszenie tego procesu, zwłaszcza jeśli robisz to regularnie.

Skrót systemu Windows to Shift+alt+w górę Lub Shift+alt+w dół. W przypadku komputerów Mac skrót to Opcja+przesunięcie+w górę Lub Opt+shift+w dół.

Otwórz ponownie zamknięty edytor

Jeśli obsługujesz duży projekt HTML zawierający wiele plików, przypadkowe zamknięcie karty może być frustrujące. Na szczęście możesz użyć skrótu, aby otworzyć ostatnią zamkniętą kartę w VS Code

Aby ponownie otworzyć zamknięty edytor, użyj opcji Ctrl+Shift+T skrót w systemie Windows lub Cmd + Shift + T na Macu. Za pomocą tego skrótu możesz otworzyć wiele zamkniętych kart.

Przyspiesz kodowanie dzięki skrótom HTML

Wiele skrótów sprawia, że ​​korzystanie z kodu VS jest stosunkowo łatwiejsze. Chociaż dostępnych jest więcej opcji niż opisano w artykule, powyższe przedstawiają niektóre z najczęstszych, które mogą okazać się przydatne dla początkujących i doświadczonych użytkowników. Dzięki popularności VS Code korzystanie ze wszystkich funkcji może sprawić, że korzystanie z niego będzie przyjemniejsze. Wybierz skróty, których często używasz, aby zwiększyć prędkość kodowania.

Następnie powinieneś dowiedzieć się, jak porównać dwa pliki w VS Code.

Często zadawane pytania

Q: Czy skróty HTML można dostosowywać w VS Code?

A: Tak. Możesz dostosować skróty HTML w VS Code, zmieniając ustawienia użytkownika lub obszaru roboczego.

Q: Czy mogę tworzyć własne niestandardowe skróty HTML w VS Code?

A: Tak. Możesz tworzyć niestandardowe fragmenty lub skróty HTML w VS Code, definiując je w ustawieniach użytkownika lub obszaru roboczego. Umożliwia to tworzenie skrótów do często używanych wzorców kodu lub elementów niestandardowych.