Visual studio несколько курсоров

Обновлено: 05.07.2024

Редактирование в нескольких точках вставки позволяет добавлять n-ое количество точек вставки одновременно. В режиме редактирования в нескольких точках вставки вы можете добавлять дополнительные курсоры в документ, щелкнув кнопкой мыши или нажав соответствующие клавиши клавиатуры. Основной курсор обозначается красным цветом, а вторичные — голубым. Редактирование в нескольких точках вставки можно отключить с помощью клавиши ESC .

Включение редактирования в нескольких точках вставки

Клавиатура

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

Сочетание клавиш	Действие
⌥⇧.	Вставить следующий соответствующий курсор
⌥⇧;	Вставить курсоры для всех совпадений
⌥⇧,	Удалить последний курсор
⌥⇧/	Переместить последний курсор вниз

Каждое из этих поведений привязано к текущей позиции курсора при вызове команды. Например, если курсор находится в начале слова name и вы вызываете команду "Вставка курсоров для всех совпадений" (⌥⇧;), в начале каждого экземпляра слова name в текущем документе будет добавлен курсор. Аналогичным образом, если вы вызовете команду "Вставить следующий соответствующий курсор" (⌥⇧.), курсор будет помещен на следующий экземпляр слова name. Эту команду можно вызвать несколько раз.

Мышь / сенсорная панель

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

Чтобы использовать мышь для вставки нескольких курсоров, необходимо зажать клавиши ⌘⌥ и щелкнуть там, где необходимо вставить курсор. Режим вставки будет активирован, пока клавиши ⌘⌥ будут зажаты. Если вы вставили курсор в неправильное расположение, удалите его, удерживая клавиши ⌘⌥ и снова щелкнув в той же области. Когда все курсоры будут правильно расставлены, отпустите клавиши ⌘⌥ и начните вводить текст. На приведенном ниже GIF-изображении продемонстрирован выбор набора точек вставки и удаление неправильно установленных точек.

Перевод серии статей Сергиу Мурешана «VSCode productivity features».

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

Множественные курсоры в Visual Studio Code

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

1) Добавить курсор над/под (CTRL+ALT+↑/↓)

Это простой функционал, но он прячется за странным сочетанием клавиш, которое переворачивает ваш рабочий стол в направлении стрелки (в Windows). Я всегда переназначаю это сочетание, заменяя его на CTRL+SHIFT+↑/↓.

2) Добавить курсор к следующему вхождению (CTRL+D)

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

3) Добавить множественные курсоры ко всем вхождениям выделенного текста (CTRL+SHIFT+L)

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

4) Отменить последнюю операцию курсора (CTRL+U)

Вот об этой функции я долго не догадывался. Здесь все довольно просто. Если вы случайно добавили слишком много курсоров (лишний раз нажав CTRL+D), с помощью CTRL+U вы можете отменить последнее добавление. Это спасет вас от необходимости проходить весь путь выделения и добавления курсоров (теперь только нужных) заново.

Функции поиска в Visual Studio Code

Знаете ли вы, что, помимо поиска строк (в текущем документе или во всех документах), в Visual Studio Code есть еще четыре варианта поиска? Давайте их рассмотрим!

1) Поиск файла (CTRL + P)

Если вы знаете имя файла, то можно сократить время его поиска. Вам не нужно открывать менеджер файлов и выбирать там нужный. Просто нажмите CTRL + P, наберите полное имя или часть имени файла, и VSCode будет автоматически искать этот файл в вашем текущем рабочем пространстве. Он отобразит все файлы, в названии которых содержится указанное вами имя (уже открытые файлы будут вверху списка).

2) Поиск символа (CTRL + T)

3) Поиск локального символа (CTRL + SHIFT + O)

Похоже на предыдущий вариант, только поиск происходит по текущему файлу. Также можно открыть палитру команд и ввести @.

А если вы введете в строке поиска @:, то сгруппируете функции по типу значков. Так вам будет легче найти нужную, если вы не знаете ее полного имени.

4) Поиск по ссылке (SHIFT + F12)

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

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

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

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

Самый быстрый способ переместиться из одной части файла в другую – с помощью этого сочетания клавиш. Некоторые могут возразить, мол, CTRL + TAB делает то же самое, но эта функция более полная. Она сохраняет историю о местах одного файла, и эта история сохраняется даже после применения данного шортката (вы можете перемещаться туда-сюда, а история не изменится).

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

