Visual Studio Code – один из самых популярных и удобных редакторов кода. Мы собрали десятку трюков, которые помогут работать в VS Code гораздо эффективнее.
Некоторые из них можно использовать не только в VS Code. Если у вас другой редактор или IDE, напишите в комментариях, какой из перечисленных трюков сработал у вас.
1. Zen Mode

Если вы, как и мы, мучаетесь с огромным количеством вкладок, панелей и терминалов – в VS Code есть режим Zen Mode. Он убирает все лишнее с экрана и позволяет сконцентрироваться на самом важном – на коде.
Как использовать:
Шорткат (Mac): command + option + shift + k
Шорткат (Windows): ctrl + k z
Меню: View -> Appearance -> Zen Mode
2. Tab Ninja

При копировании стороннего кода в VS Code бывают проблемы с отступами – по умолчанию VS Code сам принимает решение по отступам (и не всегда они правильные). Менять отступы построчно – долго.
Удерживая shift и tab, вы сможете быстро установить правильные отступы.
Как использовать:
shift + tab, shift + ] / [
3. Многострочное редактирование

Бывает, что нужно внести одинаковые изменения в несколько мест сразу. Например, меняется имя класса и приходится обновлять его во многих местах.
С помощью этой команды, можно выбрать участок и VS Code автоматически установит курсоры на каждом вхождении выбранного участка в файле. Таким образом, вы сможете внести изменения сразу во всем файле.
Как использовать:
Шорткат (windows): ctrl + f2
Шорткат (Mac): command + fn + f2
4. Многострочное редактирование: режим Бога

Продолжение предыдущего трюка: если вы хотите устанавливать дополнительные курсоры сами (а не автоматически, как в способе №3), VS Code позволяет это сделать с помощью option + click
Как использовать:
Шорткат (Windows): alt + click
Шорткат (Mac): option + click
5. Эффективная работа с терминалом

Процесс разработки часто включает в себя работу с live-сервером и регулярные коммиты в git-репозитории.
Работать в одном терминале неэффективно – чтобы сделать коммит, придется сделать останавливать сервер, делать коммит, потом снова запускать сервер. VS Code позволяет запустить несколько терминалов одновременно и разделить их (тем самым, не блокировать свою работу).
Это отличный сетап для фронтенд-проекта – вы можете устанавливать пакеты и запускать билды слева, а работать с репозиторием в правой.
Как использовать:
Шорткат (Windows): ctrl + \
Шорткат (Mac): command + \
6. Emmet

Emmet – очень полезный тулкит, доступный в VS Code из коробки (кстати, доступен он в большинстве других IDE). Он производит огромное впечатление – с помощью шорткодов можно быстро написать большой кусок HTML, CSS или JSX.
Примеры шорткодов:
HTML Boilerplate: ! + spacebar
Nested Elements: div + > + p + spacebar
Multiple Elements: li + * + 3 + spacebar
Div With Class: .class-name + spacebar
Any Element With Class: h1 + .class-name + spacebar
Lorem Ipsum in Element: p + > + lorem + spacebar
Sibling Element: h2 + + + p + spacebar
Это только базовый набор HTML шорткодов. Огромное количество других команд для разных языков можно посмотреть в документации Emmet.
7. Поиск по папкам

Распространенный кейс при JS-разработке: куча console.log для дебага, которые нужно удалить перед коммитом. VS Code позволяет разобраться с проблемой очень быстро, с помощью мощного поиска по всем файлам в выбранной папке.
В результате вы получите список файлов в выбранной папке, в которых было найдено вхождение поискового запроса.
Как использовать: Explorer > выбрать папку > option + shift + f
8. Быстрое дублирование строк

Copy-paste занимает большую часть времени современного разработчика. VS Code позволяет экономить время на копировании и дублировать строки кода – вам не придется снимать руки с клавиатуры и использовать мышь.
Как использовать: shift + option + arrow up / down
9. Быстрое перемещение строк

Не только дублирование, но и перемещение строк в рамках одного файла можно сделать с помощью клавиатуры.
Как использовать:
Шорткат (windows): ctrl + arrow up / down
Шорткат (mac): option + arrow up / down
10. Перемещение по иерархии компонентов

VS Code позволяет перемещаться по иерархии компонентов React – просто кликните на названии компонента с зажатым ctrl / command и VS Code откроет файл, где компонент объявлен.
Как использовать:
Шорткат (windows): ctrl + click
Шорткат (mac): command + click