Как запустить программу в visual studio code javascript

В этой статье речь пойдет об отладке кода JavaScript Visual Studio. Традиционно Visual Studio известна как мощная IDE для C#.NET и VB.NET, но без особой поддержки JavaScript. Однако в последних итерациях это изменилось, и теперь вы можете использовать Visual Studio для отладки JavaScript в той же среде, что и код C#. Это делает его чрезвычайно полезным интегрированным инструментом, который ускорит процесс поиска и исправления ошибок!

Шаги, которые мы собираемся выполнить, следующие:

1. Введение в пример проекта
2. Анализ отчета об ошибках Raygun
3. Изучите анатомию инструментов отладки Visual Studio
4. Добавьте точки останова в свой код
5. Шаг через свой код
6. Определите состояние вашего приложения
7. Исправьте ошибку!

Итак, давайте погрузимся!

Шаг 1: Введение в пример проекта

Чтобы продемонстрировать, как отлаживать приложение с помощью Visual Studio, я буду использовать простую форму добавления пользователя. Эта форма позволяет ввести имя, отчество и фамилию. При нажатии кнопки «Сохранить» форма немного обработается, и данные будут отправлены на ваш (воображаемый) сервер.

How to Run Javascript in Visual Studio Code on Windows 10 2022

Код для этой формы имеет три функции:

• Обработчик кликов
• Строковая функция с заглавной буквы
• Функция сохранения

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

Шаг 2. Проанализируйте отчет об ошибках Raygun

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

Информация, которая вам понадобится для отладки ошибки, находится в модуле Stacktrace.

Часть сообщения в Stacktrace представляет собой краткий обзор того, что не так. В этом случае метод toUpperCase вызывается для неопределенного значения.

Stacktrace сообщает вам, где произошла ошибка, и последовательность вызовов функций, которая привела к ней. Как вы можете видеть на скриншоте выше, ошибка произошла в функции capitalizeString в строке 20 файла index.js .

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

Первый шаг — открыть проект Visual Studio и запустить приложение, нажав кнопку. Теперь, когда приложение запущено, мы можем открыть все окна отладки, которые я буду использовать. Откройте меню «Отладка», а затем подменю Windows.

Щелкните по очереди элементы JavaScript Console, Call Stack, Watch 1, Locals, Output и Breakpoints, чтобы все они были открыты в нижней части окна Visual Studio.

Основы Javascript #3. Запуск проекта в VSCode

Активируйте окно консоли JavaScript, щелкнув его вкладку. Эта вкладка позволяет в любое время выполнить произвольный код JavaScript или просмотреть любые выходные данные вызовов console.log .

Попробуйте ввести alert(‘Hello!’); и нажать Enter — предупреждение должно появиться сразу.

Вкладка «Консоль JavaScript» — ценный инструмент отладки, поскольку вы можете использовать ее как блокнот для опробования кода и оценки переменных при диагностике проблемы.

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

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

Шаг 4: Добавьте точки останова в свой код

Теперь вы можете просматривать свой код, мы хотим иметь возможность просматривать его построчно, чтобы увидеть, где что-то идет не так. Для этого мы используем точки останова. Точки останова — это маркеры в определенных точках кода, которые останавливают выполнение, чтобы вы могли проверить состояние кода в этот момент времени и продолжить выполнение построчно.

Есть несколько различных способов добавления точек останова, которые я рассмотрю здесь:

Точки останова строки

Вероятно, самый распространенный способ добавить точку останова — найти конкретную строку, на которой вы хотите остановиться, и добавить ее туда. Перейдите к интересующему вас файлу и строке и щелкните серую область рядом с номером строки. К этой строке будет добавлен красный маркер, и выполнение будет останавливаться каждый раз, когда будет встречаться эта строка кода. На скриншоте ниже он остановится на строке 7 из index.js .

Программная точка останова

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

Для этого вы добавляете оператор debugger; в позицию, в которой хотите прервать выполнение. Приведенный ниже код будет иметь тот же эффект, что и вышеприведенная точка разрыва строки.

Точка останова при ошибке

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

Шаг 5. Пройдитесь по своему коду

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

