Как поместить текст в тег в Visual Studio

Обновлено: 21.11.2024

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

В этой статье мы рассмотрим редактирование, выбор и навигацию по вашему коду в редакторе кода Visual Studio.

Обязательно ознакомьтесь с частью 2, где мы также рассмотрим поддержку проектов, задач и инструментов.

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

Перечисленные здесь сочетания клавиш предназначены для macOS — естественно, у них есть аналоги для Windows, и настройки сочетания клавиш ( ⌘ + K ⌘ + S на Mac) покажут, что они собой представляют.

Есть несколько вещей, которые стоит упомянуть о настройках сочетания клавиш: во-первых, вы можете не только искать команду, например «добавить курсор ниже», чтобы узнать, к какой комбинации клавиш привязана эта команда, вы также можете искать привязка ключей. Так, например, поиск «ctrl shift cmd вправо» показывает мне, что это сочетание клавиш связано с «Расширить выделение». Поиск умен и распознает как «cmd», так и «command», «ctrl» и «control», а также «option» и «alt» (но не «opt»). Во-вторых, лично я часто переключаюсь между раскладками клавиатуры: для повседневных задач использую родную раскладку, а для программирования переключаюсь на американскую раскладку. Как только вы переключаете раскладку, настройки сочетания клавиш переключаются на отображение комбинации клавиш, которая запускает определенную команду в этой раскладке.

Памятка по коду Visual Studio

Мы создали удобную памятку с сочетаниями клавиш и некоторыми советами и рекомендациями по работе с VS Code. Скачайте бесплатно!

Эффективное редактирование

Существует классический набор сочетаний клавиш для редактирования текста, которые доступны во многих местах. К ним относятся такие сочетания клавиш, как ⌃ + P и ⌃ + N для перехода к предыдущей или следующей строке, а также ⌃ + A и ⌃ + E для перехода к началу или концу текущей строки. Горячие клавиши восходят к Emacs, доступны во многих приложениях командной строки с использованием библиотеки Readline и работают во многих текстовых полях операционной системы, таких как формы поиска и адресные строки.

Я нахожу некоторые из них весьма полезными в VS Code. Хотя VS Code — это не Vim (хотя для этого есть расширение), эти сочетания клавиш позволяют держать пальцы близко к домашнему ряду, а не переходить к клавишам со стрелками. ⌃ + P и ⌃ + N особенно полезны для навигации по результатам поиска и завершения кода. Здесь вы можете найти несколько сочетаний клавиш и выяснить, какие из них применимы в VS Code, а какие вам пригодятся.

Конечно, VS Code добавляет несколько собственных ярлыков редактирования, например, для перемещения и дублирования строк, соединения текущей строки со следующей и т. д. Когда дело доходит до этих ярлыков, сначала попытка вспомнить, какой ярлык использовать, или поиск его замедлят вас. Однако я считаю, что если ярлык действительно полезен, он быстро становится второй натурой, и вы начинаете использовать его, не задумываясь.

Одно стоит упомянуть: когда вы перемещаетесь по файлу или между файлами, редактируя в разных местах, ⌃ + - перемещает курсор обратно в предыдущее место редактирования, а ⌃ + ⇧ + - перемещает его. к следующему.

Быстрые выделения

В VS Code есть ярлыки для «интеллектуального» увеличения или уменьшения выделения ( ⌘ + ⇧ + ⌃ + → и ⌘ + ⇧ + ⌃ + ← ). Иногда я нахожу их полезными… но часто я обнаруживаю, что выбор расширяется большими шагами, чем мне хотелось бы. В HTML есть несколько альтернатив с использованием Emmet, о которых мы поговорим позже.

Вы не можете упоминать редактирование и выбор в VS Code, не затрагивая поддержку нескольких курсоров. Короче говоря, VS Code позволяет использовать несколько точек вставки и выделения, что удобно во многих случаях. Выберите строку, а затем нажмите ⌘ + d, чтобы выбрать следующее вхождение этой строки, или нажмите ⌘ + d без выделения, чтобы выбрать текущее слово, а затем еще раз, чтобы выбрать следующее и так далее. Если в этом случае вы обнаружите, что хотите пропустить вхождение слова, нажмите ⌘ + d, чтобы выбрать его, а затем ⌘ + k ⌘ + d, чтобы пропустить это слово и выбрать следующее.Это хороший способ развить мышечную память.

