Как запустить код в visual studio code

Как использовать Visual Studio Code для разработки и отладки Node.js

Ознакомьтесь с инструкциями по разработке и отладке проекта на JavaScript в Node.js с помощью Visual Studio.

Подготовка среды

1. Установка Visual Studio Code.
2. Установите git. Интеграция Visual Studio Code с git предоставляет возможность управления Системой управления версиями на боковой панели.
3. Добавьте необходимые переменные среды. В примерах этой статьи используется строка подключения базы данных MongoDB. Если у вас нет доступной базы данных mongoDB, вы можете:
   • Запустить этот локальный проект в конфигурации с несколькими контейнерами. При такой конфигурации один из контейнеров должен являться базой данных mongoDB. Установите Docker и расширение Remote — Containers, чтобы получить конфигурацию с несколькими контейнерами, при которой на одном контейнере будет выполнятся локальная база данных mongoDB.
   • Выберите создание ресурса Azure Cosmos DB для базы данных MongoDB. Дополнительные сведения см. в этом учебнике.

Клонирование проекта

Чтобы приступить к работе, клонируйте пример проекта, выполнив следующие действия.

1. Откройте Visual Studio Code.
2. Нажмите клавишу F1, чтобы отобразить палитру команд.
3. В командной строке палитры введите gitcl , выберите команду Git: Клонировать и нажмите клавишу ВВОД.
4. Если появится запрос ввести URL-адрес репозитория, введите https://github.com/Azure-Samples/js-e2e-express-mongodb , затем нажмите клавишу ВВОД.
5. Выберите (или создайте) локальный каталог, в который нужно клонировать проект.

Установка зависимостей

В этом проекте Node.js сначала необходимо установить все зависимости проекта из npm.

