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

Обновлено: 31.10.2024

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

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

Отменить выбор курсоров из нескольких выбранных курсоров

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

На самом деле VSCode имеет встроенный способ отменить выбор курсора из нескольких выбранных курсоров. Вы можете щелкнуть один из курсоров еще раз (удерживая клавишу Alt), и он будет немедленно удален.

Второй способ удалить курсор — нажать Ctrl + U, чтобы отменить последнюю операцию с курсором, которую вы только что сделали. Обратите внимание, что это работает только в том случае, если вы вызываете горячую клавишу сразу после того, как поместили курсор в неправильное положение.

Несколько курсоров в совпадающих строках

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

Первая комбинация клавиш, которую вам нужно запомнить, — это Ctrl + D, которая находит следующее вхождение слова, выделяет его и ставит курсор рядом с ним.

Кроме того, вы можете быстро добавить курсор ко всем вхождениям слова, нажав Ctrl + Shift + L. После этого вы можете просто ввести замену, все вхождения будут обновлены мгновенно.

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

Несколько курсоров в конце строк

Что делать, если вы хотите поставить много курсоров в конце строк? Указать и щелкнуть кажется слишком трудоемким? Для этого вы можете использовать поддержку нескольких курсоров VSCode.

Предположим, нам нужно поместить курсор в конец каждой строки, которая включает «TMDB_URL» в следующем примере. Для этого выберите TMDB_URL, нажмите Ctrl + Shift + L, чтобы выбрать их все, затем нажмите клавишу End, чтобы переместить все курсоры в конец строки.

Несколько курсоров в начале строк

Подобно тому, как мы перемещаем несколько курсоров в конец строки, мы можем перемещать их в начало строк.

Для этого вы выбираете экземпляр слова, затем нажимаете Ctrl + Shift + L, чтобы выделить их все, и, наконец, нажимаете клавишу Home, чтобы переместить все курсоры в начало строк.

Перетащите, чтобы создать несколько курсоров

VSCode также позволяет выбирать в "режиме столбца", что особенно полезно при работе с табличными данными. Я часто называю эту функцию "выделением перетаскиванием", потому что для выбора слов нужно удерживать клавишу и перетаскивать мышь.

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

Устранение неполадок: не работает мультикурсор VSCode

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

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

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

Клавиатура

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

< td>Вставить следующий совпадающий знак вставки

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

Мышь/тачпад

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

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

Если вы являетесь активным пользователем Visual Studio Code, скорее всего, вы используете несколько курсоров. VSCodeVim предлагает экспериментальную поддержку нескольких курсоров в режимах Visual и Normal. Используя эту экспериментальную функцию (которая включена по умолчанию), вы можете создавать несколько курсоров, а затем использовать операторы для раскрытия возможностей Vim в нескольких местах одновременно. ВАУ!

Добавить несколько курсоров на основе поиска слов

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

  1. Наведите курсор на слово в коде.
  2. Введите ( CTRL-D в Windows/Linux) или gb, чтобы добавить еще один курсор. Это переводит Vim в визуальный режим и готово к работе с выбранным вами словом.
  3. Введите ( CTRL-D в Windows/Linux) или gb, чтобы продолжить добавление курсоров, пока не закончите.
  4. Теперь вы можете выполнить действие в визуальном режиме (удалить, изменить и т. д.) или,
  5. Вернитесь в Обычный режим и введите любую команду Обычный режим, сохраняя несколько курсоров.

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

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

Такая функция (которую вы теперь должны пообещать никогда не писать ни в какой программе) могла бы выглядеть так:

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

  1. Наведите курсор на имя с помощью оператора поиска /name ,
  2. Введите gb трижды, чтобы создать три курсора поверх каждой переменной имени,
  3. Теперь вы находитесь в визуальном режиме с тремя отдельными вариантами выбора,
  4. Введите coldName, чтобы изменить каждое вхождение имени на oldName .
  5. У вас по-прежнему три курсора, и теперь вы находитесь в обычном режиме. Вы можете продолжить возиться или удалить все лишние курсоры, набрав еще раз.

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

Добавить несколько курсоров в последовательные строки

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

  1. Введите, чтобы перейти в режим визуального блока.
  2. Используйте j , k, чтобы выделить прямоугольник текста вниз или вверх соответственно.
  3. Введите I, чтобы вставить, или A, чтобы добавить, затем введите текст и нажмите .
  4. Кроме того, используйте любые команды обычного режима для работы с выделенным текстом в каждой строке.