Еще один полезный ярлык с несколькими курсорами: когда вы выбрали несколько строк, вы можете нажать ⌥ + ⇧ + i (это буква «i»), чтобы добавить курсоры в концы всех выделенных в данный момент строк. Перемещая курсор по словам, в начало и конец строки и т. д. в этом режиме, вы можете быстро выполнять «пакетные» операции над блоком строк кода с аналогичной структурой.

Если вы делаете сложный выбор и случайно снимаете выделение со всего, ⌘ + u отменит последнюю операцию с курсором и вернет ваш выбор.

Основные сведения об Эммете

Emmet – это проект, направленный на улучшение рабочего процесса HTML и CSS. Он предоставляет динамические фрагменты и умные действия, которые могут многое сделать в HTML или CSS. Это самостоятельный проект, реализованный во многих редакторах, включая VS Code. Интеграция с VS Code идет довольно глубоко. Начнем с того, что Emmet в VS Code без проблем работает с несколькими курсорами. В списке автозавершения будут предложены дополнения для сокращений Emmet и даже может быть показан предварительный просмотр результата расширения.

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

Селектор CSS и предварительный просмотр особенностей.

Трюк Эммета заключается в преобразовании аббревиатур, похожих на селекторы CSS, в сложные HTML-структуры. Вы можете ввести что-то вроде этого:

… затем нажмите Tab или Enter, чтобы развернуть фрагмент в иерархию HTML:

Это позволяет очень быстро создавать новый HTML. Я не очень часто использую это в своей повседневной работе — оказывается, я не так часто пишу глубокие иерархии HTML с нуля. Однако я часто использую аббревиатуры для вставки простых элементов — .content для вставки

, например. Кроме того, у Эммета есть пара действий, которые пригодятся в сочетании с этими аббревиатурами. Это «Перенос аббревиатур» и «Перенос отдельных строк аббревиатурами».

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

«Обтекание отдельных строк аббревиатурой» работает аналогично, но позволяет заключить каждую отдельную строку в блок текста с аббревиатурой, используя * для обозначения элемента, который будет повторяться в каждой строке. Пример проясняет это: скажем, у вас есть несколько строк текста, подобных этой:

Вы хотите пометить их как ссылки внутри списка. Просто выделите строки текста, запустите действие «обтекание отдельных строк аббревиатурой» и укажите аббревиатуру ul>li*>a :

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

Чтобы быстро генерировать текст-заполнитель, Emmet включает генератор Lorem Ipsum с опциями! lorem расширяется до случайного блока текста длиной в 30 слов. lorem100 расширяется до 100 слов. Они работают и внутри повторяющихся элементов: p*4>lorem создает четыре абзаца текста-заполнителя.

Наконец, в Emmet есть несколько действий, которые позволяют быстрее выбирать HTML и CSS и перемещаться по ним. Действия «Баланс наружу» и «Баланс внутрь» расширяют и сужают ваш выбор в HTML, и для меня они выполняют более полезную работу, чем встроенные команды VS Code для расширения и сужения выбора. «Выбрать следующий элемент» и «Выбрать предыдущий элемент» позволяют перемещаться как по HTML, так и по CSS. Как и другие действия Emmet, их можно запускать с помощью палитры команд или привязывать к пользовательским сочетаниям клавиш.

Быстрая навигация

Для эффективного редактирования необходимо иметь возможность быстро перемещаться между различными частями кода как внутри одного файла, так и между разными файлами. Мы уже коснулись навигации, но стоит упомянуть еще несколько моментов.

⌘ + ⇧ + f откроет боковую панель поиска, позволяющую выполнять поиск по всем файлам в рабочей области. За кулисами этот поиск использует инструмент ripgrep, известный своей скоростью. Нажав на три точки под полем поиска, вы можете указать «файлы для включения» и «файлы для исключения». «Файлы для исключения» может быть очень полезным — например, чтобы избежать поиска в исходных картах и ​​мини-файлах, введя в это поле что-то вроде *.map,*.min.*.

По умолчанию ⌘ + ⇧ + o привязано к «Перейти к символу в редакторе». Это позволяет вам перемещаться по «разделам» в файле — что представляет собой раздел, зависит от типа кода, который вы редактируете.В CSS разделы могут включать селекторы и медиа-запросы, а в JavaScript они могут включать переменные и функции. Очень похожий вариант этой команды — «Focus Breadcrumbs», связанный с ⌘ + ⇧ +. по умолчанию. Как следует из названия, эта команда перенесет фокус на навигационную цепочку, но она также отобразит здесь список, позволяющий перемещаться по файлу способом, аналогичным команде «Перейти к символу в редакторе».

