Лучшие HTML-ярлыки VS Code

Visual Studio Code (VS Code) предлагает множество полезных функций и ярлыков для упрощения разработки HTML. Эти функции удобны и позволяют разработчикам тратить меньше времени на написание кода. Хотя вы можете не использовать все доступные сочетания клавиш, изучение наиболее важных из них может иметь большое значение. В этой статье рассматриваются некоторые из самых удобных сочетаний клавиш, которые следует учитывать при кодировании HTML.

Сокращения Эммета

VS Code поддерживает Emmet. Этот инструмент упрощает написание кода CSS и HTML с помощью ярлыков. Базовая структура HTML расширяется, если вы введете восклицательный знак (!) и затем нажмете Tab.

Emmet представляет возможности расширения, которые сокращают время, затрачиваемое на кодирование с использованием HTML в Visual Studio Code. Вы можете использовать это и в других редакторах. Написание сокращенных выражений приводит к созданию полных структур в HTML.

  • Основные сокращения Emmet: эти сокращения расширяют некоторые часто используемые элементы. Набрав div и затем нажав Tab, вы превратитесь в <div></div>, а pрасширяется до <p></p>. Если вы наберете ul>li*3, он расширится до списка из трех элементов.
  • Вложенные элементы : > может использоваться для указания дочерних элементов. Например, div>h1 расширяется до <div><h1></h1></div>, по сути создавая тег <div> элемент с тегом <h1> элемент внутри.
  • Умножение: при умножении создается несколько элементов. Добавление *3к упорядоченному списку генерирует список из трех элементов.
  • Атрибуты: добавьте атрибуты к элементам HTML в квадратных скобках. Например, [href=”#”] становится <a href=»#»></a>, создавая элемент привязки с href. атрибут.
  • Синтаксис, подобный CSS: синтаксис основан на селекторах CSS, что делает его знакомым и интуитивно понятным для веб-разработчиков.
  • Математические выражения : внутри сокращений можно выполнять некоторые основные математические операции. Например, div>ul>li.item$*3 расширится до элемента <div> элемент, содержащий упорядоченный список с тремя элементами списка с именами классов item1, item2 и item3.

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

Обертка тегов

Выберите строку или команду, затем нажмите Ctrl+Shift+G, если вы используете Linux или Windows. Если вы используете Mac, используйте Cmd+Shift+G. Этот ярлык оборачивает выбранный контент HTML-тегом.

Это удобная функция VS Code. Это полезно, когда вам необходимо заключить содержимое содержимого в теги или когда вам нужно структурировать свой код. Вы можете выбрать одну строку, несколько строк или блок кода.

Другой вариант — щелкнуть правой кнопкой мыши выбранный код и затем выбрать Заключить с сокращением в контекстном меню. . Когда вы запускаете команду переноса тегов, появляется приглашение, в котором вы можете выбрать желаемое имя тега HTML. Если вы введете div, например, элемент <div> элемент оборачивает выбранный код.

Обертка тегов помогает разметить и структурировать код без ручного ввода открывающих и закрывающих тегов. Это экономит много времени и снижает количество синтаксических ошибок.

Форматирование

Форматирование HTML-кода — хороший способ обеспечить согласованность и читаемость проектов. В VS Code встроенные параметры форматирования позволяют действию автоматически выполняться в HTML в соответствии с предопределенными правилами.

Для форматирования HTML используется сочетание клавиш Shift+Alt+F для Windows. и Линукс. 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+K Z в Windows и Cmd+K Z на Mac. Либо выберите Вид, а затем Внешний вид. Включите режим «Дзен» здесь.

Палитра команд

Это широко используемая функция в 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.

Копировать строку

< p>В ходе разработки программистам иногда приходится копировать и вставлять строки в другие части проекта. При необходимости в линии можно внести небольшие изменения. Сочетание клавиш — хороший способ ускорить этот процесс, особенно если вы делаете это регулярно.

Сочетание клавиш Windows — Shift+alt+up или 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?

О:Да. Вы можете настроить ярлыки HTML в VS Code, изменив настройки пользователя или рабочей области.

Вопрос: Могу ли я создать свой собственный Ярлыки HTML в VS Code?

О: Да. Вы можете создавать собственные фрагменты HTML или ярлыки в VS Code, определив их в настройках пользователя или рабочей области. Это позволяет создавать ярлыки для часто используемых шаблонов кода или пользовательских элементов.

Похожие сообщения

Как просмотреть HTML-код в Chrome Как запустить HTML Файл в коде VS Сочетания клавиш VS Code для Mac, Linux & Windows Как отформатировать код в VS Code Как запустить код в терминале в VS Code Как автоматически форматировать код в VS Code Сочетания клавиш Календаря Google – Список & Руководство Сочетания клавиш Canva &# 8211; Руководство

Отказ от ответственности: некоторые страницы этого сайта могут содержать партнерскую ссылку. Это никоим образом не влияет на нашу редакционную статью.

Вам также может понравиться Как добавить масштабирование в Outlook

Как управлять настройками подсветки клавиатуры в Windows 11

Отправить кому-либо

На адрес электронной почты От имени Пожалуйста, включите JavaScript для отправки этой формы.
Отправьте

Отсутствующее устройство

    Пожалуйста, включите JavaScript, чтобы отправить эту форму.

    < р>

    Рейтинг
    ( Пока оценок нет )
    Funtik/ автор статьи
    Понравилась статья? Поделиться с друзьями:
    Добавить комментарий