Сочетания клавиш в Visual Studio Code для профессионального программирования
Если мы хотим научиться программировать, первое, что нам нужно, — это хорошая среда разработки для программирования. В зависимости от типа программы, которую мы хотим создать, необходимо выбрать среду, которая наилучшим образом соответствует нашим потребностям, и язык, который мы собираемся использовать. В дополнение к множеству специализированных IDE, которые мы можем найти, есть также универсальные инструменты, у которых каждый раз появляется больше последователей, учитывая их возможности. И один из лучших — это Код Visual Studio .
Что такое код Visual Studio
Компания Бренд «Visual Studio» имеет всегда считался средой, созданной Microsoft программировать всевозможные программы для собственной экосистемы (Windows, Сервер, Azure и т. Д.). Эта платформа всегда была проприетарной и к тому же платной (и не совсем дешевой). Однако в 2015 году Microsoft удивила пользователей, создав новый инструмент под этим брендом, полностью бесплатный и с открытым исходным кодом: Visual Studio Code.
VSC — это кроссплатформенная и мультиязычная среда программирования создан Microsoft для всех пользователей, которым нужен простой и доступный редактор кода. Этот редактор полностью бесплатный для всех пользователей, с открытым исходным кодом (запрограммирован на Electron и Node.js) и доступен для Windows, macOS и Linux.
Среди его основных особенностей мы можем выделить, что это полностью настраиваемый редактор . Стандартно у нас есть очень базовая функциональность, с немногим большим количеством функций, чем в обычном текстовом редакторе. Однако мы можем расширить эти функции, загрузив и установив расширения . Эти расширения могут быть найдены в самой программе и позволяют нам специализировать ее на определенных языках или добавлять другие функции, недоступные в стандартной комплектации. Кроме того, пользователи могут изменять тему и цвета в соответствии со своими вкусами или увлечениями. Перед нами один из самых универсальных редакторов кода, который мы можем найти.
Помимо всего вышеперечисленного, эта программа предназначена для работы с идти (и GitHub с одним из расширений, о которых мы только что говорили), включает расширенные отладка системы, подсветка синтаксиса, функция автозаполнения кода, функции для рефакторинга вашего кода и т. д.
Если она еще не установлена, мы можем загрузить последнюю версию программы с Следующая ссылка . Помимо стабильной версии, мы также можем загрузить любую из разрабатываемых версий программы, чтобы иметь ранний доступ к последним функциям.
Изучение сочетаний клавиш VSC
Все функции программы находятся у нас под рукой с помощью мыши в ее меню. Однако в зависимости от того, что мы делаем, убирая руки с клавиатуры и переходя к мыши, поиск и щелчок для выполнения определенной задачи могут быть непродуктивными.
Microsoft адаптировала свой редактор кода для простоты использования благодаря сочетаниям клавиш. Сочетание клавиш — это предварительно настроенная комбинация клавиш выполнить определенное действие. Эти сочетания клавиш могут быть одной клавишей (например, клавиши F) или комбинацией клавиш, обе из которых обычно используют Control или Alt в качестве средств запуска.
Мы можем найти большое количество ярлыков в Visual Studio Code. Некоторые из них позволяют нам более легко использовать основные функции программы, например:
- Ctrl + K + S -> открыть список сочетаний клавиш.
- Ctrl + Shift + P -> открыть палитру команд.
- Ctrl +, -> открыть настройки.
- Ctrl + Shift + X -> изменить панель расширений.
- Ctrl + T -> открыть универсальную панель быстрого поиска.
- Ctrl + N -> открыть новый файл.
- Ctrl + Shift + N -> открыть новое окно.
- Ctrl + F4 -> закрыть файл.
- Ctrl + Shift + W -> закрыть окно.
- F11 -> поставить на весь экран.
- Ctrl + B -> показать или скрыть боковую панель.
- Ctrl + O -> открыть файл.
- Ctrl + S -> сохранить файл.
- Ctrl + Shift + S -> сохранить файл как
- Ctrl + Shift + T -> открыть последнюю закрытую вкладку.
- Ctrl + C -> скопировать выделение или строку, которую мы активировали в то время.
- Ctrl + X -> вырезать выделение или линию, которую мы активировали в этот момент.
- Ctrl + V -> вставить содержимое буфера обмена.
- Ctrl + Shift + K -> удалить строку.
- Главная -> перейти в начало строки.
- Конец -> перейти в конец строки.
- Ctrl + Home -> перейти в начало файла.
- Ctrl + End -> перейти в конец файла.
- Alt + вверх / вниз -> перейти на одну строку вверх или вниз.
- Ctrl + / -> закомментировать строку.
- Shift + Alt + A -> закомментировать область.
- Ctrl +] -> добавить отступ.
- Ctrl + [-> убрать отступ.
- Ctrl + P -> перейти к файлу.
- Ctrl + G -> перейти к строке.
- Ctrl + T -> показать все символы.
- Ctrl + Shift + O -> перейти к символу.
- F8 -> перейти к следующему предупреждению компилятора.
- Shift + F8 -> перейти к предыдущему предупреждению компилятора.
- Ctrl + Shift + M -> показать панель проблемы.
- Ctrl + -> разделить редактор.
- Ctrl + 1/2/3 -> открыть один из редакторов.
- Ctrl + Shift + Avpag -> переместить редактор вниз.
- Ctrl + Shift + Repag -> переместить редактор вверх.
И, конечно же, VSC покажет нам серию сочетаний клавиш, которые помогут нам редактировать код легче. Среди прочего можно выделить:
- Ctrl + F -> открыть панель поиска.
- Ctrl + H -> открыть панель замены.
- Ctrl + Shift + H -> заменить в файлах.
- F3 -> найти дальше.
- Shift + F3 -> предыдущий поиск.
- Alt + Enter -> выбрать все совпадения одного и того же термина.
- Ctrl + D -> добавить текущий выбор к поиску.
- Ctrl + L -> выбрать текущую строку.
- Ctrl + Shift + L -> выделить все строки в текущем разделе.
- Ctrl + F2 -> выделить все совпадения текущего слова.
- Shift + Alt + стрелка вправо -> расширить выделение.
- Shift + Alt + стрелка влево -> выбрать выделение.
- Alt + Click -> добавить курсор.
- Ctrl + Alt + вверх / вниз -> добавить курсор выше или ниже.
- Ctrl + U -> отменить последний курсор.
Наконец, сочетание клавиш «Ctrl +« »позволяет нам показать терминал, интегрированный в программу, что очень полезно в задачах отладки.
Некоторые сочетания клавиш, которые мы только что видели, могут меняться в зависимости от используемой нами операционной системы. В нашем случае мы поместили сочетания клавиш для Windows, но если мы используем macOS или Linux, хотя многие из них будут совпадать, другие (например, Ctrl + F4) будут назначены другим клавишам.
VS Code — горячие клавиши, хоткеи
Горячая клавиша — это клавиша клавиатуры, которая при нажатии сама по себе или в сочетании с другими клавишами выполняет определенную функцию. Горячие клавиши обеспечивают удобные сочетания клавиш для выполнения обычных задач, доступ к которым осуществляется через меню. Пользователи также могут назначать сочетания клавиш во многих программах, используя макросы для создания функций горячих клавиш.
Горячие клавиши предоставляют пользователям компьютеров удобные сочетания клавиш.
Большинство операционных систем имеют библиотеку встроенных горячих клавиш, многие из которых стандартизированы, чтобы помочь пользователям, которые могут менять операционные системы или использовать несколько платформ. Программное обеспечение, включая текстовые процессоры, электронные таблицы и веб-браузеры, также включает в себя стандартизированные горячие клавиши в дополнение к специализированным горячим клавишам, специфичным для данной программы.
Ниже представлены горячие клавиши для программы Visual Studio Code (VS Code):
Руководство по горячим клавишам в Visual Studio Code
Visual Studio Code дает возможность использовать почти любую фичу с помощью команды на панели или через горячие клавиши.
Вероятно, что вы проводите за работой по 8:00 в день. Если вы разработчик, то большую часть времени заниматься кодом. Поэтому редактор кода — ваше рабочее пространство.
Если вы будете иметь в арсенале полезные горячие клавиши, это может значительно ускорить вашу работу, а значит и вашу производительность. Запоминайте!
Работа горячих клавиш
Выбирайте для вашей ОС:
Вы можете сохранить и распечатать шпаргалки и держать их ближе к рабочему месту, чтобы лучше запомнить.
Раскладка
Пользуетесь Vim? Возможно, горячие клавиши Emacs уже отразились в вашей памяти? Или вы ранее использовали notepad ++, поэтому хорошо знаете его горячие клавиши?
Это не проблема, поскольку в Visual Studio для вас есть расширения. Загрузим ⚛Atom Keymap.
- Откройте Visual Studio Code.
- Нажмите CTRL+SHIFT+X . Указанное клавиши откроет перечень расширений, а курсор будет сфокусировано на поле поиска. Введите @category:keymaps.
- Теперь вы видите перечень раскладок. Нажмите Tab и стрелку вниз ⬇ .
- Продолжайте нажимать на ⬇, пока не остановитесь на Atom Keymap . После этого нажмите Enter .
- Теперь все же придется кликнуть мышкой на кнопку Install.
Вы можете найти раскладку почти для любого нужного редактора. Установите наиболее удобную и привычную для вас — и больше не нужно будет запоминать лишние клавиши.
Настройка горячих клавиш (JSON)
Существует много способов проверить настройки горячих клавиш. Это может быть обычный графический интерфейс, или JSON-файл.
Графический интерфейс
Мы можем открыть графический интерфейс, нажав CTRL+k , а затем, удерживая CTRL , нажать CTRL+s .
Сверху будет поле поиска, где можно искать команды или горячие клавиши, назначение которых вы хотите проверить.
На скриншоте можно заметить четыре колонки. Рассмотрим каждую из них.
Command — действия, которые выполняет Visual Studio Code:
Keybinding: комбинация клавиш, которую необходимо нажать, чтобы выполнить действие;
When: фильтр для Visual Studio Code. Указывает, будет ли смысл сочетания клавиш в определенном контексте.
Source: Существует несколько способов, как Visual Studio Code может узнать сочетания клавиш. Наиболее распространенный способ — Default , то есть команды, которые доступны для Visual Studio Code из коробки. User — параметр, который обозначает команды, созданные пользователем. И третий способ — Extension . Авторы расширений могут добавлять горячие клавиши. Если ваше любимое сочетание клавиш почему-то вдруг не работает, это может быть одной из причин.
Чтобы изменить сочетания клавиш, дважды кликните на строку, чтобы появилось модальное окно. Нажмите комбинацию, которую вы хотите использовать для выбранного действия нажмите Enter .
JSON-файл с сочетаниями клавиш
Теперь вы знаете, как в целом работают сочетания клавиш. посмотрим на keybindings.json .
Существует два варианта keybindings.json : по умолчанию и пользовательский. Нажмите CTRL+SHIFT+P или F1 , чтобы открыть панель команд и введите keyboard shortcuts . Далее вы увидите как минимум две записи.
- Откройте файл с горячими клавишами по умолчанию (JSON). Там Visual Studio Code сохраняет все клавиши по умолчанию и список свободных соединений, доступных для использования. Сейчас не будем вносить здесь изменения.
- Откройте файл с горячими клавишами (JSON). Там описаны сочетания клавиш, добавленные пользователем. Поэтому редактировать будем именно этот файл. Сначала там будет просто пустой массив.
Чтобы добавить клавиши в JSON-файла, вам просто нужно добавить объект, например:
Надо определить key и саму команду. Параметр when указывает Visual Studio Code, при каких условиях следует выполнять команду. Если оставить его пустым, команда будет выполняться при любых условиях.
Полезные горячие клавиши
Открытие панели команд
Хотя мы уже упоминали это в начале статьи, повторить лишним не будет. CTRL+SHIFT+P или F1 откроет наиболее мощную фичу Visual Studio Code — панель команд. С ней очень просто найти то, что вам нужно.
Открытие и закрытие боковой панели
Иногда вам хочется иметь больше пространства для кода, однако мешает боковая панель. Нажмите CTRL+B , чтобы переключать ее.
Войти в режим Zen
Если вам нравятся возможности режима Zen, просто нажмите CTRL+k , отпустите обе клавиши и нажмите z .
Фокус встроенного терминала
Одна из самых полезных фич Visual Studio Code — встроенный терминал. Чтобы быстро открыть или закрыть его, необходимо нажать CTRL+j .
Команда открывает встроенный терминал и одновременно фокусирует курсор в нем. Если вы нажмете клавиши снова, терминал закроется, а курсор вернется на прежнее место.
Поиск файла
Visual Studio Code предлагает великолепный встроенный поиск файлов. Чтобы открыть его, нажмите CTRL+p . Так вы откроете диалоговое окно с ранее открытыми файлами.
Переход на недавно открытую рабочую область
Работаете с микросервисною архитектурой, поэтому необходимо переключаться между папками все время? Не используете монорепозиторий? Для вас есть решение! Нажмите CTRL+r.
Откроется диалоговое окно со списком ранее открытых Воркспейс / папок.
Бонусной совет: если нажмете CTRL+ENTER в этом окне, Visual Studio Code откроет в новом окне.
Разделение экрана
Многие разработчики предпочитают Vim именно из-за простоты разделения экрана в редакторе. Visual Studio Code также может похвастаться такой фичей. Просто нажмите
CTRL+\ , Чтобы создать две колонки, или
CTRL+k , Отпустить k, удерживать CTRL и нажать \, чтобы создать новую строку.
Второй вариант звучит несколько сложно, однако просто попробуйте его на практике.
Фокус окна редактора
Теперь вы знаете, как разделить окно редактора, но вам также необходимо научиться переключаться между открытыми вкладками быстро. К счастью, это достаточно легко с сочетаниями клавиш, просто необходимо нажать:
То есть нажимаете CTRLи номер окна, на котором нужен фокус (для первого — 1 и т. д.)
Закрытие текущего окна редактора
Вы наоткрывали много окон и хотите закрыть их. Нажмите CTRL+w , чтобы закрыть текущие открытые вкладки.
Закрытие вкладок с сохранением изменений
Иногда у вас очень много открытых вкладок и вы не знаете, в каких из них вы сохранили изменения. Да, конечно, вы могли заметить точку на вкладке с несохраненные изменениями, но для этого необходимо фокусироваться и искать нужные файлы. Visual Studio Code спешит на помощь. Просто нажмите: CTRL+k , затем отпустите эти клавиши и нажмите u .
Так вы сохраняете все изменения в открытых окнах.
Открыть новый файл
Нужен новый файл, чтобы набросать некий код? Нажмите CTRL+n . Так вы откроете новое окно редактора.
Изменение языка текущего файла
Нужно изменить выбранный язык текущего файла, потому что это Javascript (react), а не просто Javascript? Нажмите CTRL+k , затем отпустите эти клавиши и нажмите m . Откроется диалоговое окно, где можно поискать нужный язык.
Перейти к строке
Сфокусируемся на облегчении процесса отладки. Представим, что у вас произошла ошибка на строке 1042 (если ваш файл такой длинный, это уже проблема). Не нужно прокручивать к отдельной строке. Просто нажмите CTRL+g . В открытом диалоговом окне введите номер строки, на который вы хотите перейти.
Смещение строки выше или ниже
Иногда вам нужно переместить строку внутри if или просто переместить строку. Нажмите Alt+Down для смещения вниз и Alt+Up для смещения вверх.
Копировать текущую строку
Вы хотите наполнить массив некоторыми переменными, но писать цикл не хочется. Как же восполнить array[0], array[1]и array[2]? Просто скопируйте первую строчку дважды и измените то, что вам нужно. Для этого нажмите:
Так вы скопируете текущий выделенную строку и вставите ее строкой выше. Если нажмете ALT+SHIFT+Down , скопируете текущий выделенную строку и вставите его строкой ниже.
Показать подсказку
Visual Studio Code имеет встроенные подсказки. Почти всегда они появляются автоматически, однако иногда приходится вызывать самостоятельно. Для этого нажмите:
и откроется окно с подсказками.
Закомментировать выделенный фрагмент
Иногда вам надо закомментировать большую часть кода. Нажмите для этого CTRL+ /. Если было выделено несколько строк, все будут закомментированные. Если ничего не было выбрано, закоментуеться только текущая строка.
Свертывание и развертывание кода
У вас есть большая функция, требующая рефакторинга. Однако сейчас у вас нет на это времени и вы хотите забрать ее из виду. Вы можете свернуть код, более 100 строк, и сделать из него 1 строку. Для этого нажмите CTRL+SHIFT+[ . Чтобы развернуть код, нажмите CTRL+SHIFT+] .
Вырезать одну строку
Для этого даже не нужно выделять код. Просто нажмите CTRL+x и вырежьте текущую строку, если ничего не выделено.
Увеличение или уменьшение отступления строки
Мы часто имеем дело с созданием отступов. Для этого необходимо выделить код и нажать всем известный Tab . Нажмите Tab столько раз, сколько вам необходимо отступить.
Знаете, как сделать обратное действие — уменьшить отступ? Для этого существует SHIFT+tab .
Быстрый вызов сниппета console.log() в VS Code c помощью горячих клавиш
JavaScript
В этом посте покажу как упростить и облегчить написание JS кода с помощью сниппета console.log() в Visual Studio Code.
Довольно часто мы используем команду console.log() и неплохо было бы повесить ее на горячие клавиши. Чтобы при нажатии на хоткеи в редактор автоматически вставлялся вызов console.log() c курсором внутри скобок, чтобы быстро вывести значение переменной в консоль.
Для этого нам необходимо создать новое сочетание клавиш, на вызов которого мы повесим вставку сниппета с нужным кодом. Поехали!)
Заходим в Файл → Настройки → Сочетания клавиш
Далее, жмем на иконку в верхнем правом углу программы «Открыть сочетания клавиш (JSON)».
После этого попадаем в JSON файл keybindings.json , в котором будут описаны все пользовательские сочетания клавиш. Все сочетания клавиш описаны в виде объектов внутри массива. Если у вас пока нет сочетаний клавиш, то добавляем первое сочетание.
Добавим вызов данного сниппета на сочетание клавиш Ctrl + Shift + L . Выглядеть это будет вот так. Пример кода есть ниже в статье.
Код файла keybindings.json с единственным сниппетом для быстрого вызова console.log() :
Каждый пользовательский сниппет описан в видео объекта с полями:
key — для указания сочетания клавиш.
command — команда которая должна быть выполнена.
when — в какой момент должно работать сочетание клавиш.
args — дополнительные аргументы. В нашем случае в них записан сниппет который должен быть вставлен.
Внутри сниппета $