Как это может быть полезно, спросите вы? Представьте себе список вещей, которые вам понадобятся, чтобы пережить зомби-апокалипсис:

    (нумерованный список), потому что порядок важен, и, когда дело доходит до дела, я бы предпочел полотенце, а не цепную пилу.

Итак, если предположить, что курсор находится над первой буквой этого списка:

  1. CTRL-V для перехода в режим визуального блока,
  2. затем j вниз до конца списка,
  3. за которым следует I, чтобы перейти в режим вставки в начале блока,
  4. и, наконец, выход из режима вставки

В результате получилось следующее:

Теперь повторите процесс, чтобы добавить закрывающий тег:

  1. CTRL-V для перехода в режим визуального блока,
  2. затем j вниз до конца списка,
  3. теперь используйте движение $, чтобы переместить все курсоры в конец каждой строки,
  4. нажмите A, чтобы перейти в режим вставки в конце блока,
  5. и, наконец, и

Написано Хайме Гонсалесом Гарсией, отцом, мужем, разработчиком программного обеспечения, UX-дизайнером, пиксельным художником-любителем, мастером и мастером тайных искусств. Вы должны подписаться на него в Твиттере, где он делится полезными вещами! (и это тоже смешно). Хайме Гонсалес Гарсия Follow @vintharas

БЫСТРЕЕ. ЛУЧШЕ. СИЛЬНЕЕ.

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

Зарегистрируйся! Или, если вы ненавидите электронную почту и вместо этого любите RSS, подпишитесь на RSS-канал, как будто мы вернулись в 90-е. Лед лед детка! Дин дин дин Дин ди ди дин Дин.

Знаете ли вы, что я написал несколько книг?

У меня есть! Серия JavaScript-mancy — это детище трех моих увлечений: JavaScript, писательства и фэнтези. На страницах каждой из книг этой серии вы найдете обширные знания JavaScript, изложенные в юмористическом и непринужденном стиле письма и приправленные фэнтези на каждом шагу.

Это самые странные и причудливые книги по JavaScript, которые вы когда-либо встречали. Ничего похожего на него нет.

© 2010-2021 Copyright Хайме Гонсалес Гарсия * . Все права защищены.

Этот сайт создан с помощью Gatsby, что безумно круто.

* Полуэльф-рейнджер, смертоносный лучник, мастер двуручного меча и двуручного скимитара, защитник Велейрона, Сокол Сумерек, безмолвная смерть болот Зулка.

Блог Atomic Object обо всем, что нам интересно.

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

Что такое мультикурсорный режим?

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

Три способа добавления курсоров

Основной способ мыши

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

Способ столбцов

Если вы хотите отредактировать несколько строк в позиции столбца, вы можете добавить дополнительные курсоры выше или ниже исходного курсора. Просто удерживайте Command+Alt и используйте стрелки вверх и/или вниз, чтобы добавить новые курсоры выше или ниже соответственно.

Это очень удобно для выравнивания элементов в столбцах, поскольку вы можете пропускать пробелы и слова, используя Ctrl и/или Alt, как если бы вы использовали один курсор. Это очень удобно для редактирования файлов данных, таких как CSV, а также при извлечении данных из файлов журналов.

Способ поиска и замены

Возможно, это мой любимый метод. Если у вас выделено слово, вы можете выбрать следующее вхождение этого слова, нажав Command + d, а затем повторять, пока не будут выбраны все экземпляры слова. Кроме того, вы можете добавить курсор ко всем вхождениям текущего выделения с помощью Command+Shift+L. Затем вы просто вводите замену, и все экземпляры обновляются с каждым нажатием клавиши!

Возможно, вы выберете слишком много экземпляров нужного слова или фразы. К счастью, Command+u отменит последнюю операцию с несколькими курсорами. Это не позволит вам начать все сначала, что особенно полезно, когда вы выбираете много экземпляров.

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

Попробуйте!

Теперь, когда вы вооружены основами, попробуйте. Как только вы освоите этот метод, вы будете удивляться, как вы выжили без него. Вы даже можете взорвать мозг своим друзьям или коллегам, гуру Vim или Emacs!

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

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