1. Нажмите клавиши CTRL + SHIFT + ` , чтобы отобразить интегрированный терминал Visual Studio Code.
2. Используйте следующую команду для установки зависимостей:

npm install 

Переход к файлам и коду проекта

Чтобы ориентироваться в базе кода, поэкспериментируем с возможностями навигации в среде Visual Studio Code.

1. Нажмите клавиши CTRL + p.
2. Введите .js , чтобы отобразить файлы JavaScript/JSON рядом с родительской папкой каждого файла.
3. Выберите файл server.js, который является скриптом запуска приложения.
4. Наведите указатель мыши на метку времени в строке 11. Эта возможность быстро проверять переменные, модули и типы в файле полезна во время разработки проектов.
5. Щелкнув мышь на переменной , например метку времени , можно просмотреть все ссылки на эту переменную в одном файле. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите Найти все ссылки.

Использование функции автозаполнения в mongoDB

1. Открытие файла data.js
2. В строке 84 введите новое использование переменной db путем ввода db. . Visual Studio Code отображает доступные члены API, доступные в db .

Автозаполнение работает, потому что Visual Studio Code использует TypeScript в фоновом режиме (даже для JavaScript), чтобы передавать информацию о вводе, которая может передаваться в список завершения при вводе. Это автоматическое приобретение типов работает для более чем 2000 сторонних модулей, таких как React, Подчеркивание и Express.

Модули, которые поддерживает эта функция автозаполнения, можно увидеть в созданном сообществом проекте DefinitelyTyped, который является источником для всех определений типов TypeScript.

Выполнение локального приложения Node.js

Когда вы изучили код, пришло время запустить приложение. Чтобы запустить приложение из Visual Studio Code, нажмите клавишу F5 . При запуске кода с помощью F5 (режим отладки) Visual Studio Code запускает приложение и показывает окно консоли отладки, отображающее StdOut для приложения.

Кроме того, консоль отладки подключается к только что запущенному приложению, чтобы вы могли вводить выражения JavaScript, которые будут обрабатываться в приложении. В этой консоли также есть функция автоматического заполнения. Чтобы увидеть это поведение, введите в консоли process.env :

Откройте браузер и перейдите к http://localhost:8080 , чтобы просмотреть запущенное приложение. Введите текст в текстовое поле, чтобы добавить элемент, чтобы получить представление о том, как работает приложение.

Отладка локального приложения Node.js

Кроме того что в Visual Studio Code можно запустить приложение и взаимодействовать с ним через консоль, вы также можете задавать точки останова непосредственно в коде. Например, введите CTRL + P , чтобы отобразить средство выбора файлов. После отображения средства выбора файлов и выберите файл server.js .

Задайте точку останова в строке 53, которая является оператором if в маршруте для добавления нового элемента. Чтобы задать точку останова, щелкните область слева от номера строки в редакторе, как показано на следующем рисунке.

Помимо стандартных точек останова, средство Visual Studio Code поддерживает условные точки останова, которые позволяют указать время остановки приложения. Чтобы задать условную точку останова, щелкните правой кнопкой мыши область слева от строки, в которой нужно приостановить выполнение, выберите Add Conditional Breakpoint (Добавить условную точку останова) и укажите выражение JavaScript (например, foo = «bar» ) или число операций выполнения, определяющих условие, при котором приложение должно быть остановлено.

После установки точки останова вернитесь в работающее приложение в браузере и добавьте запись. Это действие немедленно приводит к приостановке выполнения приложения в строке 28, в которой задана точка останова:

Когда приложение будет приостановлено, можно навести указатель мыши на выражения кода, чтобы просмотреть их текущие значения, проверить локальные переменные или контрольные значения и стек вызовов, а также использовать панель инструментов отладки для пошагового выполнения кода. Нажмите клавишу F5, чтобы возобновить выполнение приложения.

Локальная полностековая отладка в Visual Studio Code

Интерфейсная и серверная часть записываются с помощью JavaScript. То есть, если вы выполняете отладку серверного кода (Node/Express), в определенный момент может потребоваться отладить код интерфейса (Angular).

Хотя вы смогли запустить и отладить код Node.js без какой-либо конфигурации Visual Studio Code, для отладки интерфейсного веб-приложения необходимо использовать файл launch.json , который указывает Visual Studio Code, как запустить приложение.

Этот пример приложения включает launch.json следующие параметры отладки:

< // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ < "name": "Test", "request": "launch", "runtimeArgs": [ "run-script", "test" ], "runtimeExecutable": "npm", "skipFiles": [ "/**" ], "type": "pwa-node" >, < "name": "Start", "request": "launch", "runtimeArgs": [ "run-script", "start" ], "runtimeExecutable": "npm", "skipFiles": [ "/**" ], "type": "pwa-node" > ] > 

Средство Visual Studio Code определило, что скриптом запуска приложения является server.js.

Открыв файл launch.json, выберите «Добавить конфигурацию» (в правом нижнем углу) и выберите Chrome: «Запустить с помощью userDataDir«.

Добавление новой конфигурации запуска для Chrome позволяет отладить внешний код JavaScript.

Наведите указатель мыши на любой заданный параметр, чтобы увидеть его функцию. Кроме того, обратите внимание, что Visual Studio Code автоматически определяет URL-адрес приложения. Задайте для свойства webRoot значение $/public , чтобы отладчик Chrome знал, где найти внешние ресурсы приложения:

< "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:8080", "webRoot": "$/public", "userDataDir": "$/.vscode/chrome" > 

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

Добавьте следующий фрагмент кода в качестве свойства верхнего уровня в файл launch.json (как одноуровневое свойство имеющегося свойства configurations).

"compounds": [ < "name": "Full-Stack", "configurations": ["Launch Program", "Launch Chrome"] >] 

Строковые значения, указанные в массиве compounds.configurations, ссылаются на имя отдельных записей в списке конфигураций. Если вы уже изменили эти имена, внесите соответствующие изменения в массив. Например, перейдите на вкладку «Отладка» и выберите для выбранной конфигурации значение Full-Stack (Полный стек) (имя составного конфигурации) и нажмите клавишу F5 для запуска.

Выполнение конфигурации запускает приложение Node.js (это можно увидеть в выходных данных консоли отладки) и Chrome (который настроен для перехода к приложению Node.js по адресу http://localhost:8080 ).

Нажмите клавиши CTRL+P и введите (или выберите) значение todos.js, которое является основным контроллером Angular внешней части приложения.

Установите точку останова на строке 11, которая является точкой входа для создаваемой записи из списка задач.

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

Как и во время отладки Node.js, можно навести указатель мыши на выражения, просмотреть локальные переменные и контрольные значения, обработать выражения в консоли и т. д.

Есть две прохладные вещи, которые следует заметить:

• В области Стек вызовов отображаются два разных стека: Node и Chrome. При этом указано, какой из стеков приостановлен.
• Вы можете переходить между внешним и внутренним кодом, нажав клавишу F5, чтобы запустить и активировать точку останова, заданную ранее в маршруте Express.

После этого вы можете эффективно отладить внешний и внутренний код JavaScript или код полного стека JavaScript непосредственно в Visual Studio Code.

Концепция комплексного отладчика не ограничивается только двумя целевыми процессами и кодом JavaScript. Поэтому, если вы работаете с приложением-микрослужбой (это может быть polyglot), можно использовать тот же рабочий процесс (после установки соответствующих расширений для языка или платформы).

Следующие шаги

Как запустить код в VS Code?

Взялся изучать JS , установил VS Code . Написал код, однако запустить его не могу. Нажимаю отладка, запуск без отладки, и выдается ошибка. Вопрос: как запустить код в VS Code ?

• javascript
• visual-studio-code

Отслеживать
3,818 2 2 золотых знака 15 15 серебряных знаков 35 35 бронзовых знаков
задан 10 июл 2019 в 14:28
PythonLearner4823 PythonLearner4823
101 1 1 золотой знак 2 2 серебряных знака 9 9 бронзовых знаков
Ошибка какая.
10 июл 2019 в 15:00

@Dmitry Что то вроде этого [Running] node «c:\Users\Admin\Desktop\java.js» «node» �� ���� ����७��� ��� ���譥� ��������, �ᯮ��塞�� �ணࠬ��� ��� ������ 䠩���.

10 июл 2019 в 15:02

если не париться, то рядом положить файлик html и в нем подключить скрипт. запускаете html в браузере и скрипт работает. Или вы кроме скрипта js еще что-то юзаете?

26 сен 2019 в 9:48
можно ещё поставить расширение marketplace.visualstudio.com/… но это так для не сложных вычислений
4 дек 2019 в 9:01

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

В вопросе не указана ОС. Если Windows, то:

1. Установить Node.js
2. Установить расширение Code Runner для VS Code
3. Перезапустить VS Code
4. В VS Code в правом верхнем углу нажать запуск (Run Code) или Ctrl + Alt + N

В большинстве случаев никакие конфигурационные файлы править не нужно.

Также обратите внимание, что привычное для руководств alert(«Hello World»); работать не будет, попробуйте console.log(«Hello World»);

Отслеживать
ответ дан 4 дек 2019 в 8:54
Pavel Kudryavtcev Pavel Kudryavtcev
51 1 1 серебряный знак 3 3 бронзовых знака

Установить Node.js.
Создать файл file.js
Открыть терминал Ctrl + ~
Запустить команду node file.js .

P.S. По-умолчанию команда ищет файл от корня папки (workspace), которая открыта в vscode.

Отслеживать
ответ дан 28 окт 2019 в 13:09
1,811 1 1 золотой знак 9 9 серебряных знаков 29 29 бронзовых знаков

Ну тут есть несколько способов.

1) Скачиваете расширение Debugger for Chrome — должен появиться файл launch.json. Или он вместе с vs устанавливается, уже не помню. но он будет 100%.

Указываете url как на картинке(путь к файлу, который вы собираетесь запустить). Создаёте базовый html и вставляете туда скрипт.

2) Способ похож на предыдущий, но немного лучше: надо скачать node js. Установка в несколько пунктов(загуглите). Запустить localhost. Тут уже никаких путей к файлу указывать не надо.

3) Установить расширение code runner, выделить код в файле и нажать ctrl + alt + n. У меня этот способ почему-то не работает.

Разработка кода в Visual Studio без использования проектов и решений

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

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

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

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

Открытие любого кода

Ниже представлены способы открытия кода в Visual Studio:

• В строке меню Visual Studio выберите Файл>Открыть>Папка и перейдите в расположение кода.
• В контекстном меню папки с кодом выберите команду Открыть в Visual Studio.
• Выберите ссылку Открыть папку в начальном окне.

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

Открытие нескольких папок

Начиная с Visual Studio 2022 версии 17.9 ( предварительная версия 1) можно указать несколько папок, которые будут открываться в Visual Studio. Открытие нескольких папок особенно полезно в репозиториях кода с большим количеством несвязанного кода, и разработчику требуется только подмножество для выполнения некоторых действий.

• В строке меню Visual Studio выберите команду «Открыть>рабочую область«>и перейдите к расположению .code-workspace файла.
• Ожидается, .code-workspace что сам файл будет файлом. Схема JSON, которая выглядит следующим образом:

< "folders" : [ < "path" : "some\\child\\foo", "name" : "The Foo" >, < "path" : "..\\..\\some\\unrelated\\bar" >, < "path" : "C:\\a\\full\\path\\baz" >, < "path" : "$\\foobar" > ] > 

Каждое «path» значение может быть любым относительным путем или корневым путем. Корневые пути должны находиться в той же букве диска. Переменные среды можно использовать с синтаксисом $ . Свойство «name» можно использовать для создания визуального псевдонима для папки в Обозреватель решений.

Открытие кода из клонированного репозитория GitHub

В примере ниже объясняется, как клонировать репозиторий GitHub, а затем открыть содержащийся в нем код в Visual Studio. Для этого необходимо иметь учетную запись GitHub и установленный в системе Git для Windows. Дополнительные сведения см. в статье «Создание учетной записи GitHub для использования с Visual Studio и Git для Windows «.

1. Перейдите в репозиторий, который нужно клонировать, на сайте GitHub.
2. Нажмите кнопку Clone or Download (Клонировать или скачать), а затем в раскрывающемся меню выберите Copy to Clipboard (Копировать в буфер обмена), чтобы копировать защищенный URL-адрес для репозитория GitHub.

Использование Git в Visual Studio

Начиная с Visual Studio 2019 версии 16.8, мы представили новый, оптимизированный интерфейс Git, который можно использовать для взаимодействия с файлами на GitHub. Дополнительные сведения см. в документации по управлению версиями Visual Studio.

Использование команды Обозреватель в Visual Studio

Вы по-прежнему можете использовать командную Обозреватель в Visual Studio 2022 и Visual Studio 2019 версии 16.8 и более поздних версий. Однако вы можете упростить использование нового интерфейса Git. Дополнительные сведения см. в статье о том, как Visual Studio упрощает управление версиями с помощью Git.

1. Чтобы открыть Team Explorer, в Visual Studio выберите вкладку Team Explorer. Если эта вкладка не отображается, откройте ее, выбрав Вид>Team Explorer.
2. В Team Explorer выберите команду Клонировать, которая располагается в разделе Локальные репозитории Git, а затем вставьте URL-адрес страницы GitHub в текстовое поле.
3. Нажмите кнопку Клонировать, чтобы клонировать файлы проекта в локальный репозиторий Git. Этот процесс может занять несколько минут в зависимости от размера репозитория.
4. После клонирования репозитория в систему выберите в Team Explorer команду Открыть в контекстном меню клонированного репозитория.
5. Чтобы просмотреть файлы в обозревателе решений, выберите команду Показать представление папки. Теперь вы можете просмотреть папки и файлы в клонированном репозитории, а также просмотреть код и выполнить поиск по нему в редакторе кода Visual Studio, где доступна цветовая маркировка синтаксиса и другие возможности.

Выполнение и отладка кода

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

Настройка Visual Studio для выполнения кода будет разной для разных типов кода и используемых средств сборки.

Базы кода на основе MSBuild

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

Для баз кода C# и Visual Basic необходимо установить рабочую нагрузку Разработка классических приложений .NET. Для баз кода C++ необходимо установить рабочую нагрузку Разработка классических приложений на C++.

Базы кода на основе пользовательских средств сборки

Если для вашей базы кода применяются пользовательские средства сборки, нужно указать в Visual Studio правила сборки кода с помощью задач сборки, которые определяются в файле JSON. Дополнительные сведения см. в статье Настройка задач сборки и отладки для режима разработки «Открытая папка».

Базы кода с кодом Python или JavaScript

Если база кода содержит код на Python или JavaScript, вам не нужно настраивать файлы JSON, но нужно установить соответствующие рабочие нагрузки. Также следует настроить скрипт запуска:

1. Установите рабочую нагрузку Разработка Node.js или Разработка на Python. Для этого последовательно выберите Средства>Получить средства и компоненты или закройте Visual Studio и запустите Visual Studio Installer.
2. В обозревателе решений щелкните правой кнопкой мыши файл JavaScript или Python и в контекстном меню выберите команду Назначить автозапускаемым элементом.
3. Нажмите кнопку Запустить, чтобы начать отладку.

Базы кода с кодом C++

Сведения о том, как открыть код C++ в Visual Studio без создания решений или проектов, вы найдете в статье Open Folder projects for C++ (Проекты «Открыть папку» для C++).

Базы кода, содержащие проект Visual Studio

Если папка с кодом содержит проект Visual Studio, вы можете назначить этот проект в качестве автозапускаемого элемента.

Текст кнопки запуска изменится на имя проекта, назначенного автозапускаемым элементом.

Связанный контент

• Настройка задач сборки и отладки для режима разработки «Открытая папка»
• Open Folder projects for C++ (Проекты «Открыть папку» для C++)
• CMake projects in C++ (Проекты CMake в C++)
• Написание кода в редакторе кода и текста

Как запустить код в visual studio code

Как запустить код JavaScript в Visual Studio Code

03 марта 2023
Оценки статьи
Еще никто не оценил статью

Иногда возникает необходимость запустить фрагмент кода JavaScript напрямую в Visual Studio Code (VSCode), чтобы проверить его работоспособность. В этой статье мы рассмотрим, как запустить код JavaScript в VS Code.

Установка Node.js на компьютер

Первым шагом для запуска JavaScript в VS Code является установка Node.js.

Node.js — это среда выполнения JavaScript, которая позволяет запускать JavaScript на стороне сервера.

Она включает в себя средства для выполнения JavaScript кода в командной строке, которые можно использовать для тестирования и отладки JavaScript кода.

Вы можете загрузить и установить Node.js с официального сайта по ссылке

Создайте файл JavaScript в VS Code

После установки Node.js вы можете создать файл JavaScript в VS Code.

Чтобы создать новый файл JavaScript, выберите File -> New File в меню VS Code. Затем сохраните файл с расширением .js (например, index.js).

Напишите JavaScript код

После создания файла JavaScript вы можете написать код, который хотите запустить. Например, давайте создадим новый массива на основе существующего массива с помощью map() :

let numbers = [1, 2, 3, 4, 5]; let squares = numbers.map(num => num ** 2); console.log(squares); 

Запустите код

Теперь мы готовы запустить наш JavaScript код. Чтобы запустить код, выберите Terminal -> New Terminal в меню VS Code, чтобы открыть новую вкладку терминала. В терминале введите следующую команду: node index.js

где index.js — это имя файла, который вы создали ранее.

После выполнения этой команды вы увидите вывод в консоли:

>>> [ 1, 4, 9, 16, 25 ] 

Это означает, что ваш JavaScript код успешно запущен в VS Code!

Вы можете также использовать VS Code для отладки JavaScript кода, используя встроенные средства отладки. Для этого вам нужно создать конфигурационный файл отладки (launch.json) и настроить его для запуска и отладки вашего JavaScript кода.

В заключение, запуск JavaScript кода в VS Code — это очень простой процесс, который можно выполнить всего за несколько шагов.

Установите Node.js, создайте файл JavaScript, напишите код и запустите его в терминале VS Code. Вы можете использовать этот процесс для разработки и отладки JavaScript приложений в VS Code.

Меню категорий

Загрузка категорий.