Выйти из полноэкранного режима visual studio code
Обновлено: 04.07.2024
Самый простой и эффективный способ упростить себе работу в Visual Studio Code – это использование горячих клавиш. В статье мы расскажем о десяти очень полезных сочетаниях.
Добавление комментария
Как вы знаете, для добавления поясняющего комментария нужно поместить курсор в начало строки и записать туда двойной слеш. Но это замедляет процесс. Гораздо удобнее нажать клавиши Ctrl + /, потому что это можно делать в любом месте строки – она все равно вся закомментируется. А если строка уже была комментарием, тогда она станет обычной.
Перейти на определенную строку
Windows: Ctrl + G
Представьте, что отладчики сообщили вам, будто на 846 строке кода случилась катастрофическая ошибка мирового масштаба. Если вы начнете листать и вручную искать это место Х, пройдет слишком много времени. Поэтому просто нажмите комбинацию Ctrl + G, укажите номер нужной строки и без лишней возни приступайте к спасению мира.
Поменять соседние строки местами
Если все пошло не по плану, и вам не хочется переписывать весь код заново, иногда решением проблемы может стать банальное изменение строк местами. Если необходимо поместить строку на одну позицию вверх или вниз, воспользуйтесь сочетанием Alt + стрелка в направлении перемещения.
Дублировать строку
Палочка-выручалочка для тех, кому надоело по нескольку раз выделять-копировать-вставлять один и тот же фрагмент.
Переход к парной скобке
В большом объеме кода очень легко запутаться. Порой становится неясно, какая скобка к какому блоку относится, что где начинается и заканчивается, и что вообще творится на экране. В таком случае нужно пользоваться указанными выше клавишами – это очень полезное дополнение к существующей подсветке пар скобок.
Переименование переменной
Долго и старательно вы писали-писали свой код, а тут пришел старший разработчик и сказал, что называть переменные буквами английского алфавита – это дурной тон. Что теперь: просматривать весь документ и исправлять каждую вручную? Зачем, если есть волшебная клавиша F2.
Отформатировать документ
Windows: Shift + Alt + F
После нажатия указанной комбинации VS Code предложит вам выбрать любое из существующих расширений или установить новое. Далее документ будет красиво отформатирован: все останется на своих местах и сохранится читаемость.
Найти объявление переменной
Если вам стало непонятно, что за переменная перед вами и откуда она взялась, выделите ее и нажмите F12 – это перенесет вас к месту объявления, даже если оно находится в отдельном файле.
Вкл/выкл перенос слов
Это дело вкуса. Если вам не нравится, что текст по ширине не помещается в окне редактора, включите перенос слов.
Включение дзен-режима
Windows: Ctrl + K Z
Самый удобный вариант для тех, кто работает в состоянии “потока”, когда не нужно ничего лишнего – только развернутый на полный экран редактор. Чтобы дополнительные панели не отвлекали от кода, включите дзен-режим. Выключается он клавишей Escape.
Больше интересных новостей
Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью чуть упростить себе жизнь в Visual Studio Code.
Быстро добавить комментарий
Обычно чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + /, и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.
Перейти к строке под номером
Windows — Ctrl + G
Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G, введите номер строки и спокойно спасайте вселенную.
Поменять строку местами с соседними
Alt и стрелки меняют текущую строку местами с соседними.
Дублировать строку
Windows — Shift + Alt + ↓ / ↑
Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.
Перейти к парной скобке
Windows — Ctrl + Shift + \
Когда кода становится много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок, и вообще, что происходит. На помощь приходит Ctrl+Shift+\ — это хорошее дополнение к стандартной подсветке парных скобок в VS Code.
Переименовать переменную
Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a , b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2.
Отформатировать документ
Windows — Shift + Alt + F
VS Code предложить установить расширение или выбрать из существующих, а потом красиво отформатирует документ — расставит по местам блоки, скобки, и сделает строки кода читаемыми.
Перейти к объявлению переменной
Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости, и где она объявлена. F12 перенесёт нас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.
Включить/выключить перенос слов
Windows — Alt + Z
Вкусовщина. Если строки кода или текст не вмещается в редактор по ширине, включите перенос.
Включить дзен-режим
Windows — Ctrl + K Z
Лучшее решение для тех, кто входит состояние потока, когда пишет код. Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете плыть в волнах кода и думать только о нём. Чтобы вернуться обратно в реальный мир, нажмите Escape.
На интерактивных курсах все клавиши станут горячими
Потому что оторваться вообще не получается. 11 глав бесплатно, и −30% на подписку в первую неделю обучения.
Набор всех доступных горячих клавиш (быстрых команд) для работы с редактором кода VSCode, которые значительно упрощают ведение разработки и написание кода.
Все десктопные программы имеют в своём арсенале быстрые команды комбинацией клавишь, называемые как горячие клавиши. Скорей всего вы уже знакомы с некоторыми командами горячими клавишами для управлением Windows. Так же и у самого популярного редактора кода Visual Studio Code есть большой набор своих горячих клавишь.
Основные
Ctrl + ⇧Shift + P или F1 Показать палитру команд
Ctrl + P Быстрое открытие, переход в файл.
Ctrl + ⇧Shift + N Новое окно/экземпляр
Ctrl + ⇧Shift + W Закрыть окно/экземпляр
Ctrl + , Параметры (Пользовательские настройки)
Ctrl + K или Ctrl + S Горячие клавиши (управление)
Редактирование - Базовые
Ctrl + X Вырезать строку (пустое выделение)
Ctrl + C Копировать строку (пустое выделение)
Alt + ↑ / ↓ Переместить строку вверх/вниз
⇧Shift + Alt + ↓ ИЛИ ↑ Копировать строку вверх/вниз
Ctrl + ⇧Shift + K Удалить строку
Ctrl + Enter Вставить строку ниже
Ctrl + ⇧Shift + Enter Вставить строку выше
Ctrl + ⇧Shift + \ Перейти к соответствующей скобке
Ctrl + ] ИЛИ [ Отступ/уменьшить отступ линии
Home ИЛИ End Перейти к началу / концу строки
Ctrl + Home Перейти к началу файла
Ctrl + End Перейти в конец файла
Ctrl + ↑ ИЛИ ↓ Прокрутка строки вверх / вниз
Alt + PgUp / PgDn Прокрутка страницы вверх / вниз
Ctrl + ⇧Shift + [ Свернуть фрагмент кода
Ctrl + ⇧Shift + ] Развернуть фрагмент кода
Ctrl + K Ctrl + [ Свернуть все сворачиваемые фрагменты кода
Ctrl + K Ctrl + ] Развернуть все сворачиваемые фрагменты кода
Ctrl + K Ctrl + 0 Fold (collapse) all regions
Ctrl + K Ctrl + J Unfold (uncollapse) all regions
Ctrl + K Ctrl + C Добавить строчный комментарий //
Ctrl + K Ctrl + U Удалить строчный комментарий //
Ctrl + / Поставить/снять строчный комментарий //
⇧Shift + Alt + A Поставить/снять блочный комментарий /* . */
Alt + Z Вкл/выкл перенос строк
Навигация
Ctrl + T Показать все символы
Ctrl + G Перейти к строке.
Ctrl + P Перейти к файлу.
Ctrl + ⇧Shift + O Перейти к символу.
Ctrl + ⇧Shift + M Показать панель проблем
F8 Перейти к следующей ошибке или предупреждению
⇧Shift + F8 Перейти к предыдущей ошибке или предупреждению
Ctrl + ⇧Shift + Tab↹ Навигация по истории вкладок редактора
Ctrl + M Toggle Tab moves focus
Поиск и замена
Ctrl + H Заменить
F3 ИЛИ ⇧Shift + F3 Найти следующий/предыдущий
Alt + Enter Select all occurences of Find match
Ctrl + D Add selection to next Find match
Ctrl + K Ctrl + D Move last selection to next Find match
Alt + C ИЛИ R ИЛИ W Toggle case-sensitive / regex / whole word
Мульти-курсор и выделение
Alt + Click Вставить курсор - Insert cursor
Ctrl + Alt + ↑ ИЛИ ↓ Insert cursor above / below
Ctrl + U Undo last cursor operation
⇧Shift + Alt + I Insert cursor at end of each line selected
Ctrl + I Select current line
Ctrl + ⇧Shift + L Select all occurrences of current selection
Ctrl + F2 Select all occurrences of current word
⇧Shift + Alt + → Expand selection
⇧Shift + Alt + ← Shrink selection
⇧Shift + Alt + (drag mouse) Column (box) selection
Ctrl + ⇧Shift + Alt + (arrow key) Column (box) selection
Ctrl + ⇧Shift + Alt + PgUp / PgDn Column (box) selection page up/down
Редактирование многих языков
Ctrl + Пробел Trigger suggestion
Ctrl + ⇧Shift + Пробел Trigger parameter hints
⇧Shift + Alt + F Format document
Ctrl + K Ctrl + F Format selection
F12 Go to Definition
Alt + F12 Peek Definition
Ctrl + K F12 Open Definition to the side
Ctrl + . Quick Fix
⇧Shift + F12 Show References
F2 Переименовать символ
Ctrl + K Ctrl + X Trim trailing whitespace
Ctrl + K M Change file language
Управление редактором
Ctrl + F4 , Ctrl + W Закрыть редактор
Ctrl + K F Закрыть папку
Ctrl + \ Разделить редактор
Ctrl + 1 ИЛИ 2 ИЛИ 3 Focus into 1st, 2nd or 3rd editor group
Ctrl + K Ctrl + ← ИЛИ → Focus into previous/next editor group
Ctrl + ⇧Shift + PgUp ИЛИ PgDn Move editor left/right
Ctrl + K ← ИЛИ → Move active editor group
Управление файлами
Ctrl + N Новый файл
Ctrl + O Открыть файл.
Ctrl + S Сохранить
Ctrl + ⇧Shift + S Сохранить как.
Ctrl + K S Сохранить все
Ctrl + F4 Закрыть
Ctrl + K Ctrl + W Закрыть все
Ctrl + ⇧Shift + T Открыть закрытый редактор - Reopen closed editor
Ctrl + K Enter Оставить открытым редактор в режиме предварительного просмотра - Keep preview mode editor open
Ctrl + Tab↹ Открыть следующий
Ctrl + ⇧Shift + Tab↹ Открыть предыдущий
Ctrl + K P Копировать путь активного файла
Ctrl + K R Открыть активный файл в проводнике
Ctrl + K O Показать активный файл в новом окне/экземпляре
Display
F11 Toggle full screen
⇧Shift + Alt + 0 Toggle editor layout (horizontal/vertical)
Ctrl + = ИЛИ - Zoom in/out
Ctrl + B Toggle Sidebar visibility
Ctrl + ⇧Shift + E Show Explorer / Toggle focus
Ctrl + ⇧Shift + F Показать Поиск
Ctrl + ⇧Shift + G Show Source Control
Ctrl + ⇧Shift + D Показать Отладка (Debug)
Ctrl + ⇧Shift + X Показать Расширения
Ctrl + ⇧Shift + H Replace in files
Ctrl + ⇧Shift + J Toggle Search details
Ctrl + ⇧Shift + U Show Output panel
Ctrl + ⇧Shift + V Open Markdown preview
Ctrl + K V Open Markdown preview to the side
Ctrl + K Z Zen Mode (Esc Esc to exit)
Отладка (Debug)
F9 Переключить точку останова
F11 / ⇧Shift + F11 Step into/out
Ctrl + K Ctrl + I Show hover
Интегрированный терминал
Ctrl + ` - Показать встроенный терминал
Ctrl + Shift + ` - Создать новый терминал
Ctrl + C Копировать выделенное
Ctrl + V Вставить в активный терминал
Ctrl + ↑ ИЛИ ↓ Прокрутить вверх/вниз
⇧Shift + PgUp ИЛИ PgDn Прокрутить на одну страницу вверх/вниз
Ctrl + Home Прокрутка в начало
Ctrl + End Прокрутка в конец
Программист постоянно работает с исходными кодами. Инструменты для написания кода можно разделить на две группы: среды разработки (IDE) и редакторы. Первые предоставляют большие возможности при разработке программ: отладку, управление пакетами, интеграцию с тестами и тд. Например: Visual Studio, Intellij IDEA, Eclipse. Редакторы – легковесные программы, в которых нет таких широких возможностей как в IDE. Тем не менее они выполняют главную функцию – помогают быстро писать код. А многие из них предоставляют богатые возможности по настройке под себя. Примеры редакторов кода: Sublime Text, Atom, Notepad++.
Visual Studio Code – промежуточный вариант между IDE и простым редактором. Он позиционируется как редактор кода, но содержит ряд возможностей, свойственных средам разработки. Сегодня мы разберемся, что из себя представляет VS Code, и рассмотрим некоторые функции, которые могут вам пригодиться. Поэтому пост заинтересует и тех, кто не знаком с этим редактором, и активных пользователей, которые найдут полезное для себя.
Visual Studio Code – редактор кода от Microsoft. Он бесплатный, и скачать его можно на официальном сайте. VS Code соответствует новой политике Microsoft, поэтому он опенсорсный и работает на нескольких платформах. Рассмотрим отличительные черты этого редактора:
- Explorer. На изображении выше открыт этот блок. В нем определяется workspace – файлы, с которыми вы работаете. Имя рабочего пространства соответствует корневой директории. Над ним перечислены все открытые в редакторе файлы. Кружком помечены те, которые не сохранены.
- Search. Поиск по workspace. Можно искать с учетом регистра, целых слов и по шаблону. В этом же блоке работает замена строк. Для перехода в режим поиска можно использовать комбинацию CTRL + SHIFT + F . При наведении курсора на любой блок VS Code подскажет какие комбинации клавиш им соответствуют.
- Source Control. Встроенная поддержка git и других систем контроля версий.
- Debug. Все для отладки: Variables, Call Stack, Watch, Breakpoints.
- Extensions. Набор всевозможных плагинов, которые можно установить. Вот список самых популярных:
В VS Code можно настроить очень многое под свои нужды. Меняйте внешний вид редактора и автоматизируйте ваши действия.
Изменение темы
Изменение настроек
Рассмотрим некоторые настройки, которые могут вам пригодиться:
- Настройки редактирования.
- Размер шрифта. "editor.fontSize": 14
- Размер таба. "editor.tabSize": 4
- Шрифт. "editor.fontFamily": "Consolas, 'Courier New', monospace"
- Перенос слов. "editor.wordWrap": "on"
Если с первыми тремя настройками все понятно, то последнюю нужно пояснить. Когда она включена, слово, которое не помещается по длине в размер редактора, будет целиком перенесено на следующую строку. При этом горизонтальный скролл никогда не появится. Удобная настройка, которая по умолчанию отключена.
- Автосохранение. "files.autoSave": "on"
- Задержка при автосохранении. "files.autoSaveDelay": 5000
По умолчанию файлы сохраняются только тогда, когда пользователь об этом попросит. Это поведению можно изменить, включив автосохранение файлов. Также можно настроить задержку после ввода перед автосохранением. Величина записывается в миллисекундах.
- Размер шрифта. "terminal.integrated.fontSize": 14
- Выбор терминала. "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
- Тип курсора. "terminal.integrated.cursorStyle": "line"
Все настройки, связанные с терминалом, находятся в разделе Integrated Terminal. Например, вы можете изменить отображение курсора с блока на линию.
Создание задач
Зачем нужны задачи покажу на конкретном примере. Для локального запуска сайта я использую команды:
Для того, чтобы делать это, не выходя из редактора, можно использовать встроенный терминал. Однако, можно автоматизировать и этот процесс. Для этого существуют задачи. Откроем их конфигурацию через Command Palette: Tasks. Configure Tasks . В открывшемся файле tasks.json создадим кастомную задачу.
Однако, это несильно автоматизирует наш процесс. Для запуска этой задачи нужно открывать Command Palette и искать ее среди других команд. Чтобы запускать задачу по кнопке, откроем файл keybindings.json (в Command Palette: Preferences. Open Keyboard Shortcuts File ) и добавим нужные комбинации клавиш.
Также задачи часто используются для автоматизации сборки кода и прогона тестов.
Создание сниппетов
Рассмотрим стандартные команды и соответствующие им комбинации клавиши, которые полезны в самых разных ситуациях. Маппинг команд и сочетаний клавиш можно открыть через CTRL + K, CTRL + S и переопределить на свой вкус.
- Zen Mode ( CTRL + K, Z ). В этом режиме окно с кодом занимает весь экран. Это располагает к максимальной сосредоточенности на этом файле и работе. Он отличается от полноэкранного режима ( F11 ), в котором все пространство занимает именно редактор. В режиме Zen вы не будете отвлекаться ни на что. Для переключения на другой файл используйте комбинацию CTRL + P . Она работает во всех режимах и позволяет искать именно по файлам в рабочем пространстве. Выход из режима Zen осуществляется двойным ESC .
- Markdown Preview ( CTRL + K, V ). Полезная операция для тех, кто пользуется Markdown. Она отображает справа от текста результаты вашей верстки.
- Дублирование строки вниз/вверх ( ALT + SHIFT + DOWN/UP ).
- Перемещение строки вниз/вверх ( ALT + DOWN/UP ).
- Комментирование строки ( CTRL + / ).
Команды выше работают и для нескольких строк.
- Вставка новой строки вверх/вниз ( CTRL + ENTER / CTRL + SHIFT + ENTER ).
- Выделение строки ( CTRL + I ).
- Выделение слова ( CTRL + D ).
- Множественный курсор. ( ALT + CLICK ).
Мне трудно представить свой рабочий процесс без VS Code. Если вы им не пользуетесь, то советую хотя бы попробовать. Сегодня мы посмотрели на малую часть того, как можно упростить работу с кодом с помощью этого редактора. В следующий раз мы рассмотрим некоторые полезные плагины, которые есть в маркете VS Code.
Читайте также: