Обзор интегрированной среды разработки Visual Studio для JavaScript

2025-06-12

В этой 5-10 минуте введение в интегрированную среду разработки Visual Studio (IDE) мы рассмотрим некоторые окна, меню и другие функции пользовательского интерфейса.

Если вы еще не установили Visual Studio, перейдите на страницу скачивания Visual Studio , чтобы бесплатно установить ее.

Окно запуска

Первое, что вы увидите после запуска Visual Studio, — это окно запуска. Окно запуска предназначено для того, чтобы помочь вам быстрее приступить к написанию кода. Он имеет параметры для закрытия или получения кода, открытия существующего проекта или решения, создания нового проекта или простого открытия папки, содержащей некоторые файлы кода. Если окно запуска не открыто, выберите окно запуска файла>, чтобы открыть его.

Снимок экрана: окно запуска в Visual Studio 2022.

Снимок экрана: окно запуска в Visual Studio 2019.

Если вы впервые используете Visual Studio, список последних проектов будет пустым.

Если вы работаете с базами кода, отличными от MSBuild, используйте параметр "Открыть локальную папку ", чтобы открыть код в Visual Studio. Дополнительные сведения см. в разделе Разработка кода в Visual Studio без проектов или решений. В противном случае можно создать проект или клонировать проект из исходного поставщика, например GitHub или Azure DevOps.

Параметр "Продолжить без кода " просто открывает среду разработки Visual Studio без загрузки определенного проекта или кода. Вы можете выбрать этот параметр, чтобы присоединиться к сеансу Live Share или присоединиться к процессу отладки. Вы также можете нажать клавишу ESC , чтобы закрыть окно запуска и открыть интегрированную среду разработки.

Создание проекта

Чтобы продолжить изучение функций Visual Studio, давайте создадим новый проект.

На стартовом окне выберите Создать проект, а затем в поле поиска введите javascript или typescript, чтобы отфильтровать список типов проектов до тех, которые содержат "javascript" или "typescript" в названии или языке.

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

Выберите шаблон проекта приложения JavaScript Express и нажмите кнопку "Далее".

Выберите шаблон проекта "Пустое Node.js веб-приложение" и нажмите Далее.

В появившемся диалоговом окне "Настройка нового проекта " примите имя проекта по умолчанию и нажмите кнопку "Создать".

Проект создан. В правой области выберите app.js , чтобы открыть файл в окне редактора . В редакторе отображаются содержимое файлов и вы можете выполнять большую часть работы по программированию в Visual Studio.

Проект создается, а файл с именемserver.js открывается в окне редактора . В редакторе отображаются содержимое файлов и вы можете выполнять большую часть работы по программированию в Visual Studio.

Обозреватель решений

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

Снимок экрана: обозреватель решений в Visual Studio.

Панель меню в верхней части Visual Studio группирует команды по категориям. Например, меню "Проект" содержит команды, связанные с проектом, в котором вы работаете. В меню "Сервис" можно настроить поведение Visual Studio, выбрав "Параметры" или добавив компоненты в установку, выбрав "Получить средства и компоненты".

Давайте откройте окно списка ошибок , выбрав меню "Вид " и " Список ошибок".

Список ошибок

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

Снимок экрана: список ошибок в Visual Studio.

Окно вывода

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

Давайте создадим проект, чтобы посмотреть результаты сборки. В меню "Сборка" выберите " Создать решение". Окно вывода автоматически получает фокус и отображает сообщение об успешной сборке.

Снимок экрана: окно вывода в Visual Studio.

Поле поиска — это быстрый и простой способ сделать практически все в Visual Studio. Вы можете ввести текст, связанный с тем, что нужно сделать, и отобразится список параметров, относящихся к тексту. Например, представьте, что вы хотите увеличить детализацию выходных данных сборки, чтобы отобразить дополнительные сведения о том, что именно выполняет сборка. Вот как это можно сделать:

Если поле поиска не отображается, нажмите клавиши CTRL+Q , чтобы открыть его.
Введите детализацию в поле поиска. В отображаемых результатах выберите "Проекты и решения"> — "Сборка и запуск".

Диалоговое окно «Параметры» откроется на странице «Сборка и запуск».
В разделе выходные данные сборки проекта MSBuild выберите "Обычный" и нажмите кнопку "ОК".
Создайте проект еще раз, щелкнув проект правой кнопкой мыши в обозревателе решений и выбрав "Перестроить " в контекстном меню.

На этот раз в окне вывода отображается более подробное логгирование из процесса сборки.

Если при использовании Visual Studio возникают какие-либо проблемы или есть предложения по улучшению продукта, вы можете использовать меню "Отправить отзыв " в верхней части окна Visual Studio.

Снимок экрана: меню