Как поставить несколько курсоров в vs code

10 горячих клавиш VS Code, которые ускорят вашу работу

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

Создать структуру документа

Это сочетание клавиш за секунду создаёт базовую структуру кода или вложенные теги.

Быстро добавить комментарий

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

Перейти к строке под номером

Windows — Ctrl + G

macOS — Control + G

Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G , введите номер строки и спокойно спасайте вселенную.

Поменять строку местами с соседними

Случается такое, что ваш алгоритм — не алгоритм. Всё пошло не так, а вместо числа 42 вывелось сообщение «Данные удалены». Кому-то для этого нужно переписать весь код, но иногда бывает достаточно поменять строки местами и всё заработает.

Alt и стрелки меняют текущую строку местами с соседними.

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

Windows Shift + Alt + ↓ / ↑

macOS Shift + Option + ↓ / ↑

Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.

Перейти к парной скобке

Windows Ctrl + Shift + \

macOS Shift + Command + \

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

Переименовать переменную

Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a , b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2 .

Отформатировать документ

Windows — Shift + Alt + F

macOS Shift + Option + F

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

Перейти к переменной

Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости и где она объявлена. F12 перенесёт вас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.

Включить или выключить перенос слов

Windows — Alt + Z

macOS Option + Z

Если строки кода или текст не вмещаются в редактор по ширине, включите перенос.

Включить дзен-режим

Windows — Ctrl + KZ

macOS — Command + KZ

Лучшее решение для тех, кто входит в состояние потока, когда пишет код. Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете плыть в волнах кода и думать только о нём. Чтобы вернуться в реальный мир, нажмите Escape .

�� Больше статей о фронтенде и работе в айти в телеграм-канале.

Материалы по теме

• 10 лучших тем для VS Code
• 34 инструмента для веб-разработчика на каждый день
• 10 полезных плагинов VS Code для вёрстки
• 17 плагинов для JavaScript в VS Code
• Обзор редакторов кода

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Dev Mode в Figma. Быстрый обзор бета-версии

Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.

Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.

Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.

• 10 августа 2023

Горячие клавиши Figma для быстрой работы

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

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

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

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

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

А если не пользуетесь — попробуйте.

• 7 августа 2023

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

• 2 августа 2023

Инструменты для работы со шрифтами

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

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

• 29 июня 2023

10 лучших тем для VS Code

VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.

• 11 июня 2023

10 полезных плагинов VS Code для вёрстки

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

Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.

• 9 июня 2023

17 полезных плагинов JavaScript в VS Code

Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.

Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.

• 6 июня 2023

Подборка микроанимаций для фронтенда с CodePen в 2023

⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

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

• 12 апреля 2023

Как собрать проект на Webpack

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

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

• 7 апреля 2023

Webpack: инструкция по применению

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

Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование плагина CopyWebpackPlugin . Рассмотрим подробнее, как это делать.

CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию. Для начала установите CopyWebpackPlugin в свой проект:

npm install copy-webpack-plugin --save-dev 

После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:

const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); module.exports = < // ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: path.resolve(__dirname, 'src/assets'), to: path.resolve(__dirname, 'dist/assets') >] >) ] >; 

В плагине содержится массив объектов patterns . Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.

Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.

�� Научитесь работать с webpack и сократите время на разработку, сборку и тестирование проекта.

Копирование нескольких файлов

Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns .

Каждый объект-шаблон содержит свойство from , оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.

const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = < //ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: 'src/images', to: 'dist/images' >, < from: 'src/index.html', to: 'dist' >, ], >), ], >; 

В примере первый объект-шаблон копирует каталог images из src в dist/images , а второй — копирует файл index.html из src в dist . Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.

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

Другие способы

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

Лоадер file-loader позволяет копировать статические файлы в указанную папку при сборке проекта. Чтобы использовать file-loader , установите его с помощью npm :

npm install file-loader --save-dev 

Затем добавьте его в конфигурационный файл webpack.config.js :

module.exports = < // . ваша конфигурация webpack . module: < rules: [ < test: /\.(png|jpe?g|gif)$/i, use: [ < loader: 'file-loader', options: < name: '[name].[ext]', outputPath: 'images/', >, >, ], >, ], >, >; 

В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.

Лоадер url-loader работает аналогично file-loader , но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.

Для использования url-loader необходимо его установить:

npm install url-loader --save-dev 

Затем добавить в конфигурационный файл webpack.config.js :

module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, use: [ < loader: 'url-loader', options: < limit: 8192, >, >, ], >, ], >, >; 

Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images . Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.

Описанные лоадеры ещё используются в разработке, но рекомендуем ознакомиться с новой версией Webpack и её обновлениями.

• 30 марта 2023

Функционал VSCode для повышения продуктивности

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

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

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

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

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

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

View this post on Instagram

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

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

View this post on Instagram

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

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

View this post on Instagram

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

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

View this post on Instagram

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

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

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

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

View this post on Instagram

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

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

View this post on Instagram

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

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

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

View this post on Instagram

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

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

View this post on Instagram

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

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

1) Назад / вперед (ALT + ← / →)

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

Сделаем это по-быстрому: 20 полезных сочетаний клавиш для VS Code

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

Детям из Мариуполя нужно 120 ноутбуков для обучения — подари старое «железо», пусть оно работает на будущее Украины

Начать зарабатывать на разработке, помогут курсы наших партнеров Mate Academy, Powercode, Robot Dreams. Качественно составленные уроки и помощь квалифицированных менторов, помогут всем стать разработчиками.

1. Открыть и закрыть боковую панель