1. Использование нескольких курсоров

Может случиться так, что программисту понадобится вводить один и тот же текст одновременно в нескольких местах.

Например, в следующем коде нужно добавить атрибут class=«odd» к первому, третьему и пятому элементам <li> . А ко второму, четвёртому и шестому элементам нужно добавить атрибут class=«even» .

Вот как выглядит то, что должно получиться, в редакторе.

Код в редакторе

Как решить эту задачу? Раньше я поступал так: вводил нечто вроде текста class=«odd» в одном месте, а потом копировал его в буфер обмена и вставлял везде, где он нужен. Правда, после того, как я узнал о возможности работать с несколькими курсорами в VS Code, я так делать перестал. Это значительно повысило эффективность моего труда.

В частности, речь идёт о следующем. Для добавления в текст нескольких курсоров нужно удерживать клавишу Alt на клавиатуре (в macOS — клавишу Option ) и щёлкать по тем местам, где должны появиться курсоры. После этого всё, что вводится с клавиатуры, будет одновременно появляться везде, где имеются курсоры.

Использование нескольких курсоров

Напомню, что речь идёт о следующих сочетаниях клавиш:

Windows: Alt+Щелчок мышью .
macOS: Option+Щелчок мышью .

2. Переименование сущностей и команда Rename Symbol

Теперь давайте изучим ещё один простой приём.

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

Представим, что у нас есть код, напоминающий тот, что приведён ниже. Нам нужно заменить все вхождения foo на bar . Как это сделать?

Если вручную менять каждую строку, то у такого подхода будет пара недостатков:

Слишком много ручного труда.
Высокая вероятность возникновения ошибок.

Использование команды меню Rename Symbol

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

3. Перемещение выделенных строк вверх и вниз

Иногда нужно переместить какой-то программный код или обычный текст вверх или вниз в документе. Эту задачу можно решить так:

Выделим текст.
В Windows воспользуемся сочетанием клавиш Alt+Стрелка вверх для перемещения текста вверх. Для перемещения текста вниз, соответственно, воспользуемся сочетанием клавиш Alt+Стрелка вниз .
В macOS роль клавиши Alt играет клавиша Options .

Перемещение текста вверх и вниз

Благодаря этому подходу можно быстро и легко менять порядок размещения текста.

4. Сниппеты

В ходе написания кода нам постоянно приходится вводить с клавиатуры одни и те же повторяющиеся конструкции.

Например, HTML5-файлы всегда содержат следующую базовую структуру документа:

А при написании for-циклов на JavaScript мы всегда вводим такие фрагменты кода:

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

К счастью, VS Code даёт в наше распоряжение настраиваемый механизм автодополнения ввода. Вот как это выглядит.

Автодополнение ввода

Поговорим о том, как настроить VS Code и обзавестись тем, что показано на предыдущем рисунке.

▍Создание конфигурационного файла

Для настройки автодополнения ввода в VS Code нужно сначала создать соответствующий конфигурационный файл. Редактор читает этот файл, реализуя соответствующие механизмы. Для того чтобы создать этот файл, нужно, как показано на следующем рисунке, перейти в меню Code > Preferences > User Snippets .

Команда меню User Snippets

После этого появится следующая панель.

Панель для работы со сниппетами

Здесь можно выбирать существующие конфигурационные файлы и редактировать их. Ещё тут можно создать новый конфигурационный файл. Мы собираемся поступить именно так.

Если выбрать тут команду New Global Snippets file , будет создан конфигурационный файл, доступный глобально. Если же выбрать команду вида New Snippets file for 'test' — будет создан файл, доступный локально, в текущем рабочем пространстве.

Мы создадим локальный файл.

После выбора команды New Snippets file for 'test' система запросит имя файла.

Ввод имени нового файла

Конфигурационный файл мы создали, но пока он пуст.

Новый пустой конфигурационный файл

Я, чтобы вам было удобнее, записал весь вышеописанный процесс и представил его здесь в виде анимированного gif-файла.

Создание нового конфигурационного файла

▍Создание сниппетов

Конфигурационный файл хранит данные в формате JSON. Вот пример его содержимого.

Содержимое конфигурационного файла

Вот — то же самое, но уже в виде обычного текста:

Для начала давайте взглянем на поле «html5 autocomplete» . Смысл этого поля заключается лишь в том, чтобы сообщить программисту о назначении сниппета. Сюда можно внести всё что угодно.

