Visual Studio Code (VS Code) предлага много ценни функции и преки пътища за опростяване на разработката на HTML. Тези функции са удобни и позволяват на разработчиците да отделят по-малко време за писане на код. Въпреки че може да не използвате всички налични преки пътища, научаването на най-важните може да ви помогне много. Тази статия обхваща някои от най-удобните преки пътища, които трябва да вземете предвид при HTML кодиране.
VS Code поддържа Emmet. Този инструмент улеснява писането на CSS и HTML код чрез преки пътища. Основната HTML структура се разширява, ако въведете удивителен знак (!) и след това натиснете Tab.
Emmet въвежда възможности за разширение, които намаляват времето, необходимо за кодиране с помощта на HTML в Visual Studio Code. Можете да използвате това и в други редактори. Писането на съкратени изрази води до пълни структури в HTML.
. Ако въведете ul>li*3 , той ще се разшири до списък с три елемента.
елемент вътре.
елемент, съдържащ подреден списък с три елемента от списък с имена на класове item1, item2 и item3.
Съкращенията се разширяват чрез въвеждане и след това натискане на бутона Tab . Ако има няколко валидни обяснения за вашето съкращение, преминете към тях, като натиснете отново опцията Tab . Съкращенията на Emmet не са специфични за VS Code. Можете да ги използвате в други редактори, които поддържат Emmet.
Изберете ред или команда, след което натиснете Ctrl+Shift+G, ако използвате Linux или Windows. Ако използвате Mac, използвайте Cmd+Shift+G . Този пряк път обвива избраното съдържание с HTML таг.
Това е удобна функция във VS Code. Полезно е, когато трябва да оградите съдържанието на съдържанието с етикети или когато трябва да структурирате кода си. Изборът може да бъде един ред, множество редове или кодов блок.
Друга възможност е да щракнете с десния бутон върху избрания от вас код и след това да изберете Wrap with abbreviation в контекстното меню. Когато задействате командата за обвиване на етикети, се появява подкана, където можете да изберете желано име на HTML етикет. Ако въведете div , например, a
елемент обгръща избрания код.
Обвиването на етикети помага за маркиране и структуриране на код без ръчно въвеждане на отварящи и затварящи тагове. Това спестява много време и намалява честотата на синтактични грешки.
Форматирането на HTML код е добър начин за поддържане на последователност и четливост в проектите. Във VS Code вградените опции за форматиране позволяват действието да се извършва автоматично в HTML, следвайки предварително зададени правила.
Клавишната комбинация, използвана за форматиране на HTML, е Shift+Alt+F за Windows и Linux. Shift+Option+F работи на macOS.
Прекият път може да форматира цял HTML документ или част от кода. Когато го натиснете, се прилагат правилата за форматиране. Разстоянието между отстъпите и прекъсванията на редовете се коригират съответно.
Можете също да форматирате автоматично кода във VS Code .
Можете да коментирате или декоментирате или на един ред, или на няколко реда код, както сте избрали едновременно. Ако вече съществува коментар, прекият път премахва коментара, а ако не е коментиран, се добавят коментари. Коментарите в HTML са затворени в тагове.
Това се отнася до способността да се движите между различните части на кодовата база или да прескачате директно към дефиниции в HTML атрибутите или таговете. Използване на опцията Ctrl+] в Linux и Windows за навигиране през тагове. Потребителите на Mac могат да използват Cmd+], за да отидат до затварящия таг на елемента. За да преминете към отварящия етикет, натиснете Ctrl+[ за Windows и Linux или Cmd +[ за Mac.
За да преминете към дефиницията на атрибут или таг, използвайте клавиша F12 . Той идентифицира съответния затварящ или отварящ етикет на кодовата база, за да намери правилното местоположение.
Все още ще имате достъп до дефиницията, когато задържите контролния клавиш и щракнете върху HTML атрибут или етикет в Windows. Натиснете Command+щракване върху macOS за същото действие. Това премахва необходимостта от ръчно търсене на местоположението.
Този режим е без разсейване. Това улеснява разработчиците да се съсредоточат изцяло върху кода, като скриват бутоните и лентите с инструменти. Активирайте този режим, като използвате прекия път Ctrl+KZ в Windows и Cmd+KZ в Mac. Като алтернатива отидете на Изглед и след това на Външен вид . Включете режим Zen тук.
Това е широко използвана функция във VS Code и е особено полезна за начинаещи. Той представлява всяка конфигурация, пряк път и функционална опция и е под формата на списък.
Всичко, което трябва да направите, е да въведете това, което искате да бъде направено в командната палитра. Ще получите различни команди, които да ви помогнат.
За достъп до командната палитра използвайте клавишната комбинация Ctrl+Shift+P за Windows. Прекият път за Mac е Cmd+Shift+P .
Ако в текущите файлове на проекта има текст, от който се нуждаете, можете да получите достъп до него, като щракнете върху иконата за търсене в страничната лента. Друга възможност е да използвате прекия път Ctrl+Shift+F в Windows или Cmd+Shift+F в Mac.
Когато задържите клавиша Backspace, за да изтриете дума, може случайно да изтриете други части. За да ограничите изтриването до предишната дума, използвайте клавишната комбинация Ctrl+Backspace в Windows или Cmd+Backspace на Mac.
По време на разработката програмистите понякога трябва да копират и поставят редове в други части на проекта. След това могат да се направят малки промени по линиите, ако е необходимо. Клавишната комбинация е добър начин да ускорите този процес, особено ако го правите редовно.
Прекият път на Windows е Shift+alt+нагоре или Shift+alt+надолу . За Mac прекият път е Opt+shift+up или Opt+shift+down .
Ако работите с огромен HTML проект с много файлове, може да стане разочароващо, ако случайно затворите раздел. За щастие, можете да използвате пряк път, за да отворите последния затворен раздел във VS Code
За да отворите отново затворен редактор, използвайте прекия път Ctrl+Shift+T в Windows или Cmd +Shift+T в Mac. Можете да отворите няколко затворени раздела с помощта на този пряк път.
Много преки пътища правят използването на VS код относително по-лесно. Въпреки че има повече опции от това, което е в статията, горните са някои от най-често срещаните, които начинаещи и опитни потребители могат да намерят полезни. С популярността на VS Code, възползването от всички функции може да го направи по-приятен. Изберете преки пътища, които обикновено използвате, за да увеличите скоростта на кодиране.
След това трябва да научите как да сравнявате два файла във VS Code .
В: Могат ли да се персонализират HTML преките пътища във VS Code?
A: Да. Можете да персонализирате HTML преки пътища във VS Code, като промените вашите потребителски или работни настройки.
Въпрос: Мога ли да създам свои собствени персонализирани HTML преки пътища във VS Code?
A: Да. Можете да създадете персонализирани HTML фрагменти или преки пътища във VS Code, като ги дефинирате в настройките на потребителя или работното пространство. Това ви позволява да създавате преки пътища за често използвани кодови модели или персонализирани елементи.
Научете как да промените темата, цветовете и настройките си в Windows 11 за перфектно изживяване на работния плот.
Научете топ 10 съвета и трика за Microsoft Edge, за да извлечете максимума от браузъра с помощта на нови функции и подобрения.
Научете как да активирате връзките на отдалечен работен плот на Windows 10 и получете достъп до вашия компютър от всяко устройство.
Bluetooth ви позволява да свързвате устройства и аксесоари с Windows 10 към вашия компютър без нужда от кабели. Открийте как да решите проблеми с Bluetooth.
Ако мислите как да промените потребителското име в Instagram, вие сте на правилното място. Прочетете блога от началото до края, за да разберете лесните стъпки и полезните съвети.
Синхронизирайте настройките на Windows 10 на всичките си устройства с новото приложение Настройки. Научете как да управлявате настройките за синхронизиране на вашия акаунт в Microsoft.
Открийте как да използвате Bing по-ефективно с нашите 8 съвета и трика. Научете как да подобрите търсенето си в Bing.
Опитвате се да изтриете празна страница в Word? В това ръководство ще ви покажем как да изтриете страница или празна страница в Word.
Това е един от най-големите въпроси, които потребителите задават, ако могат да видят „кой е прегледал техния профил в Instagram“. Научете как да проследите тези, които гледат профила ви!
Въпреки че телевизорът вероятно ще функционира добре без интернет връзка, ако имате кабелен абонамент, американските потребители започнаха да преминават към онлайн