В предыдущем разделе мы сделали вывод из отчета об ошибках Raygun, что ошибка возникла из-за метода capitalizeString . Этот метод вызывается три раза, так какой экземпляр является виновником? Вы можете присмотреться к трассировке стека и увидеть, что именно вызов из строки 13 вызвал ошибку. Вы знаете, что строка 13 относится к значению отчества. Таким образом, вы должны сосредоточить свои усилия на воспроизведении ошибки путем правильной обработки ввода.

Обладая этими дополнительными знаниями, вы можете заполнить поля «Имя» и «Фамилия», но оставить поле «Отчество» пустым, чтобы увидеть, не вызовет ли это ошибку.

Нажмите кнопку Сохранить. Отсюда откроется вкладка «Источник», где вы можете увидеть активированную точку останова. Теперь вы можете начать пошаговое выполнение кода. Для этого вы используете четыре кнопки на панели отладки.

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

Вы будете использовать их, чтобы пройти весь путь до вашей функции capitalizeString . Итак, начиная со строки 7, используйте кнопку «Перейти», пока не дойдете до строки 13. Активная строка показана желтым фоном и стрелкой, указывающей на нее.

Теперь вы можете использовать кнопку «Шаг в», чтобы перейти к вызову функции capitalizeString .

Когда вы перемещаетесь по такому коду, вы можете вернуться к родительской функции, чтобы проверить, что происходило в этот момент. Для этого используйте окно стека вызовов, которое вы открыли ранее, в котором перечислены все функции, которые были пройдены, чтобы добраться до этой точки в вашем коде — точно так же, как стек вызовов, показанный в отчете об ошибках Raygun.

Вы можете просто дважды щелкнуть элемент в этом списке, и вы вернетесь к этой функции. Имейте в виду, что текущая позиция в выполнении не меняется, поэтому использование кнопок Step Over продолжится с вершины стека вызовов.

Шаг 6: Определите состояние вашего приложения

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

Существует множество вариантов для выяснения того, какие значения содержат переменные, и оценки выражений до того, как код продолжит работу. Мы рассмотрим каждый по очереди:

Наведение мыши

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

Наблюдатели

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

Вы добавляете их, либо дважды щелкнув пустую строку панели Watch и введя выражение, либо выбрав выражение, щелкнув правой кнопкой мыши и выбрав «Добавить Watch».

Местные жители

Панель «Локальные» отображает список переменных, находящихся в настоящее время в пределах области видимости, и связанных с ними значений. Она похожа на панель Watch, но автоматически создается Visual Studio. Панель «Локальные» удобна для идентификации локальных переменных и избавляет вас от явного добавления их в список наблюдения.

Консоль JavaScript

Наконец, вкладка «Консоль JavaScript» — отличный инструмент для проверки значений выражений и экспериментов с кодом. Просто вернитесь на вкладку консоли JavaScript, введите код и нажмите Enter. Visual Studio выполнит код в контексте и области действия текущей точки останова.

Шаг 7. Исправьте ошибку

Переключитесь на вкладку «Консоль JavaScript» и начнем разбирать строку, вызвавшую ошибку, чтобы вы могли исправить ее с помощью вкладки «Консоль JavaScript».

Во-первых, проверьте вывод вызова value.split(‘’) , чтобы вы могли получить первый символ, а затем вызвать для него функцию toUpperCase .

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

Вы можете убедиться в этом, введя полное выражение в консоль JavaScript:

Итак, чтобы решить проблему, вам нужно проверить, что строка пуста или не определена. Если это так, вам нужно вернуть пустую строку обратно без какой-либо обработки.

На этом краткое введение в отладку JavaScript в Visual Studio завершено. Хотя Visual Studio в первую очередь известна как серверная IDE, она очень многофункциональна, когда дело доходит до отладки JavaScript.

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

Первоначально опубликовано на raygun.com.

Источник: digitrain.ru

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

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

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

