Как поставить курсор в нескольких местах visual studio code

Как поставить курсор в нескольких местах visual studio code

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

В современных редакторах кода, таких как VS Code, Atom и Sublime Text, можно вводить тест одновременно в нескольких местах при помощи множественных курсоров. Об этой возможности знает любой разработчик, а вот из дизайнеров не знает почти никто.

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

⌥ + Click — добавит новый курсор в месте клика

⌥ + ⌘ + ↓ — расширит курсор до следующей строки, а ⌥ + ⌘ + ↑ — до предыдущей

⌘ + D — найдёт в тексте следующее вхождение выделенного слова

Вместе с множественными курсорами работают стандартные шорткаты для работы с текстом.

⌘ + ← и ⌘ + → для перемещения курсоров в начало или конец строки.

⌥ + ⇧ + ← и ⌥ + ⇧ + → для выделения следующего или предыдущего слова.

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

Профессиональная работа в VS Code: 4 совета

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 . Как это сделать?

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

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

Использование команды меню 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. Я думаю, что она пригодится и вам. Раньше, когда я сталкивался с повторяющимися фрагментами кода, мне приходилось копировать их из файлов, в которых они уже были. Это — медленный процесс, чреватый ошибками. А теперь, благодаря возможности оформлять такие фрагменты кода в виде сниппетов, задача ввода повторяющихся фрагментов кода стала гораздо проще.

Working with Multiple Cursors in Visual Studio Code

Visual Studio Code has been gaining popularity and has replaced Sublime Text as my editor of choice, and it brought along many of my favorite features of Sublime, including its multiple cursor magic, which is especially great for refactoring. Here are some tips for getting started!

What Is Multi-Cursor Mode?

While multi-cursor mode can be used for column-mode editing, it is much more powerful! It’s column-mode on steroids! Basically, you can place as many cursors in as many places as you want in a single editor view. Once you have your cursors placed, you continue editing, and all operations will be applied to all cursors simultaneously.

Three Ways to Add Cursors

The basic mousey way

The most intuitive way to start adding multiple cursors is with the mouse. Assuming you already have your first cursor placed, you just hold down the Alt key, click where you would like to add another cursor, and then repeat as many times as you’d like. I believe the middle mouse button can be configured so you don’t need to hold down the Alt key.

The column-mode way

If you would like to edit a number of lines at the column position, you can add additional cursors above or below the initial cursor. Just hold down Command+Alt and use the Up and/or Down arrows to add new cursors above or below, respectively.

This is very handy for aligning things in columns since you can skip over white space and words using Ctrl and/or Alt as you would with a single cursor. It’s very handy for editing data files, such as CSV, and it’s also useful when extracting data from log files.

The find-and-replace way

This is possibly my favorite method. If you have a word highlighted, you can select the next occurrence of that word by pressing Command+d, then repeat until you have all instances of the word selected. Alternately, you can add a cursor to all occurrences of the current selection with Command+Shift+L. Then, you just type the replacement, and all instances are updated with each keystroke!

You might end up selecting one or more too many instances of the desired word or phrase. Luckily, Command+u will undo the last multi-cursor operation. This will prevent you from starting allllllll over, which is especially helpful when you are selecting a lot of instances.

While you can use the regular find-and-replace dialog, but I find this much more convenient and intuitive.

Give It a Shot!

Now that you are armed with the basics, go ahead and give it a try. Once you get the hang of this method, you will wonder how you survived without it. You may even blow the minds of some of your Vim or Emacs guru friends or co-workers!

Приемы редактирования текста в VS Code: мультикурсор ⁠ ⁠

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

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

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

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

Регулярные выражения — это отдельная очень большая тема. Если кому-то интересно, пишите в комментариях — напишу отдельный пост, посвященный им. Также можете изучить их самостоятельно на regexone.com и потренироваться на regex101.com

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

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

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

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

Конечно, пример «высосан из пальца», но есть немало задач, где этот способ будет полезен. Например, найти и заменить все email-адреса в тексте, исправить тэги в html или xml файле, поменять местами колонки в файле csv.

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

Множественные курсоры можно также вставить вручную, командами 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 (в окошке поиска) — добавить курсоры на все совпадения к запросу