Разберёмся теперь с полем «prefix»: «html5» . Оно предназначено для описания задаваемого нами сокращения, которое редактор раскрывает в некий фрагмент кода. Когда мы вводим в редакторе текст html5 , редактор автоматически заменяет его на то, что задано в элемент «body» .

Элемент «body»: […] содержит тот код, который редактор должен вставить в документ вместо введённого нами префикса. Так как этот код может состоять из множества строк, данное поле представлено массивом. Каждый элемент массива — это одна строка кода. Если «перевести» конструкцию, которую мы только что рассматривали, на язык обычного HTML-кода, то получится, что она равносильна следующему:

Теперь, когда в нашем распоряжении есть простой конфигурационный файл, давайте его протестируем.

Испытание конфигурационного файла

▍Область действия сниппетов

Мы убедились в том, что наш конфигурационный файл позволил организовать автодополнение ввода. Но в нём есть один недостаток. Дело в том, что конструкция, представленная в нём префиксом html5 , используется только в HTML-файлах. В JavaScript-файлах нам эта конструкция не нужна.

В таких случаях очень кстати оказывается возможность указания области действия сниппетов. А именно, речь идёт о поле «scope»: «html» , которое нужно добавить в описание сниппета.

Ограничение области действия сниппета HTML-файлами

Испытаем нашу систему снова. Попробуем префикс html5 в HTML-файле и в JS-файле.

Испытание сниппета в HTML- и в JS-файле

В JS-файле, как видно, ввод html5 ни к чему особенному не приводит. А это — именно то, что нам нужно.

▍Курсор

Давайте снова испытаем автодополнение ввода, выполняемое на основе созданного нами файла. Присмотримся к нему. Нет ли в нём каких-нибудь изъянов?

Исследование автодополнения ввода

Видно, что после вставки блока кода в редактор курсор автоматически попадает в конец этого блока. Но блок кода, который автоматически вставлен в документ, это лишь заготовка, над которой нужно ещё поработать. В частности, надо ввести содержимое тега <title> .

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

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

Настройка местоположения курсора

Теперь, после того, как код оказывается в документе, курсор автоматически устанавливается туда, где в конфигурационном файле имеется $0 .

Курсор устанавливается в нужном месте

▍Пример

А теперь, чтобы закрепить то, что мы только что изучили, давайте рассмотрим новый пример.

Нам хотелось бы, чтобы, после ввода в JavaScript- или TypeScript-файле текста fori , там автоматически появлялась бы следующая конструкция:

И ещё — чтобы курсор автоматически устанавливался бы после i < .

Можете пока не смотреть на решение этой задачи. Попытайтесь решить её самостоятельно.

В общем-то, решение этой задачи может быть представлено таким конфигурационным файлом:

Использование сниппета fori

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

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он был сосредоточен только на одной проблеме, отредактировав этот пост .

Закрыто 2 года назад .

Как вы можете создать несколько курсоров при редактировании в VS Code? Я интересуюсь как macOS, так и Windows.