1. Установите Visual Studio Code.
2. Установите git. Интеграция Visual Studio Code с git предоставляет возможность управления Системой управления версиями на боковой панели.
3. Добавьте необходимые переменные среды. В примерах в этой статье используется строка подключения к базе данных MongoDB. Если у вас нет доступной базы данных mongoDB, вы можете:
4. Запустить этот локальный проект в конфигурации с несколькими контейнерами. При такой конфигурации один из контейнеров должен являться базой данных mongoDB. Установите Docker и расширение Remote — Containers, чтобы получить конфигурацию с несколькими контейнерами, при которой на одном контейнере будет выполнятся локальная база данных mongoDB.
5. Выберите создание ресурса 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. Щелкнув мышью на переменной, например timestamp , вы увидите все ссылки на эту переменную в одном файле. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите Найти все ссылки.

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

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

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

Модули, которые поддерживает эта функция автозаполнения, можно увидеть в созданном сообществом проекте 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), можно использовать тот же рабочий процесс (после установки соответствующих расширений для языка или платформы).

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

Источник: learn.microsoft.com

Запустите JavaScript в коде Visual Studio

Я предполагаю, что nodejs понадобятся, но не могут решить, как это сделать?
EDIT: «Код Visual Studio» Я имею в виду новый редактор кода от Microsoft — не код, написанный с использованием Visual Studio
Код Visual Studio

спросил(а) 2015-08-03T04:55:00+03:00 7 лет, 11 месяцев назад
добавить комментарий
пожаловаться

Откройте интегрированный терминал на коде Visual Studio ( View > Integrated Terminal ) введите ‘node filename.js’ нажмите Ввод

ответил(а) 2018-09-07T17:33:00+03:00 4 года, 10 месяцев назад
добавить комментарий
пожаловаться

Установите расширение Расширения кода
Откройте файл кода JavaScript в текстовом редакторе, затем используйте ярлык Ctrl+Alt+N или нажмите F1 , а затем выберите/введите Run Code , код будет запущен, и вывод будет отображаться в окне вывода.

ответил(а) 2016-08-04T16:00:00+03:00 6 лет, 11 месяцев назад
добавить комментарий
пожаловаться

Это решение предназначено для запуска текущего открытого файла в node и отображения вывода в VSCode.
У меня был такой же вопрос, и я нашел новый tasks полезный для этого конкретного случая использования. Это немного хлопот, но вот что я сделал:
Создайте каталог .vscode в корневом каталоге проекта и создайте в нем файл tasks.json . Добавьте это определение задачи в файл:

«version»: «0.1.0»,
«command»: «node»,
«isShellCommand»: true,
«args»: [
«—harmony»
],

«tasks»: [
«taskName»: «runFile»,
«suppressTaskName»: true,
«showOutput»: «always»,
«problemMatcher»: «$jshint»,
«args»: [«$»]
>
]
>

Затем вы можете:
press F1 > type `run task` > enter > select `runFile` > enter
для выполнения вашей задачи, но мне было проще добавить настраиваемую привязку клавиш для открытия списков задач.
Чтобы добавить привязку клавиш в меню VSCode UI, перейдите «Код» > «Настройки» > «Клавиши быстрого доступа». Добавьте это в свои быстрые клавиши:

«key»: «cmd+r»,
«command»: «workbench.action.tasks.runTask»
>

Конечно, вы можете выбрать все, что хотите, в качестве комбинации клавиш.
UPDATE:
Предполагая, что вы используете код JavaScript для его проверки, вы можете отметить свою задачу как тестовую задачу, установив ее isTestCommand свойство true , а затем вы можете связать ключ с командой workbench.action.tasks.test для вызова с одним действием.
Другими словами, ваш файл tasks.json теперь будет содержать:

«version»: «0.1.0»,
«command»: «node»,
«isShellCommand»: true,
«args»: [
«—harmony»
],

«tasks»: [
«taskName»: «runFile»,
«isTestCommand»: true,
«suppressTaskName»: true,
«showOutput»: «always»,
«problemMatcher»: «$jshint»,
«args»: [«$»]
>
]
>

. и ваш файл keybindings.json теперь будет содержать:
«key»: «cmd+r»,
«command»: «workbench.action.tasks.test»
>
ответил(а) 2015-11-22T03:44:00+03:00 7 лет, 7 месяцев назад
добавить комментарий
пожаловаться

Я удивлен, что это еще не было упомянуто: Просто откройте нужный файл .js в VS Code, переключитесь на вкладку «Debug Console», нажмите кнопку отладки на левой навигационной панели и нажмите значок запуска (кнопка воспроизведения)! Требуется установить nodejs!

