Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
05 Фев 2024
7 мин
1532

Как новичку работать с Visual Studio Code

Как установить и настроить редактор кода VS Code.

Рассказываем, что такое Visual Studio Code, как его установить и настроить для себя, чтобы было удобно. Еще покажем интерфейс и поделимся списком горячих клавиш, которые упростят взаимодействие с программой.

Что такое Visual Studio Code

Visual Studio Code (VS Code) — это бесплатный редактор исходного кода, который разработала компания Microsoft. Преимущество такой программы в том, что с ней можно работать на любых операционных системах: Windows, macOS или Linux.

Visual Studio Code универсален для разработки программного обеспечения. Вот его возможности:

🟡 Подсветка синтаксиса для множества языков программирования.

🟡 Автоматическое завершение кода — если начать что-то писать, программа предложит варианты, как завершить строку.

🟡 Интегрированный отладчик — можно отслеживать и исправлять ошибки в коде.

🟡 Встроенная поддержка системы контроля версий Git.

🟡 Обширная библиотека расширений — для поддержки различных языков программирования, фреймворков и инструментов.

🟡 Возможность создавать пользовательские расширения.

🟡 Встроенный терминал — для выполнения команд и скриптов прямо из редактора.

🟡 Анализ ошибок и подсказки по исправлению.

🟡 Возможность создавать и запускать задачи для автоматизации рутинных операций.

🟡 Возможность менять темы оформления, шрифты, раскладки и другие параметры интерфейса.

Важный плюс этого редактора — он хорошо работает даже на компьютерах с невысокой мощностью. Например, с процессором 1,6 ГГц и оперативной памятью 1 Гб.

Стать разработчиком с нуля — это реализуемый план. Для этого не нужно иметь диплом о высшем техническом образовании или разбираться в программировании. Всему можно обучиться в онлайн-университете Skypro. На курсе «Java-разработчик» вы начнете с самых основ, а потом будете постепенно продвигаться к сложным понятиям и задачам.

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

Как установить Visual Studio Code

Для установки редактора на ПК нужно зайти на официальный сайт программы и скачать программу для установки. Здесь можно выбрать любую операционную систему.

Для Windows

Максимально просто: запустить файл .exe, выбрать папку и установить программу. По умолчанию программа установится в Programs\Microsoft\VS Code.

Обычно сложностей с установкой не возникает, но если компьютер слабый по мощности, запуск программы может прерываться. Чтобы это исправить, нужно открыть ее свойства правым кликом мыши и в графе «Объект» в конце названия дописать —disable-gpu.

Для macOS

Открыть архив VSCode-osx.zip, перетащить файл с расширением .app в папку Applications. Добавить Visual Studio Code в Dock — для этого нужно выбрать в Options «Keep in Dock».

Для Linux

Распаковать скачанный архив VSCode-linux-x64.zip в новую папку, затем запустить программу.

Веб-приложение

Веб-версия Visual Studio Code дает возможность работать с редактором кода прямо в браузере. Это удобно, когда нет доступа к установленному на локальной машине приложению. Чтобы получить доступ к веб-приложению, нужно открыть браузер и перейти на сайт.

Как выглядит интерфейс Visual Studio Code

Интерфейс Visual Studio Code легкий и интуитивный. У него простой, но функциональный дизайн. В верхней части окна располагается меню со стандартными опциями: работа с файлами, редактирование, выполнение команд.

Слева находится панель боковых инструментов: проводник, поиск, система управления версиями Git, запуск кода, расширения и тестирование. Результаты выполнения команд и вывод отладки отображаются в панели вывода. Справа от редактора кода показана мини-карта — это обзор структуры всего файла для быстрого перемещения по коду.

Основную часть окна занимает поле для редактирования кода. Здесь отображается текущий открытый файл. Синтаксис подсвечивается разными цветами. В нижней части располагается статус-бар — он дает информацию о текущем состоянии проекта, ветке Git, количестве ошибок и предупреждений. Еще он показывает, на каком языке написан код.

В онлайн-университете Skypro на курсе «Frontend-разработчик» вы сможете с нуля освоить язык JavaScript, а еще овладеете другими важными инструментами разработчика: GitHub, Node.js, REST, CI/CD, CSS и HTML. Полученных знаний будет достаточно, чтобы устроиться на работу по новой специальности.

Профессия frontend-разработчика не только интересная, но и востребованная на рынке — многие разработчики получают достойные зарплаты. Согласно GetMatch, медианная зарплата frontend-разработчика на JavaScript — 210 000 ₽. На хедхантере начинающий frontend-разработчик может запрашивать в среднем от 120 000 ₽, а специалист с опытом от трех лет — от 200 000 ₽.

Подготовка к работе с Visual Studio Code

