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

элемент, содержащий упорядоченный список с тремя элементами списка с именами классов item1, item2 и item3.

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

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

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

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

элемент оборачивает выбранный код.

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

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

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

Сочетание клавиш, используемое для форматирования HTML: Shift+Alt+Ф для Windows и Linux. Shift+Option+F работает на macOS.

Ярлык позволяет форматировать весь HTML-документ или часть кода. При нажатии на нее применяются правила форматирования. Расстояние между отступами и разрывы строк корректируются соответствующим образом.

Вы также можете автоматически форматировать код в VS Code.

Вы можете комментировать или раскомментировать одну или несколько строк кода, выбранных одновременно. Если комментарий уже существует, ярлык удаляет его, а если комментарий не прокомментирован, комментарии добавляются. Комментарии в HTML заключаются в теги.

Навигация по коду

Это относится к возможности перемещаться между различными частями кодовой базы или напрямую переходить к определениям в атрибутах или тегах HTML. Используя Ctrl+) опция в Linux и Windows для навигации по тегам. Пользователи Mac могут использовать Cmd+) для перехода к закрывающему тегу элемента. Чтобы перейти к открывающему тегу, нажмите Ctrl+( для Windows и Linux или CMD +( для Мака.

Чтобы перейти к определению атрибута или тега, используйте F12 ключ. Он идентифицирует соответствующий закрывающий или открывающий тег кодовой базы, чтобы найти правильное местоположение.

Вы по-прежнему будете получать доступ к определению, удерживая клавишу управления и щелкая атрибут или тег HTML в Windows. Нажимать Команда+клик на macOS для того же действия. Это избавляет от необходимости искать местоположение вручную.

Дзен-мода

Этот режим не отвлекает внимание. Разработчикам легче полностью сосредоточиться на коде, скрывая кнопки и панели инструментов. Активируйте этот режим с помощью кнопки Ctrl+KZ ярлык в Windows и Cmd+KZ на Маке. Альтернативно, перейдите в Вид а потом Появление. Включить Дзен-мода здесь.

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

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

Все, что вам нужно сделать, это ввести то, что вы хотите сделать, в палитре команд. Вы будете получать различные команды, которые помогут вам.

Для доступа к палитре команд используйте Ctrl+Shift+П ярлык для Windows. Ярлык Mac: Cmd+Shift+P.

Поиск файлов

Если в текущих файлах проекта есть нужный вам текст, вы можете получить к нему доступ, щелкнув значок «Поиск» на боковой панели. В качестве альтернативы используйте Ctrl+Shift+Ф ярлык в Windows или Cmd+Shift+F на Маке.

Удалить предыдущее слово

Когда вы удерживаете клавишу Backspace для удаления слова, вы можете случайно удалить другие части. Чтобы ограничить удаление предыдущим словом, используйте Ctrl+Backspace ярлык в Windows или Cmd+Backspace на Маке.

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

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

Ярлык Windows — это Shift+Alt+вверх или Shift+Alt+Вниз. Для Mac это ярлык Опт+шифт+вверх или Опт+шифт+вниз.

Открыть закрытый редактор снова

Если вы работаете с огромным HTML-проектом с множеством файлов, случайное закрытие вкладки может привести к неприятностям. К счастью, вы можете использовать ярлык, чтобы открыть последнюю закрытую вкладку в VS Code.

Чтобы снова открыть закрытый редактор, используйте команду Ctrl+Shift+Т ярлык в Windows или Cmd +Shift+T на Маке. С помощью этого ярлыка вы можете открыть несколько закрытых вкладок.

Ускорьте кодирование с помощью ярлыков HTML

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

Далее вам следует научиться сравнивать два файла в VS Code.

Часто задаваемые вопросы

Вопрос: Можно ли настроить ярлыки HTML в VS Code?

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

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

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