Навигация с помощью «Перейти к символу в редакторе».

По той же теме есть очень полезное расширение «Закладки». По умолчанию, после установки расширения, ⌘ + ⌥ + k будет переключать закладку на текущей строке, а ⌘ + ⌥ + j и ⌘ + ⌥ + l будут прыгать между ними… но не между файлами, для этого нужно использовать команда «Закладки: Список из всех файлов», возможно, с привязкой клавиш. Также есть настраиваемая боковая панель для закладок.

Чтобы получить общее представление о файле или сосредоточиться на каком-то фрагменте кода, не отвлекаясь на лишнее, можно свернуть области кода. ⌘ + ⌥ + < и ⌘ + ⌥ + >свернуть и развернуть текущую область кода, ⌘ + k ⌘ + 0 свернуть все области и ⌘ + k ⌘ + j развернуть все области.

С помощью своих языковых служб VS Code предоставляет некоторую навигацию, основанную на «понимании» кода. Расширения могут предоставлять эту функциональность для новых языков. Так, например, в JavaScript при наведении курсора на объект появляется всплывающее окно с информацией о свойствах этого объекта, а ⌘-щелчок по объекту (или использование сочетания клавиш F12) переводит вас в место, где он был определен. Доступны и другие функции навигации — попробуйте щелкнуть правой кнопкой мыши символ в коде, чтобы увидеть различные команды «Перейти к», предоставляемые VS Code.

Переход, например, к определению уводит вас от кода, который вы редактировали. Несмотря на то, что вы можете вернуться назад, используя ⌘ + u, чтобы отменить последнее действие курсора, или ⌃ + -, чтобы перейти к предыдущей точке редактирования, это может быть не то, что вам нужно. Вы можете использовать функцию «заглянуть» в VS Code, чтобы вместо этого вызвать встроенное представление того, что вы ищете. Нажатие ⌥ + F12 вместо F12 покажет определение текущего символа во встроенном окне, не отходя от того места, где вы были в коде. Затем вы можете нажать Esc, чтобы скрыть это окно. ⇧ + F12 будет искать ссылки на текущий символ, также показывая их в редакторе просмотра.

Команда "Просмотреть определение".

В этой статье мы рассмотрели некоторые способы, которыми VS Code может помочь вам в редактировании кода и навигации по нему. В следующей статье серии мы рассмотрим некоторые возможности поддержки задач и инструментов, встроенных в VS Code. Как всегда, мы будем рады любым вашим отзывам — есть ли, например, какие-либо другие темы, связанные с VS Code, которые, по вашему мнению, мы должны осветить? Надеюсь, вы почерпнули что-то полезное из этой статьи!

Памятка по коду Visual Studio

Мы создали удобную памятку с сочетаниями клавиш и некоторыми советами и рекомендациями по работе с VS Code. Скачайте бесплатно!

Как поместить текст в тег с помощью CSS Тег HTML используется для вставки предварительно отформатированного текста в документ HTML. Он сохраняет пробелы и разрывы строк текста. Этот тег обычно используется для отображения кода или текста, где автор сам задает расположение строк.

Как заключить выделение в теги HTML?

Оборачивает ваш выбор в теги HTML. Может переносить встроенные выделения и выделения, охватывающие несколько строк (работает как с одиночными выделениями, так и с множественными выделениями одновременно). Чтобы использовать, выберите один или несколько фрагментов кода и нажмите «Alt + W» («Option + W» для Mac). Выберите один или несколько блоков текста или строк текста.

Есть ли способ обернуть текст в HTML?

Используя эти шаги, любой пользователь может легко обернуть любой текст, который должен отображаться на веб-странице. Шаг 1: Во-первых, мы должны ввести HTML-код в любом текстовом редакторе или открыть существующий HTML-файл в текстовом редакторе, в который мы хотим поместить текст.

Как обернуть теги HTML в Visual Studio Marketplace?

Можно переносить встроенные выделения и выделения, охватывающие несколько строк (работает как с одиночными выделениями, так и с множественными выделениями одновременно). Чтобы использовать, выберите один или несколько фрагментов кода и нажмите «Alt + W» («Option + W» для Mac). Выберите один или несколько блоков текста или строк текста. Нажмите Alt + W или Option + W для Mac. Введите нужное имя тега.