Боковую панель в VS Code можно открывать и закрывать без нажатия клавишей мыши на левую боковую вкладку с помощью следующих хоткеев:

• Mac — CMD + B
• Windows — Ctrl + B

Курс Комерційний директор.

Зосередження на практичних завданнях та послідовному аналізі проектів замість великої теорії. Реалізуй свої мрії про керівну посаду після завершення курсу.

Особенно полезно при нахождении в режиме разделенного редактора.

2. Выбрать слово

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

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

3. Разбить окно по вертикали

Полезно, если нужно сравнить несколько файлов.

Mac — CMD + \ или 2,3,4

Курс Python.

Цю мову програмування використовують від базових концепцій до складних застосувань у сферах штучного інтелекту. Після проходження курсу гарантовано отримай роботу в ІТ.

4. Свернуть блоки кода

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

свернуть самую внутреннюю несвернутую область под курсором:
Mac — CMD + Option + [

• Mac — CMD + Option + ]
• Windows/Ubuntu — Ctrl + Shift + ]

5. Скопировать строку сверху или снизу

Если нужно скопировать текущую строку в строку выше или ниже, нажмите:

Курс С++ для GameDevData analyst.

Комплексний курс, який навчить кодити на C++ з нуля, отримай необхідні навички щоб заволодіти затребуваною мовою програмування.

• Mac — Shift + Option + Up/Down
• Windows — Shift + Alt + Up/Down
• Ubuntu — Ctrl + Alt + Up/Down

6. Форматирование кода

Позволяет выровнять код в соответствии с заранее прописанными настройками редактора. Вот как это сделать.

Mac — Shift + Option + F

7. Обрезать множественные конечные пробелы

Позволяет избавиться от пробелов в начале или конце строки.

Для автоматической обрезки пробелов, можно изменить свойства VS Code. Для этого:

Пройдите в P references > Settings > User Setting Tab и добавьте новый параметр “files.trimTrailingWhitespace : true” в документы User Settings. После сохранения файла пробелы будут удаляться автоматически.

8. Объединить строку

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

• Mac — Ctrl + J
• Ubuntu/Windows — откройте существующие сочетания клавиш: File > Preferences > Keyboard shortcuts и назначьте удобное сочетание клавиш для editor.action.joinLines .

9. Быстрое открытие файла

• Mac — CMD + P
• Windows/Ubuntu — Ctrl + P

10. Палитра команд

Открывает доступ ко всем доступным командам.

• Mac — CMD + Shift + P
• Windows/Ubuntu — Ctrl + Shift + P

11. Переключить терминал

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

• Mac — CMD + ‘
• Windows/Ubuntu — Ctrl + ‘

12. Переключить вкладки

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

• Mac — CMD + 1, CMD + 2, CMD + 3
• Windows/Ubuntu — Ctrl + 1, Ctrl + 2, Ctrl + 3

13. Перейти на строку

С помощью этого сочетания клавиш можно перейти на строку, на которой стоит курсор.

• Mac — CMD + L
• Windows/Ubuntu — Ctrl + L



14. Удалить строку

Чтобы удалить строку, нажмите следующее сочетание клавиш:

• Mac — CMD + Shift + K
• Windows/Ubuntu — Ctrl + Shift + K

15. Переместить строку

Для перемещения строки в VS Code используются следующие хоткеи:

• Mac — Option + Up/Down arrow
• Windows/Ubuntu — Alt + Up/Down arrow

Запишитесь на онлайн курсы и начните изучать популярные языки программирования: python и java. Они дадут быстрый старт в вашей карьере разработчика, потому что количество вакансий с ними растет с каждым днем.

16. Найти слово/фразу

Чтобы найти в текущем файле нажмите:

• Mac — CMD + F
• Windows/Ubuntu — Ctrl + F

Чтобы искать по проекту:

• Mac — CMD + Shift + F
• Windows/Ubuntu — Ctrl + Shift + F

17. Показать определение

Функция Peel Definition позволяет просматривать и редактировать исходный код нужного символа.

• Mac — Option + F12
• Windows/Ubuntu — Alt + F12



18. Переименовать переменную

Позволяет переименовать переменную. Очень полезный хоткей для рефакторинга.

• Mac/Windows/Ubuntu — F2

19. Выбор нескольких курсоров

VS Code поддерживает функцию нескольких курсоров для быстрого одновременного редактирования. Чтобы их добавить нажмите:

• Mac — Option + Клик левой кнопкой мыши
• Windows/Ubuntu — Alt + Клик левой кнопкой мыши

20. Дублировать строку

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

• Mac — CMD + Shift + D
• Windows/Ubuntu — Ctrl + Shift + D

Еще больше хоткеев найдете по ссылке .

Курс Управління командою в бізнесі.

Онлайн-курс для ефективного управління командою, спрямований на створення проактивних та самостійних команд, де мікроменеджмент не потрібний.

Как добавлять множественный курсор с клавиатуры?

Добрый день. Недавно перешел с VsCode на WebStorm. В VsCode была удобная функция добавления множественного курсора, используя хоткеи (у меня shift+alt+cmd+(стрелка вниз или вверх)).
В WebStorm вижу возможность добавлять множественный курсор только через ctrl+клик.



Есть аналогичная функция в WebStorm, а если нет, то возможно ли ее как нибудь настроить?

• Вопрос задан более трёх лет назад
• 441 просмотр

3 комментария

Простой 3 комментария

Похожие публикации:
1. Как набрать на русской клавиатуре
2. Как называется страница приветствия апач
3. Как открыть конструктор windows forms в visual studio
4. Пдф открывается в браузере как убрать