Как настроить Visual Studio Code для записи скринкаста

Весной 2020 Стефани Эклз стала преподавателем проекта Egghead, где она публикует видеоуроки по фронтенд-разработке. На сайте dev.to она опубликовала краткий туториал, посвященный настройке записи скринкаста по написанию кода.

На Egghead есть курс по записи скринкастов, с которым вам также стоит ознакомиться, если вы новичок в этом деле.

Настройки VSCode

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

Настройки рабочего пространства 

В процессе настройки для записи скринкаста необходимо убедиться, что участники видят ваши действия на экране.

Если у вас еще нет файла настроек рабочего пространства, его можно добавить в корне проекта, создав директорию .vscode и файл settings.json.

Рекомендуемые базовые настройки для скринкастов:

{
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "window.zoomLevel": 4,
  "editor.formatOnSave": false,
  "editor.lineNumbers":"off",
  "editor.quickSuggestionsDelay": 1500,
  "breadcrumbs.enabled": false,
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,
}

Первые три позволяют контролировать размер шрифта. Можно задать верхнее значение для fontSize и lineHeight и, если хотите, отключить zoomLevel. Автор устанавливает значение всех трех, потому что zoomLevel влияет на текст панели вроде Folders, и время от времени необходимо показать, как они настроены. 

На скриншоте показано, как задать размер с помощью этих настроек: 

Настройки

Небольшая ремарка: автор использует тему Apollo Midnight. Конечно, у всех свои предпочтения, но для скринкаста больше подойдет высококонтрастная тема.

Если традиционно вы используете форматировщик кода Prettier, лучше его отключить: "editor.formatOnSave": false 

Причины две:

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

Затем удаляем номера строк, чтобы уменьшить беспорядок. Если нужно выделить строку или фрагмент кода, можно навести на них курсор или временно подсветить.

Во время обычного кодинга Intellisense может упростить вам жизнь, но во время урока он сильно отвлекает. Существует несколько способов спрятать всплывающие подсказки.

Команда editor.quickSuggestionsDelay": 1500  при обычной скорости набора кода блокирует Intellisense и другие всплывающие подсказки. Иногда автор обращается к Emmet. И даже если зависнуть на 1.5 секунды, он выдаст подсказку.

Полностью отключить все всплывающие подсказки можно так:

 "editor.quickSuggestions": false

Последние три настройки помогут навести порядок в рабочем пространстве. Если названия вам не знакомы, activityBar — это боковое меню иконок, а statusBar — панель сообщений, которая по умолчанию отображается внизу VSCode.

Если вы обычно не включаете обтекание текстом, будет полезно добавить "editor.wordWrap": "on" для своих уроков, чтобы строка не оказалась шире окна редактора.

Дополнительная очистка рабочего пространства

Единственное, что нельзя контролировать посредством settings.json — это то, что отображается в боковой панели. Но у вас появится такая возможность, если кликнуть по значку меню возле заголовка Explorer.

Меню возле заголовка Explorer

И хоть боковую панель в своих настройках также нельзя спрятать, будет полезно привязать ее к горячей клавише, чтобы быстро перетаскивать по ходу урока. Или можно спрятать ее с помощью меню под View > Appearance > Show Side Bar (кликните, чтобы перетащить).

Рекомендуемое расширение: Explorer Exclude

Всегда есть лишние или конфиденциальные файлы, которые не хочется показывать во время сессий.

Примеры:

• node_modules
• .gitignore
• .env
• .vscode
Онлайн-курс "Проджект-менеджер в ІТ" від Laba.
Навчіться запускати, контролювати й успішно реалізовувати ІТ-проєкти. Пройти весь шлях проєктного управління на реальному кейсі вам допоможе PMD із 19-річним досвідом в ІТ.
Детальніше про курс

Чтобы их удалить, установите расширение Explorer Exclude, которое создаст дополнительную панель «Скрытые элементы», куда можно добавлять мешающие работе файлы, типы файлов и директории. 

Настройки навязчивых расширений

Существуют другие расширения, загромождающие рабочее пространство. Например, GitLens и stylelint.

Чтобы их убрать, выберите нужное расширение и затем в выпадающем списке возле Disable выберите Workspace.

Настройки экрана: подготовка к записи

После настройки редактора переходим к подготовке экрана к записи скринкаста. Во-первых, задайте разрешение экрана 16×9. Egghead рекомендует расширение 1280×720 или 1920×1080.

Если вы работаете на Mac, прийдется найти необходимую утилиту. Автор использует SwitchResX (однократная покупка).

Далее откройте редактор в полноэкранном режиме. Если вам также нужен браузер, выделите для него необходимый минимум пространства.

Что касается терминала, Стефани Эклз выводит его на передний план, только если нужно что-то объяснить. Она просто перетаскивает его вверх до половины экрана, чтобы переключить фокус с кода.

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