Как заключить слова в тег с помощью CSS?

Добавить CSS ¶ 1 Установите для свойства пробела значение «pre-wrap». Также добавьте префиксы -moz- и -o-. 2 Используйте свойство word-wrap со значением «break-word». Подробнее

Как лучше всего обернуть элемент Div?

Это прекрасно работает для переноса текста и сохранения пробелов внутри тега pre: я обнаружил, что лучше пропустить тег pre и использовать пробел: pre-wrap в div.Короче говоря, это заставляет контент помещаться в тег «pre», не прерывая слов.

Когда использовать тег в CSS?

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

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Свойство пробела определяет, как обрабатывается текст в элементе, к которому оно применяется. Допустим, у вас есть точно HTML-код:

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

Если вы хотите предотвратить перенос текста, вы можете применить пробел: nowrap;

Обратите внимание, что в примере HTML-кода в верхней части этой статьи на самом деле есть два разрыва строки, один перед строкой текста и один после нее, что позволяет тексту находиться на отдельной строке (в коде). Когда текст отображается в браузере, эти разрывы строк выглядят так, как будто они удалены. Также удаляются лишние пробелы в строке перед первой буквой. Если мы хотим заставить браузер отображать эти разрывы строк и лишние пробельные символы, мы можем использовать white-space: pre;

Он называется предварительным, потому что ведет себя так, как если бы вы заключили текст в теги (которые по умолчанию обрабатывают пробелы и разрывы строк таким образом). Пробелы учитываются точно так же, как и в HTML, и текст не переносится до тех пор, пока в коде не появится разрыв строки. Это особенно полезно при буквальном отображении кода, который эстетически выигрывает от некоторого форматирования (а иногда это абсолютно необходимо, как в языках, зависящих от пробелов!)

Возможно, вам нравится, как pre учитывает пробелы и разрывы, но вам нужно, чтобы текст переносился, а не вырывался из родительского контейнера. Вот что такое white-space: pre-wrap; для:

Наконец, пробел: pre-line; будут разрывать строки там, где они прерываются в коде, но лишние пробелы все равно удаляются.

Интересно, что последний разрыв строки не учитывается. Согласно спецификации CSS 2.1: «Строки разрываются на сохраненных символах новой строки и по мере необходимости для заполнения строк». так что, возможно, это имеет смысл.

Вот таблица, чтобы понять поведение всех различных значений:

< /tbody>

В CSS3 свойство пробела буквально следует этой диаграмме и соотносит свойства с text-space-collapse и text-wrap соответственно.

Немного сложнее, чем обычная таблица поддержки, поскольку у каждого значения разные уровни поддержки:

Разрешить перенос длинных слов на следующую строку:

Определение и использование

Свойство word-wrap позволяет разбивать длинные слова и переносить их на следующую строку.

Новые строкиПробелы и табуляцииОбтекание текстом
нормальныйСвернутьСвернутьОбтекание
предварительноСохранитьСохранитьБез переноса
nowrapСвернутьСвернуть Без обертывания
предварительно обернутьсохранитьсохранитьобернуть
предварительноСохранитьСвернутьОбтекание
Значение по умолчанию: нормальное
Унаследовано: да
Анимация: нет. Прочтите об animatable
Версия: CSS3
синтаксис JavaScript : object.style.wordWrap="break-word" Попробуйте

Поддержка браузера

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Синтаксис CSS

Значения свойств

Значение Описание Демо
нормальный< /td> Разрывать слова только в разрешенных точках разрыва. Это значение по умолчанию Demo ❯
break-word Разрешает разбивать неразрывные слова Demo ❯
initial Устанавливает для этого свойства значение по умолчанию. Подробнее о initial
inherit Наследует это свойство от родительского элемента. Прочтите об наследовании

Похожие страницы

Мы только что запустили
видео W3Schools

ПИКЕР ЦВЕТА

Получите сертификат
пройдя курс
сегодня!

КОД ИГРА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь отправить нам электронное письмо:

Спасибо за помощь!

Ваше сообщение было отправлено в W3Schools.

Лучшие учебные пособия
Лучшие ссылки
Лучшие примеры
Веб-курсы

W3Schools оптимизирована для обучения и повышения квалификации. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, политику конфиденциальности и файлы cookie.

Читайте также: