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

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

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

Изберете ред или команда, след което натиснете 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. Можете да отворите няколко затворени раздела с помощта на този пряк път.

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

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

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

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

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

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

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

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