После того как разобрались, как устроен интерфейс, пришло время настроить его для себя. Это сделает работу в разы удобнее.

Как переключить язык интерфейса на русский

Нужно открыть программу Visual Studio Code локально и нажать на значок расширений в поле поиска. Введите запрос Russian Language Pack for Visual Studio Code и нажмите «Установить». После этого программу нужно перезапустить.

Интерфейс редактора станет понятнее, но этот этап необязателен, особенно если вы знаете английский язык. Если в процессе работы появятся вопросы или возникнут проблемы, проще найти решение в интернете именно на английском.

Как работать с несколькими проектами параллельно

В Visual Studio Code можно работать одновременно с несколькими проектами, но между ними не очень удобно перемещаться. Упростить процесс поможет плагин Project Manager.

Чтобы установить этот плагин, нужно открыть панель расширений. Нажмите комбинацию Ctrl + Shift + X (Cmd + Shift + X на macOS) или выберите иконку расширений в боковой панели. Введите Project Manager в поле поиска, найдите соответствующее расширение и установите его. После установки плагина перезапустите Visual Studio Code.

Использовать плагин просто. Откройте панель Project Manager — для этого нажмите Ctrl + Shift + P (Cmd + Shift + P на macOS), выберите Project Manager и затем Open Project Manager. В этот момент сохраните проект — Save Project. Затем по аналогии нажмите Add Project и укажите путь к папке вашего проекта.

Можно создать группы проектов, чтобы организовать их по категориям. Например, группу для проектов на JavaScript и отдельную для Python.

Как настроить автоматическое сохранение проекта

Если не менять настройки, VS Code по умолчанию сохраняет изменения в файле только после нажатия Ctrl + S (Cmd +S на macOS). Чтобы код сохранялся автоматически, нужно зайти в меню настроек и в поле поиска ввести Auto Save.

Выберите значения, которые вам подходят:

  • afterDelay — файл будет автоматически сохраняться через определенный интервал времени, который можно задать;
  • onfocusChange — файл будет сохраняться после переключения на другой файл;
  • onWindowChange — файл будет сохраняться при переходе в окно другой программы.

Как настроить автоматическое форматирование кода

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

Чтобы решить такую проблему, в VS Code есть специальные плагины. С их помощью можно форматировать весь текстовый документ. Это расширения, например, PHP-CS-Fixer для PHP, Prettier для JavaScript/HTML/CSS и другие.

На примере JavaScript рассмотрим, как форматируется код. Для начала нужно установить плагин Prettier через магазин разрешений. Далее нужно открыть документ, который хотим отформатировать. Зажимаем Ctrl+Shift+P (Cmd+Shift+P на macOS) и вводим запрос Format Document.

Чтобы не повторять команду каждый раз, можно автоматизировать форматирование. Для этого открываем «Настройки» — Settings, в поиске ищем Formatting и в первой строке выбираем Auto.

Как поменять внешний вид интерфейса

Чтобы изменить шрифт и кегль, нужно перейти в раздел Font — «Шрифт». Меняйте параметр Font Family — так можно менять семейство шрифта, а Font Size — чтобы отрегулировать размер для комфортной работы, например сделать его крупнее.

Если хочется поменять цветовую тему, нужно нажать Ctrl + Shift + P (Cmd + Shift + P на macOS) и ввести в строку «theme». В выпавшем списке нужно выбрать пункт Preferences: Color Theme — «Параметры: Цветовая тема».

В онлайн-университете Skypro на курсе «Python-разработчик»» вы за 10 месяцев освоите новый для себя язык с нуля, даже если раньше никогда не программировали. Методика преподавания в Skypro построена таким образом, чтобы студенты с любым уровнем могли обучиться дисциплинам. Уроки ведут преподаватели с реальным практическим опытом — и они готовы поделиться им с вами.

Горячие клавиши Visual Studio Code

Горячие клавиши — это сочетания, с помощью которых можно пользоваться необходимыми функциями без меню. В VS Code таких клавиш много, и их можно настроить для себя. Вот самые популярные комбинации, которые упростят работу.

Горячие клавиши VS Code

Главное о VS Code

🟡 Visual Studio Code — это бесплатный редактор исходного кода для работы на любых операционных системах: Windows, macOS или Linux.

🟡 У VS Code много удобных функций, которые упрощают написание кода на любом языке программирования. Например, есть полезная подсветка синтаксиса, автоматическое завершение кода, интегрированный отладчик и поддержка Git. Кроме того, есть встроенный терминал для выполнения команд и скриптов прямо из редактора. Программа дает подсказки по исправлению кода и позволяет автоматизировать рутинные операции.

🟡 VS Code хорошо работает даже на слабых компьютерах. Минимальные параметры: процессор от 1,6 ГГц и оперативная память от 1 Гб.

Добавить комментарий