Най-добрите VS Code HTML преки пътища

Най-добрите VS Code HTML преки пътища

Visual Studio Code (VS Code) предлага много ценни функции и преки пътища за опростяване на разработката на HTML. Тези функции са удобни и позволяват на разработчиците да отделят по-малко време за писане на код. Въпреки че може да не използвате всички налични преки пътища, научаването на най-важните може да ви помогне много. Тази статия обхваща някои от най-удобните преки пътища, които трябва да вземете предвид при HTML кодиране.

Най-добрите VS Code HTML преки пътища

Емет съкращения

Най-добрите VS Code HTML преки пътища

VS Code поддържа Emmet. Този инструмент улеснява писането на CSS и HTML код чрез преки пътища. Основната HTML структура се разширява, ако въведете удивителен знак (!) и след това натиснете Tab.

Emmet въвежда възможности за разширение, които намаляват времето, необходимо за кодиране с помощта на HTML в Visual Studio Code. Можете да използвате това и в други редактори. Писането на съкратени изрази води до пълни структури в HTML.

  • Основни съкращения на Emmet : Тези съкращения разширяват някои често използвани елементи. Въвеждането на div и след това натискането на Tab се разширява до, докато p се разширява до

    . Ако въведете ul>li*3 , той ще се разшири до списък с три елемента.

  • Вложени елементи : > може да се използва за указване на дъщерни елементи. Например div>h1 се разширява до, като по същество създава елемент с

    елемент вътре.

  • Умножение : Умножението генерира множество елементи. Добавянето на *3 към подреден списък генерира списък с три елемента.
  • Атрибути : Добавете атрибути към HTML елементи в квадратни скоби. Например [href=”#”] става, създавайки anchor елемент с атрибут href.
  • Синтаксис, подобен на CSS : Синтаксисът е вдъхновен от CSS селекторите, което го прави познат и интуитивен за уеб разработчиците.
  • Математически изрази : Можете да извършвате някои основни математически операции в съкращения. Например div>ul>li.item$*3 ще се разшири в an

    елемент, съдържащ подреден списък с три елемента от списък с имена на класове item1, item2 и item3.

Съкращенията се разширяват чрез въвеждане и след това натискане на бутона Tab . Ако има няколко валидни обяснения за вашето съкращение, преминете към тях, като натиснете отново опцията Tab . Съкращенията на Emmet не са специфични за VS Code. Можете да ги използвате в други редактори, които поддържат Emmet.

Обвиване на етикети

Най-добрите VS Code HTML преки пътища

Изберете ред или команда, след което натиснете Ctrl+Shift+G, ако използвате Linux или Windows. Ако използвате Mac, използвайте Cmd+Shift+G . Този пряк път обвива избраното съдържание с HTML таг.

Това е удобна функция във VS Code. Полезно е, когато трябва да оградите съдържанието на съдържанието с етикети или когато трябва да структурирате кода си. Изборът може да бъде един ред, множество редове или кодов блок.

Друга възможност е да щракнете с десния бутон върху избрания от вас код и след това да изберете Wrap with abbreviation в контекстното меню. Когато задействате командата за обвиване на етикети, се появява подкана, където можете да изберете желано име на HTML етикет. Ако въведете div , например, a

елемент обгръща избрания код.

Обвиването на етикети помага за маркиране и структуриране на код без ръчно въвеждане на отварящи и затварящи тагове. Това спестява много време и намалява честотата на синтактични грешки.

Форматиране

Най-добрите VS Code HTML преки пътища

Форматирането на HTML код е добър начин за поддържане на последователност и четливост в проектите. Във VS Code вградените опции за форматиране позволяват действието да се извършва автоматично в HTML, следвайки предварително зададени правила.

Клавишната комбинация, използвана за форматиране на HTML, е Shift+Alt+F за Windows и Linux. Shift+Option+F работи на macOS. 

Прекият път може да форматира цял HTML документ или част от кода. Когато го натиснете, се прилагат правилата за форматиране. Разстоянието между отстъпите и прекъсванията на редовете се коригират съответно.

Можете също да форматирате автоматично кода във VS Code .

Коментиране

Най-добрите VS Code HTML преки пътища

Можете да коментирате или декоментирате или на един ред, или на няколко реда код, както сте избрали едновременно. Ако вече съществува коментар, прекият път премахва коментара, а ако не е коментиран, се добавят коментари. Коментарите в HTML са затворени в тагове.

Кодова навигация

Най-добрите VS Code HTML преки пътища

Това се отнася до способността да се движите между различните части на кодовата база или да прескачате директно към дефиниции в HTML атрибутите или таговете. Използване на опцията Ctrl+] в Linux и Windows за навигиране през тагове. Потребителите на Mac могат да използват Cmd+], за да отидат до затварящия таг на елемента. За да преминете към отварящия етикет, натиснете Ctrl+[ за Windows и Linux или Cmd +[ за Mac.

За да преминете към дефиницията на атрибут или таг, използвайте клавиша F12 . Той идентифицира съответния затварящ или отварящ етикет на кодовата база, за да намери правилното местоположение.

Все още ще имате достъп до дефиницията, когато задържите контролния клавиш и щракнете върху HTML атрибут или етикет в Windows. Натиснете Command+щракване върху macOS за същото действие. Това премахва необходимостта от ръчно търсене на местоположението.

Дзен режим

Най-добрите VS Code HTML преки пътища

Този режим е без разсейване. Това улеснява разработчиците да се съсредоточат изцяло върху кода, като скриват бутоните и лентите с инструменти. Активирайте този режим, като използвате прекия път Ctrl+KZ в Windows и Cmd+KZ в Mac. Като алтернатива отидете на Изглед и след това на Външен вид . Включете режим Zen тук.

Палета с команди

Най-добрите VS Code HTML преки пътища

Това е широко използвана функция във VS Code и е особено полезна за начинаещи. Той представлява всяка конфигурация, пряк път и функционална опция и е под формата на списък.

Всичко, което трябва да направите, е да въведете това, което искате да бъде направено в командната палитра. Ще получите различни команди, които да ви помогнат.

За достъп до командната палитра използвайте клавишната комбинация Ctrl+Shift+P за Windows. Прекият път за Mac е Cmd+Shift+P .

Търсене на файлове

Най-добрите VS Code HTML преки пътища

Ако в текущите файлове на проекта има текст, от който се нуждаете, можете да получите достъп до него, като щракнете върху иконата за търсене в страничната лента. Друга възможност е да използвате прекия път Ctrl+Shift+F в Windows или Cmd+Shift+F в Mac.

Изтриване на предишната дума

Най-добрите VS Code HTML преки пътища

Когато задържите клавиша Backspace, за да изтриете дума, може случайно да изтриете други части. За да ограничите изтриването до предишната дума, използвайте клавишната комбинация Ctrl+Backspace в Windows или Cmd+Backspace на Mac.

Копиране на линия

Най-добрите VS Code HTML преки пътища

По време на разработката програмистите понякога трябва да копират и поставят редове в други части на проекта. След това могат да се направят малки промени по линиите, ако е необходимо. Клавишната комбинация е добър начин да ускорите този процес, особено ако го правите редовно.

Прекият път на Windows е Shift+alt+нагоре или Shift+alt+надолу . За Mac прекият път е Opt+shift+up или Opt+shift+down .

Отворете отново затворения редактор

Най-добрите VS Code HTML преки пътища

Ако работите с огромен HTML проект с много файлове, може да стане разочароващо, ако случайно затворите раздел. За щастие, можете да използвате пряк път, за да отворите последния затворен раздел във VS Code

За да отворите отново затворен редактор, използвайте прекия път Ctrl+Shift+T в Windows или Cmd +Shift+T в Mac. Можете да отворите няколко затворени раздела с помощта на този пряк път.

Ускорете кодирането с HTML преки пътища

Много преки пътища правят използването на VS код относително по-лесно. Въпреки че има повече опции от това, което е в статията, горните са някои от най-често срещаните, които начинаещи и опитни потребители могат да намерят полезни. С популярността на VS Code, възползването от всички функции може да го направи по-приятен. Изберете преки пътища, които обикновено използвате, за да увеличите скоростта на кодиране.

След това трябва да научите как да сравнявате два файла във VS Code .

Често задавани въпроси

В: Могат ли да се персонализират HTML преките пътища във VS Code?

A: Да. Можете да персонализирате HTML преки пътища във VS Code, като промените вашите потребителски или работни настройки.

Въпрос: Мога ли да създам свои собствени персонализирани HTML преки пътища във VS Code?

A: Да. Можете да създадете персонализирани HTML фрагменти или преки пътища във VS Code, като ги дефинирате в настройките на потребителя или работното пространство. Това ви позволява да създавате преки пътища за често използвани кодови модели или персонализирани елементи.


Как да промените вашата тема, цветове и други, за да направите страхотно изживяване на работния плот на Windows 11

Как да промените вашата тема, цветове и други, за да направите страхотно изживяване на работния плот на Windows 11

Научете как да промените темата, цветовете и настройките си в Windows 11 за перфектно изживяване на работния плот.

Топ 10 съвета и трика, за да извлечете максимума от Microsoft Edge

Топ 10 съвета и трика, за да извлечете максимума от Microsoft Edge

Научете топ 10 съвета и трика за Microsoft Edge, за да извлечете максимума от браузъра с помощта на нови функции и подобрения.

Как да активирате връзките на отдалечен работен плот към вашия компютър с Windows 10

Как да активирате връзките на отдалечен работен плот към вашия компютър с Windows 10

Научете как да активирате връзките на отдалечен работен плот на Windows 10 и получете достъп до вашия компютър от всяко устройство.

Как да коригирате проблеми с Bluetooth в Windows 10

Как да коригирате проблеми с Bluetooth в Windows 10

Bluetooth ви позволява да свързвате устройства и аксесоари с Windows 10 към вашия компютър без нужда от кабели. Открийте как да решите проблеми с Bluetooth.

Как да промените потребителското име в Instagram

Как да промените потребителското име в Instagram

Ако мислите как да промените потребителското име в Instagram, вие сте на правилното място. Прочетете блога от началото до края, за да разберете лесните стъпки и полезните съвети.

Windows 10 Как да: Синхронизиране на настройките на компютъра във всичките ви устройства с Windows 10

Windows 10 Как да: Синхронизиране на настройките на компютъра във всичките ви устройства с Windows 10

Синхронизирайте настройките на Windows 10 на всичките си устройства с новото приложение Настройки. Научете как да управлявате настройките за синхронизиране на вашия акаунт в Microsoft.

8 съвета и трика за по-интелигентно търсене в Bing

8 съвета и трика за по-интелигентно търсене в Bing

Открийте как да използвате Bing по-ефективно с нашите 8 съвета и трика. Научете как да подобрите търсенето си в Bing.

Как да изтриете страница в Word {Ръководство}

Как да изтриете страница в Word {Ръководство}

Опитвате се да изтриете празна страница в Word? В това ръководство ще ви покажем как да изтриете страница или празна страница в Word.

Как да видя кой е прегледал моя профил в Instagram

Как да видя кой е прегледал моя профил в Instagram

Това е един от най-големите въпроси, които потребителите задават, ако могат да видят „кой е прегледал техния профил в Instagram“. Научете как да проследите тези, които гледат профила ви!

Как да се свържете с Wi-Fi на телевизор Samsung

Как да се свържете с Wi-Fi на телевизор Samsung

Въпреки че телевизорът вероятно ще функционира добре без интернет връзка, ако имате кабелен абонамент, американските потребители започнаха да преминават към онлайн