Visual Studio Code уже давно стал стандартом для веб-разработчиков. Он бесплатный, лёгкий, кроссплатформенный и при этом невероятно гибкий. Но у новичков часто получается одна и та же картина: редактор установлен, тема выбрана, шрифты настроены, а дальше — бесконечные клики мышкой и ручное копирование кода.
На деле VS Code раскрывается только тогда, когда вы начинаете использовать горячие клавиши и расширения. Именно они превращают рутинную работу в быстрый и удобный процесс. Давайте разберёмся, какие сочетания и плагины помогут сэкономить часы уже на старте.
10 горячих клавиш, без которых невозможно работать
- Ctrl + F (поиск по файлу)
Ищите все элементы с классом или фрагмент текста. Очень полезно при вёрстке. - Ctrl + /
Закомментировать строку или выделенный блок. Повторное нажатие — раскомментировать. - Ctrl + G
Перейти к нужной строке в файле. Особенно актуально, когда ошибка указана с номером строки. - Alt + ↑ / ↓
Переместить строку вверх или вниз. Работает и с целыми блоками. - Shift + Alt + ↑ / ↓
Быстро дублировать строку. Незаменимо при работе с повторяющимися элементами. - Shift + Alt + F
Автоматическое форматирование файла. Ровные отступы и чистый код одним нажатием. - Alt + Click (мультикурсор)
Позволяет редактировать сразу в нескольких местах одновременно. - Ctrl + D
Выбрать следующее совпадение выделенного текста. Удобно для массовой правки. - Emmet-сокращения (например, ul>li*3>a.link)
Вместо того чтобы вручную писать список, набираете сокращение и VS Code сам разворачивает структуру. - Ctrl + ` (терминал внутри редактора)
Не нужно переключаться в отдельное окно: запускаете сервер, пишете git-команды прямо в редакторе.
Совет: выучите хотя бы половину из них и почувствуете разницу уже на первой неделе.
Расширения для VS Code:
- Prettier – Code formatter
Это must-have расширение, без которого трудно представить современную разработку. Prettier автоматически приводит код к единому стилю: расставляет правильные отступы, пробелы, точки с запятой, переносы строк. - ESLint
Если Prettier заботится о красоте кода, то ESLint отвечает за его качество. Он анализирует JavaScript и TypeScript прямо во время написания и подсказывает ошибки: от банальных опечаток до потенциальных багов. - Live Server
Расширение, которое превращает работу в удовольствие. Вы запускаете локальный сервер одним кликом, и ваш проект открывается в браузере. Каждый раз при сохранении файла страница автоматически обновляется. - GitLens
Если вы используете Git (а без него в веб-разработке уже никак), GitLens делает работу на порядок удобнее: одсвечивает прямо в коде, кто и когда написал конкретную строку; показывает историю изменений файла или целого проекта; помогает быстрее разбираться в чужом коде и контролировать командную работу. - Auto Rename Tag
Классика для верстальщиков. Расширение автоматически меняет парные теги: если вы редактируете <div> в <section>, закрывающий тег тут же изменится сам.
VS Code может быть просто редактором текста, а может стать вашим главным рабочим инструментом, который реально экономит часы и нервы. Освойте хотя бы несколько горячих клавиш, поставьте Prettier и Live Server — и уже через неделю заметите, что кодите быстрее и увереннее.
Со временем добавите свои расширения и оптимизируете рабочий процесс под себя, а пока начните с малого.