Просто удерживайте Alt кнопку и начинайте нажимать в разных местах. Вот и все. Если вы используете Mac, SHIFT + CTRL + DOWN / UP - это то, что вам нужно на 1.14.2. Кроме того, похоже, что Cmd + Alt + Down отображается по умолчанию в editor.action.goToDeclaration по состоянию на 1.14.2 Жаль, что ребята решили закрыть тему, которая представляет такой очевидный интерес, что у нее почти 400 голосов, а посетители почти через 4 года после публикации. Я бы хотел, чтобы редакторы SO немного расслабились и позволили сообществу расти и поддерживать друг друга. Мне любопытно, какие уместные ответы возникнут со знанием 2019 года. :(

Нажмите Alt и нажмите. Это работает на Windows и Linux *, и должно работать на Mac.

В Visual Studio Code 0.2 теперь доступны дополнительные функции с несколькими курсорами:

Улучшения с несколькими курсорами
Ctrl+D ( Cmd+D на Mac) выбирает следующее вхождение слова под курсором или текущего выделения,
Ctrl+K Ctrl+D перемещает последний добавленный курсор на следующее вхождение слова под курсором или текущего выбора.
По умолчанию команды используют matchCase. Если виджет поиска открыт, то настройки виджета поиска (matchCase / matchWholeWord) будут использоваться для определения следующего вхождения
Ctrl+U ( Cmd+U на Mac), чтобы отменить последнее действие курсора, поэтому, если вы добавили слишком много курсоров или допустили ошибку, вы можете нажмите Ctrl+U ( Cmd+U на Mac), чтобы вернуться к предыдущему состоянию курсора. Добавление курсора вверх или вниз ( Ctrl+Alt+Up / Ctrl+Alt+Down ) ( Cmd+Alt+Up / Cmd+Alt+Down на Mac) теперь показывает последний добавленный курсор, чтобы упростить работу с несколькими курсорами на более чем 1 высоте области просмотра одновременно (т.е. выберите 300 строк и только 80 поместится в область просмотра).

Это значительно упрощает введение нескольких курсоров.

* Конфликт перетаскивания в Linux:

Некоторые дистрибутивы (например, Ubuntu) назначают перетаскивание окна на Alt+LeftMouse , что будет конфликтовать с VSCode.

Итак, последние версии VSCode позволяют переключаться между меню выбора Alt+LeftMouse и Ctrl+LeftMouse под ним, как подробно описано в другом ответе .

Кроме того, вы можете изменить привязки клавиш вашей ОС, используя, gsettings как указано в другом ответе .

Visual Studio Code - текстовый редактор с отрытым исходным кодом, развиваемый компанией Microsoft. Благодаря огромному количеству расширений, написанных энтузиастами, эту программу можно превратить в мощный инструмент для широкого спектра задач, от програмирования до редактирования текстовых публикаций.

При работе с текстовыми файлами часто возникает необходимость массового редактирования некоторых фрагментов. С простыми случаями (заменить 'abc' на 'def') справляется интуитивно понятная функция автозамены, которая есть в любом распространённом редакторе. Но что делать, если Вам нужно, например, найти все слова, начинающиеся на букву "t", и поменять их местами со словом, которое идет после них?

Мультикурсор через поиск

Для начала давайте разберёмся, как составить выражение для поиска. Откроем стандатное окно поиска командой Ctrl-F (от слова Find) и вводим ' t'. Редактор автоматически подсвечивает найденные места (буква t, перед которой есть пробел), и мы можем заметить, что забыли о словах, перед которыми стоит знак препинания (например, кавычка или дефис). К счастью, в задачах вроде нашей приходят на помощь регулярные выражения, в частности, вида '\Wt', где \W - специальная последовательность, обозначающая начало слова. Активировать функцию "регулярок" можно кнопкой .*

Теперь мы можем нажать Alt-Enter, и редактор вставит по курсору в каждом месте, где был найден искомый фрагмент:

Обратите внимание, что курсоры можно перемещать стрелками, а также выделять фрагменты, зажимая Shift. Так как Ctrl со стрелками позволяет перемещаться до конца слова, нажатием Ctrl-Shift-вправо я могу выделить каждое найденное слово:

после выделения слова я дополнительно выделил еще один символ, чтобы "захватить" последующий пробел или знак препинания

Теперь можно вырезать выделенные фрагменты (Ctrl-X), переместиться на одно слово вправо (Ctrl-вправо) и вставить их (Ctrl-V). Если количество курсоров при вставке осталось неизменным, то каждый вырезанный фрагмент будет вставлен на своё место:

Вставка мультикурсора вручную

Множественные курсоры можно также вставить вручную, командами Ctrl-D (следующий совпадающий с выделенным фрагмент) и Ctrl-Shift-L (вставить курсоры в каждый фрагмент, совпадающий с выделенным). Например, я выделил фрагмент 'текст' и два раза нажал Ctrl-D:

Кстати, вам не нужно заучивать сочетания клавиш, которые я упомянул. Достаточно лишь запомнить "магическую" команду Ctrl-Shift-P, которая даёт доступ ко всем командам:

Причём поиск "умный", позволяет находить команды по первым буквам, например:

В эта статье я рассказал лишь о нескольких функциях, которыми обладает этот редактор. Вы можете найти больше полезной информации на официальном сайте: Visual Studio Code Tips and Tricks. Поделитесь в комментариях, какие функции и расширения VS Code Вы считаете самыми полезными.

Ctrl-D - добавлять курсоры по одному, на каждое совпадение (с выделенным куском)

Ctrl-Shift-L - добавить курсоры на все совпадения

Alt-Enter (в окошке поиска) - добавить курсоры на все совпадения к запросу

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