Visual Studio Code – практически лучший редактор кода, если вы работаете под графическим интерфейсом. Во первых, Visual Studio поддерживает множество языков; во вторых, на оформлении кода Visual Studio не останавливается – редактор может работать с Git, предоставлять рефакторинг, у него есть крайне удобный отладчик и так далее. В третьих, для VS есть множество полезных плагинов (как встроенных, так и сторонних), позволяющих манипулировать комбинациями клавиш и настраивать хоткеи под себя. О последнем мы и будем говорить: при каких сочетаниях клавиш VS ведет себя так или иначе, как не запутаться в горячих клавишах и как можно настроить горячие клавиши через собственноручно написанную (кодом!) конфигурацию.
Дефолтные клавиши
Настройка клавиш
Шпаргалки, документация, плагины
Дефолтные клавиши
Здесь мы предоставим список горячих клавиш, который редакторы кода из семейства VS имеют по дефолту.
Стандартное редактирование
Нужно зажать…
… и нажать
Действие
Learn Visual Studio Code in 7min (Official Beginner Tutorial)
Ctrl + …
Вырезать. Если ничего не выделили – вырежет всю линию
Скопировать. Если ничего не выделили – скопирует всю линию
Enter / Shift + Enter
Вставить пустую строку сверху/снизу. Курсор сдвигается только во втором случае
Отмена какого-либо действия
Отмена какого-либо действия, сделанного курсором
Выбрать все совпадения с тем, что выделено курсором
Выбрать ту линию, на которой установлен курсор
Переместиться к открывающим/закрывающим скобкам, которые совпадают с выделенными
Выделить отступом/Убрать выделение
К началу исходника
К концу исходника
Закрыть/Раскрыть регион. Действие касается функций, циклов и так далее
K, после чего Ctrl + U
Alt + …
Переместиться на строку вверх/вниз
Переместиться на экран вверх/вниз
Выбрать все совпадения с тем, что задано в поиске
Shift + …
Перейти к предыдущему совпадению
Alt + стрелочка вверх/вниз
Скопировать строчку выше/ниже
Закомментировать выделенное блочным комментарием
Богатое редактирование (Rich Languages Editing)
Нужно зажать…
… и нажать
Действие
Ctrl + …
Вызвать предложение (в VS code настроить предложения можно либо автоматически, либо вручную)
Вызывать подсказки по параметрам
K, после чего Ctrl + F
Форматировать выделенное в соответствии с правилами оформления, стандартными или заданными
Заменить следующим/предыдущим значением
K, после чего Ctrl + X
Обрезать лишние пробелы у строки
Shift + …
Форматировать весь документ в согласно правилам оформления, стандартным или заданным
Перейти к ссылкам
Ничего
Перейти к определению
Навигация
Нужно зажать…
… и нажать
Действие
Ctrl + …
Показать все символы
G, после – указать номер строки
Перейти к указанной строке
P, после – указать имя файла
Быстро открыть указанный файл
Как программировать на С++ в Visual Studio Code на Windows 10
Shift + O, после – указать символ
Перейти к символу
Показать все проблемы
Перейти к истории
Alt + …
Перемещаться назад-вперед по истории
Shift + …
Перейти к предыдущей ошибке/предупреждению
Ничего
Перейти к следующей ошибке/предупреждению
Показать все команды
Управление окнами
Нужно зажать…
… и нажать
Действие
Ctrl + …
Открыть новое окно
Разделить редактор на 2 экрана
Перейти к 1/2/3 группе редакторов
Переместить редактор влево/вправо
Alt + …
Закрыть текущее окно
Файлы
Нужно зажать…
… и нажать
Действие
Ctrl + …
Сохранить все файлы
Закрыть группы файлов
K, после чего Ctrl + W
Закрыть все файлы
Открыть последний закрытый редактор
K, после чего Enter
Скопировать путь текущего файла
Показать текущий файл в проводнике
Показать текущий файл в новом окне
Отображение
Нужно зажать…
… и нажать
Действие
Ctrl + …
Перейти в Дзен. Дзен – это как фуллскрин, только немного другой
0 на дополнительной цифровой клавиатуре
Сбросить масштабирование на 100%
Включить/выключить боковые панели
Открыть быстрый поиск
` (символ находится там, где в русской раскладке расположена буква ё)
Открыть встроенный терминал
Ctrl + Shift + …
Показать внутренний браузер
Вывести дерево источников
Вывести окно «Run»
Вывести окно расширений
Ничего
Поиск
Нужно зажать…
… и нажать
Действие
Ctrl + Shift + …
Заменить во всех открытых файлах
Открыть детали поиска
Alt + …
Пометить совпадения по словам
Пометить совпадения, используя регулярные выражения
Дебаггинг
Нужно зажать…
… и нажать
Действие
Ctrl + …
Запустить без дебаггинга
Ничего
Поставить точку останова в текущей строке
Настройка клавиш
Со стандартными клавишами все понятно – нажмите комбинацию и получите результат. Иногда нажатия клавиши регистрируются после того, как вы вошли в «командный режим» (эту идею Microsoft подсмотрела у Vim), для этого нажмите Ctrl + K, и затем уже вводите команду. Если вы хотите переназначить клавиши, зайдите в соответствующий раздел в настройках и выставьте все так, как вам удобно.
Но на этом возможности не заканчиваются – как и у других популярных редакторов, у VS Code есть функция установки расширения. Вы можете либо установить расширение, которое было написано кем-то, либо написать свое собственное. В частности, расширения позволяют переназначать клавиши. Сделать это можно через специальный файл – keybindings.json.
В нем, как понятно из формата, в формате JSON лежат все горячие клавиши, каждая запись состоит из 3-х частей: клавиша, команда, условие. Условие – необязательная часть, клавиша и команда должны быть обязательно.
Кроме того, вы можете задавать для команд аргументы, после чего триггерить команды по условию. Например, можно сделать так, чтобы по нажатию на Enter вместо выделенного фрагмента вставлялся определенный кусок текста.
Еще командами со знаком «-» можно отменять другие команды (это полезно, если задать условия назначения/отмены), и команды можно разбивать на несколько различных сетов, между которыми можно переключаться как между раскладками клавиатуры (по сути это и есть раскладки). VS Code умеет распознавать коды особых клавиш и контекст окружения, сами условия можно писать с помощью логических операторов. В общем, внутри VS Code встроен отдельный скриптовый фреймворк, который позволяет кодом описывать горячие клавиши. Ссылки на документацию будут ниже.
Шпаргалки, документация, плагины
- Базовая документация по горячим клавишам и скриптингу:ссылка. Здесь вы можете взять названия команд для всех операций.
- Документация по встроенным командам:ссылка.
- Шпаргалка для Linux:ссылка.
- Шпаргалка для Windows:ссылка.
- Шпаргалка для Mac:ссылка.
Популярные плагины с раскладками:
Источник: www.sravni.ru
Хоткеи для VS Code: гифки с демонстрацией и шпаргалка
Любую команду в Visual Studio Code можно выполнить через командную строку (Ctrl + Shift + P), но сочетания клавиш помогают сильно экономить время. Достаточно только привыкнуть их использовать.
Для вашего удобства в конце статьи есть шпаргалка со всеми хоткеями.
Прим. пер. Во всех сочетаниях используется английская раскладка.
Открыть настройки пользователя: Ctrl + ,
Время от времени заходить в настройки всё же приходится. Этот хоткей ускоряет процесс.
Показать список горячих клавиш: Ctrl + K Ctrl + S
Переключиться между средами разработки: Ctrl + R
Этот хоткей открывает список ваших недавних рабочих пространств. Это быстрый способ переключаться между папками и проектами. Обратите внимание, что при переходе сессия терминала закроется (если она была активна).
Глобальный перенос по словам: Alt + Z
Простой и удобный способ сразу увидеть все длинные строки без горизонтальной прокрутки.
Перейти на строку: Ctrl + G
Иногда нужно быстро и часто перескакивать на разные строки в объёмных файлах, а скроллить весь документ неудобно. Этот хоткей как раз для таких целей.
Перейти к файлу: Ctrl + P
Самый быстрый способ переключения между файлами (особенно если они ещё не открыты).
Перейти к следующей ошибке или предупреждению: F8
Отладка одной клавишей во плоти. Ещё можно переходить на предыдущую ошибку или предупреждение, используя Shift + F8.
Переключиться между вкладками: Ctrl + Tab
Быстрый способ переключения между уже открытыми файлами.
Поместить курсор в конец каждой выделенной строки: Shift + Alt + I
Эта возможность удобна для тех случаев, когда нужно выполнить идентичные операции в последовательных строках.
Выделить текущую строку: Ctrl + L
Хоткей используется для быстрого выделения всей строки, на которой установлен курсор.
Выделить все вхождения текущего выделения: Ctrl + Shift + L
Хоткей сэкономит время, потому что теперь не нужно использовать Ctrl + D во всём файле.
Выделить все вхождения текущего слова: Ctrl + F2
Теперь вам не нужно даже выделять конкретное слово — просто поместите на него курсор, нажмите хоткей и одновременно правьте все его вхождения.
Подсказки по параметрам: Ctrl + Shift + Space
Если вы вдруг забыли порядок параметров, а прерываться на документацию нет желания.
Форматировать документ: Shift + Alt + F
Специально для тех, кому лень постоянно придерживаться правил форматирования.
Форматировать выделенную область: Ctrl + K Ctrl + F
Такой же, как и предыдущий хоткей, но форматируется не весь документ, а только выделенная область.
Перейти к определению: F12
Быстрый способ перейти к определению функции или переменной.
Показать определение: Alt + F12
Сочетание клавиш похоже на прошлое, но в этом случае курсор никуда не перемещается.
Переименовать переменную: F2
Незаменимый хоткей для рефакторинга кода.
Обрезать пробелы в конце: Ctrl + K Ctrl + X
Чтобы вручную не удалять лишние пробелы в конце строки. Работает при выделении нескольких строк.
Отобразить открытый файл в проводнике: Ctrl + K R
Если вам нужно что-либо сделать с открытым файлом, поиск которого может занять много времени.
Замена в файлах: Ctrl + Shift + H
Если одного файла вам не достаточно.
Превью Markdown-файла: Ctrl + K V
Открыть предпросмотр Markdown-файла.
Включить Zen Mode: Ctrl + K Z
Не позволяйте навязчивым интерфейсам отвлекать вас от программирования. Хоткей поможет сконцентрироваться на коде.
Шпаргалка
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
Поделиться
Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.
Курс «TypeScript»
Постоянный доступ, онлайн, 7490 ₽
Марафон «От Junior до Middle Frontend-разработчика за 1 собеседование»
Постоянный доступ, онлайн, беcплатно
Что думаете?
Комментирую от имени компании
Показать все комментарии
Фотография
Обсуждают сейчас
Добрый день!Подскажите, как с вами можно связаться относительно вопросов рекламы?
Программирование для детей: 10 обучающих приложений
29 минут назад
Разработка чат-ботов с использованием Ruby
5 часов назад
Мне очень тревожно видеть работодателя, которого мотивируют только деньги. Первое, что появляется в голове: независимо от крутости специалиста и хороших отношений в команде — тебя попросят написать «по собственному желанию», если появится кандидат с пожеланием по зарплате даже на несколько процентов ниже.Ведь самое главное в бизнесе — не деньги, а продукт, который мы и должны создавать идеальным для клиентов
Источник: tproger.ru
практическая. ПР№10_Начало работы с Visual Studio Code. Практическая работа 10 Начало работы с Visual Studio Code. Создание дизайна страниц Введение в процессе выполнения всех заданий, вами будет создан полноценный вебсайт сервисного центра ооо Матрешка
Единственный в мире Музей Смайликов
Самая яркая достопримечательность Крыма
Скачать 297.64 Kb.
Практическая работа 10
Начало работы с Visual Studio Code. Создание дизайна страниц
В процессе выполнения всех заданий, вами будет создан полноценный веб-сайт сервисного центра ООО «Матрешка».
Структура веб-страниц представлена на рисунке 1.1.
Рисунок 1.1 — Структура итогового веб-сайта
Цель: ознакомиться с Visual Studio Code, а так же создать страницу с дизайном для всего сайта.
– Исследовать рабочую область.
– Научиться создавать новую страницу, используя содержимое HTML5, CSS.
– Научиться сохранять документ.
– Научиться изменять название страницы и текстовые заголовки.
– Научиться добавлять изображения на передний план и в качестве фоновых изображений.
Подготовка к созданию проекта, изучение редактора Visual Studio Code.
Для создания проекта «Юридическая контора «Советник»» нам понадобится рабочая папка под проект.
Создайте папку на локальном диске посредствам проводника или другого файлового менеджера.
Для реализации проекта в качестве редактора вы будете использовать современный инструмент — Visual Studio Code.
Visual Studio предлагает общедоступные инструменты и гибкость, необходимые для создания и развертывания современных веб-приложений.
– HTML5, CSS3, LESS/SASS, JavaScript
– ASP.NET, Node.js, Python, JavaScript
– NuGet, Grunt, Gulp, Bower, npm.
– Платформа и среда выполнения с открытым кодом.
– Развертывание в Windows, Azure, Mac или Linux.
– Бесплатно для небольших групп и разработчиков открытого кода.
– Запустите Visual Studio Code. В боковой панели навигации кликните по иконке страниц.(рисунок 1.2).
1.2 — Боковая панель
– В появившемся меню, кликните на кнопку Open editors и в открывшемся окне выберите созданную заранее папку (напимар Matreshka). Кликните кнопку Open Folder.
1.3 — Боковая панель. Выбор папки
– Для создания первой страницы сайта design.html наведите мышку на область названия папки(проекта) Matreshka и кликните значок . В появившейся форме введите design.html.
1.4 — Создан файл design.html
Наполнение папки Matreshka
Для создания проекта, нам понадобятся дополнительные файлы: CSS, JS, мультимедиа.
– Для этого скачайте в созданную вами папку, папки и файлы из папки work_files.
1.5 — Папка Matreshka
– Откройте редактор. Папки появились в навигационном меню проекта. Они будут задействованы позже.
1.6 — Название страницы
Создание дизайна сайта.
Для создания дизайна сайта нами будет подключен файл CSS, в котором указаны свойства для элементов HTML5. Изучить CSS вы можете самостоятельно.
– Заполните файл design.html согласно стандартной структуре HTML5 документа, как на рисунке 1.7:
– Между тегами title введите название страницы ООО «Матрешка» (рисунок 1.8).
1.8 — Название страницы
– Следующим шагом будут meta и link данные. Между тегами head добавьте следующие строки (рисунок 1.9):
1.9 — Добавлены meta и link данные
Данным кодом вы к файлу design.html подключили css файл со свойствами для элементов HTML5, а так же meta name=»viewport» для того ,что бы сообщить браузеру, что ваша страница предназначена для правильного поведения области просмотра как на персональных компьютерах ,так и на мобильных устройствах.
– Для отображения страницы как на примере, нужно прописать id для тэгов и разделительную полосу при помощи тега hr.
1.10 – Добавьте выделенные области кода на свою страницу
– Добавим логотип на страницу. Логотип у вас используется в формате SVG, если же у пользователя поддержка SVG не предусмотрена браузером выводиться будет альтернативное изображения в формате PNG.
Вся область логотипа и подпись снизу будет обернута DIV с именем center для того, что бы все объекты внутри располагались по центру. Клик по картинке будет переводить вас на главную страницу сайта (рисунок 1.11).
1.11 — Код добавления логотипа на страницу
– Следующим шагом будет создание навигации на сайте. Стиль навигации уже прописан в CSS файле. Вам осталось добавить ссылки между тегоми nav. В конце добавим div clearfix. Clearfix — метод отмены действия float без изменения структуры HTML-документа (рисунок 1.12).
1.12 — Код ссылок для вставки навигации
– Добавьте копирайт в подвал сайта между тегами footer (рисунок 1.13).
1.13 – Добавление подвала
Создана первая веб-страница на HTML5 (рисунок 1.16): добавлен текст и цвета, добавлены изображения и подключена CSS. Вы выполнили предварительный просмотр страницы в браузере (рисунок 1.14).
1.14 — Предварительный просмотр веб-страницы
По итогу работы оформить отчет. Отчет в формате DOC или PDF отправляется в электронную среду Moodle вместе с файлом проекта.
Содержание отчета
- Данный раздел состоит из последовательного описания значимых выполняемых шагов (с указанием их сути)
- копий экранов (должен быть виден код и предварительный просмотр страницы).
Источник: topuch.com