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

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

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

Давайте откроем VSCode и сделаем это вместе. В верхнем левом разделе панели инструментов есть вкладка выделения, и она содержит некоторые возможности выделения. Мы рассмотрим большинство из них. Обратите внимание, что привязка клавиш, которую вы видите на изображении, может отличаться от вашей, потому что я настроил некоторые из них. Но не волнуйтесь! Я покажу вам, как настроить.

Мы можем настроить привязку клавиш, нажав на значок шестеренки в левом нижнем углу и выбрав Keyboard Shortcuts.

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

Нажмите нужные клавиши, затем нажмите Enter. Обратите внимание, если привязка уже существует, VSCode заметит нас. Мы можем нажать на ссылку, чтобы увидеть, где используется привязка клавиш.

Фиктивный HTML для тренировки

<button class="BTN button-primary" data-call-to-action-btn>
  Yes
</button>

<form class="form">
  <p class="heading">form</p>
  <button class="BTN b-success rounded btnnnn" data-submit-btn>
    Submit
  </button>
  <p>some text contains primary</p>
</form>

<button class="BTN b-success rounded" data-cancel-btn>
  No
</button>
Вход в полноэкранный режим Выход из полноэкранного режима

Поиск

👇Ctrl + F, чтобы открыть строку поиска, введите текст, который вы хотите найти, включите Match Case и Match Whole Word, если необходимо. Можно нажать клавишу Enter, чтобы найти следующий совпавший экземпляр.

Можно нажать Alt + Enter, чтобы выбрать все совпадения.

Нажмите /, чтобы вернуть историю поиска.

Нажмите (можно дважды) Esc, чтобы закрыть строку поиска. Будет выбран последний найденный экземпляр.


Мультивыбор и действия

Иногда мы хотим переименовать переменную или класс. Было бы здорово, если бы мы могли выбрать их все сразу и отредактировать. К счастью, это легко сделать в VSCode.

Добавление выбора к следующему совпадению поиска

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

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

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

Используется так же, как и Add Selection To Next Find Match, но выбор осуществляется в обратном порядке.

Заметьте, когда я выбираю primary, ниже есть одно совпадение, которое мне не нужно. Поэтому я использую Alt + D, чтобы выбрать предыдущее совпадение.

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

Следует отметить, что эти две функции Add Selection по умолчанию — Match Case и Match Whole Word. Но когда у нас включена строка поиска, используется конфигурация из строки поиска.

Заметьте, когда я нажимаю Ctrl + D, чтобы выбрать «BTN», совпадает именно «BTN», но когда я нажимаю Ctrl + F, чтобы вызвать панель поиска, все, что включает «btn», также совпадает, потому что Match Case и Match Whole Word выключены в панели поиска.

Добавление мультикурсора с помощью мыши

Иногда мы хотим выделить разные вещи, но изменить их на одинаковые или похожие. Мы можем сделать это, явно добавив курсор и выбрав несколько объектов. Ярлык для мультикурсора можно переключать между Ctrl + Click и Alt + Click на вкладке выбора.

Удерживая Alt/Ctrl + Click для добавления курсора, затем нажмите Ctrl + D для выделения слов. В сочетании с Ctrl + / мы можем редактировать сразу несколько слов.

Расширить выделение и уменьшить выделение

Расширить больше

Сокращайте, когда мы слишком сильно расширяем 🤣.

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

Вырезать

В VSCode, если у вас нет никакого выделения, Ctrl + X может напрямую вырезать линию. Я использовал ее для быстрого удаления строк, пока не нашел лучший вариант. Разница между Cut и Delete Line в том, что вырезание также копируется. Если мы используем Cut для удаления пустых строк, мы потеряем то, что на самом деле хотели Cut.

editor.action.deleteLines

Копировать Вставить

В VSCode, если у вас нет никакого выделения, Ctrl + C и Ctrl + V могут напрямую копировать и вставлять строку вниз.

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

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

Переместить линию

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

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

Переключение сворачивания

Позволяет свернуть или развернуть объект дерева.

Мы можем использовать это с расширенным выбором Alt + A, чтобы увидеть область, которую мы хотим свернуть.

Мы также можем использовать это сочетание клавиш, чтобы быстро исправить ошибку, которую я только что допустил. Пока наш курсор находится в закомментированном коде, кнопка toggle fold может напрямую переключать всю закомментированную область.

Параллельное создание

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

Когда мы переключаем файл, мы теряем предыдущий мультикурсор, поэтому нам нужно использовать Add Cursor Above / Below, чтобы сделать параллельное перемещение. Мы можем использовать Ctrl + P и поиск имени файла для перехода к файлу, что также является очень полезным сокращением.

Добавление обертки к элементам

Иногда мы хотим обернуть некоторые элементы внутри нового родительского элемента, для этого есть соответствующая функция.

Ctrl + Shift + P вызовите панель инструментов, затем введите wrap. Появится опция Emmet: Wrap With Abbreviation — это то, что нам нужно. Эта функция не имеет привязки к клавишам по умолчанию, но вы можете настроить ее, нажав на значок шестеренки справа.

Мы можем использовать комбинации клавиш, которые мы уже изучили, чтобы выбрать диапазон элементов, а затем использовать Emmet: Wrap With Abbreviation и введите то, чем вы хотите обернуть элементы.

Обернуть

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

Если вам интересно узнать о нажатии клавиш, это встроенная функция VSCode, вы можете включить ее, нажав Ctrl + Shift + P на панели инструментов функций VSCode и набрав screencast, затем нажмите на нее.

Кстати, если вы забыли сочетание клавиш, но знаете название функции. Вы также можете выполнить поиск на этой панели инструментов, например fold.

Оцените статью
Procodings.ru
Добавить комментарий