10 способов поднять продуктивность в VS Code (наглядно)

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

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Scroll to Top