ответил(а) 2018-04-29T00:43:00+03:00 5 лет, 2 месяца назад
добавить комментарий
пожаловаться

Ярлык для интегрированного терминала (ctrl + `), затем введите node .
В качестве альтернативы вы можете создать задачу. Это единственный код в моих задачах. Json:

// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
«version»: «0.1.0»,
«command»: «node»,
«isShellCommand»: true,
«args»: [«$»],
«showOutput»: «always»
>

Отсюда создайте ярлык. Это мой keybindings.json:
// Place your key bindings in this file to overwrite the defaults
[
< «key»: «cmd+r»,
«command»: «workbench.action.tasks.runTask»
>,
< «key»: «cmd+e»,
«command»: «workbench.action.output.toggleOutput»
>
]

Это откроет «run» в Command Pallete, но вам все равно придется набирать или выбирать с помощью мыши задачу, которую вы хотите запустить, в данном случае node. Второй ярлык переключает панель вывода, там уже есть ярлык, но эти клавиши находятся рядом друг с другом и с ними легче работать.

ответил(а) 2016-08-24T06:44:00+03:00 6 лет, 10 месяцев назад
добавить комментарий
пожаловаться

Я столкнулся с этой проблемой, когда впервые начал использовать VS Code с расширением Code Runner Что нужно сделать, это установить путь к node.js в настройках пользователя Вам нужно установить путь, когда вы устанавливаете его на вашем компьютере с Windows. Для меня это было «C:\Program Files\nodejs\node.exe»

Поскольку у меня есть пробел в имени моего каталога файлов

Смотрите это изображение ниже. Сначала мне не удалось запустить код, потому что я допустил ошибку в имени пути Надеюсь, что это поможет вам. И, конечно, ваш вопрос помог мне, так как я также пришел сюда, чтобы получить помощь для запуска JS в моем VS CODE

ответил(а) 2018-01-23T08:55:00+03:00 5 лет, 5 месяцев назад
добавить комментарий
пожаловаться

«version»: «0.2.0»,
«configurations»: [
«name»: «Launch»,
«type»: «node»,
«request»: «launch»,
«program»: «$»,
«stopOnEntry»: true,
«args»: [],
«cwd»: «$»,
«runtimeExecutable»: null,
«runtimeArgs»: [
«—nolazy»
],
«env»: «NODE_ENV»: «development»
>,
«externalConsole»: false,
«sourceMaps»: false,
«outDir»: null
>
]
>

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

ответил(а) 2016-02-13T08:51:00+03:00 7 лет, 5 месяцев назад
добавить комментарий
пожаловаться

Я использовал Node Exec, без необходимости настройки, строит файл, который вы в данный момент завершаете или что когда-либо был выбран, и выводит его внутри VSCode.
https://marketplace.visualstudio.com/items?itemName=miramac.vscode-exec-node
С небольшим количеством конфигов вы можете добавить Babel, чтобы сделать некоторые на лету транспиляции тоже.

ответил(а) 2017-05-11T00:37:00+03:00 6 лет, 2 месяца назад
добавить комментарий
пожаловаться

Это очень просто, когда вы создаете новый файл в VS Code и запускаете его, если у вас уже нет файла конфигурации, он создает его для вас, единственное, что вам нужно настроить, это значение «program», и установите его на путь вашего основного файла JS, выглядит так:

«version»: «0.1.0»,
// List of configurations. Add new configurations or edit existing ones.
// ONLY «node» and «mono» are supported, change «type» to switch.
// ABSOLUTE paths are required for no folder workspaces.
«configurations»: [
// Name of configuration; appears in the launch configuration drop down menu.
«name»: «Launch»,
// Type of configuration. Possible values: «node», «mono».
«type»: «node»,
// ABSOLUTE path to the program.
«program»: «C:\test.js», //HERE YOU PLACE THE MAIN JS FILE
// Automatically stop program after launch.
«stopOnEntry»: false,
// Command line arguments passed to the program.
«args»: [],
// ABSOLUTE path to the working directory of the program being debugged. Default is the directory of the program.
«cwd»: «»,
// ABSOLUTE path to the runtime executable to be used. Default is the runtime executable on the PATH.
«runtimeExecutable»: null,
// Optional arguments passed to the runtime executable.
«runtimeArgs»: [],
// Environment variables passed to the program.
«env»: < >,
// Use JavaScript source maps (if they exist).
«sourceMaps»: false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
«outDir»: null
>,
«name»: «Attach»,
«type»: «node»,
// TCP/IP address. Default is «localhost».
«address»: «localhost»,
// Port to attach to.
«port»: 5858,
«sourceMaps»: false
>
]
>
ответил(а) 2015-08-03T05:59:00+03:00 7 лет, 11 месяцев назад
добавить комментарий
пожаловаться
Теперь это может быть самым простым, начиная с v1.32:
«key»: «ctrl+shift+t»,
«command»: «workbench.action.terminal.sendSequence»,
«args»: < «text»: «node ‘$’u000D» >
>

Используйте свою собственную привязку клавиш. См. Примечания к выпуску: sendSequence и переменные. С vscode v1.32 вы можете sendSequence в терминал, используя переменные, такие как $ , который является текущим файлом. Если вам нужен какой-то другой путь, замените $ на ваш путь в привязке ключей выше. u000D — это возврат, поэтому он запустится немедленно. Я добавил ‘ вокруг переменной $ на тот случай, если в пути к файлу есть пробелы, например c:UsersSome DirectoryfileToRun

ответил(а) 2019-03-12T06:05:00+03:00 4 года, 4 месяца назад
добавить комментарий
пожаловаться

Другой вариант — использовать консоль инструментов разработчика в коде Visual Studio. Просто выберите «Переключить инструменты разработчика» в меню справки, а затем откройте вкладку «Консоль» во всплывающих инструментах разработчика. Оттуда у вас есть те же инструменты разработчика REPL, которые вы получаете в Chrome.

ответил(а) 2019-05-10T19:30:00+03:00 4 года, 2 месяца назад
добавить комментарий
пожаловаться

Существует много способов запуска JavaScript в коде Visual Studio. Если вы используете Node, то я рекомендую использовать стандартный отладчик в VSC. Обычно я создаю фиктивный файл, например test.js, где я делаю внешние тесты. В вашей папке, где у вас есть код, вы создаете папку с именем «.vscode» и создаете файл с именем «launch.json» В этом файле вы вставляете следующее и сохраняете.

Теперь у вас есть два варианта для проверки вашего кода. Когда вы выбираете «Тестовый файл Nodemon», вы должны поместить свой код для тестирования в test.js. Чтобы установить nodemon и получить дополнительную информацию о том, как отлаживать с помощью nodemon в VSC, я рекомендую прочитать эту статью, в которой более подробно объясняется вторая часть файла launch.json и способы отладки в ExpressJS.

«version»: «0.2.0»,
«configurations»: [
«type»: «node»,
«request»: «launch»,
«name»: «Nodemon Test File»,
«runtimeExecutable»: «nodemon»,
«program»: «$/test.js»,
«restart»: true,
«console»: «integratedTerminal»,
«internalConsoleOptions»: «neverOpen»
>,
«type»: «node»,
«request»: «attach»,
«name»: «Node: Nodemon»,
«processId»: «$»,
«restart»: true,
«protocol»: «inspector»,
>,
]
>
ответил(а) 2019-04-03T19:06:00+03:00 4 года, 3 месяца назад
добавить комментарий
пожаловаться

Другой способ открыть терминальную ctrl+ выполнить node . Теперь у вас есть активный узел REPL. Теперь вы можете отправить свой файл или выбранный текст в терминал. Для этого откройте командную палитру VSCode (F1 или ctrl+ shift + p) и выполните >run selected text in active terminal или >run active file in active terminal . Если вам нужен чистый REPL перед выполнением кода, вам придется перезапустить узел REPL. Это делается, когда в Терминале с узлом REPL ctrl+c ctrl+c выйти из него и набрать node для запуска нового. Вероятно, вы можете связать команды команды pallete с любой клавишей, которую пожелаете. PS: node должен быть установлен и в вашем пути

Источник: progi.pro