visual studio code javascript как запустить код
Как настроить VS Code для разработки на JavaScript
Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.
Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.
Для установки нового пакета зайдите во вкладку “Extensions” которая находится в выпадающем меню “View”, и введите название пакета в строке поиска, нажмите кнопку “Install”.
Babel и ES6
VS Code содержит понятие “сборки проекта”. Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.
Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B (macOS) запустит сборку.
Стандарты кодирования
Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.
Нужно сначала установить eslint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.
Автоматическое дополнение
VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.
jsconfig.json
Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.
Отладка
VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.
Для отладки бэкенд-кода достаточно встроенных возможностей. Для отладки фронтенд-кода нужно установить плагин для соответствующего браузера:
Подробнее об отладке можно узнать на сайте VS Code.
Ссылки
Курс по настройке окружения для работы в современной экосистеме JavaScript.
Запустите Javascript в » Visual Studio Code»
есть ли способ выполнить javascript и отобразить результаты с помощью кода Visual Studio?
например, файл скрипта, содержащий
Я предполагаю, что nodejs будет нужен, Но не могу понять, как это сделать?
9 ответов
это решение намеревается запустить текущий открытый файл в узле и показать вывод в VSCode.
у меня был тот же вопрос и нашел недавно введенный tasks полезно для этого конкретного случая использования. Это немного хлопот, но вот что я сделал:
затем вы можете: press F1 > type `run task` > enter > select `runFile` > enter чтобы выполнить вашу задачу, но я оказалось проще добавить привязку пользовательского ключа для открытия списков задач.
конечно, вы можете выбрать все, что вы хотите в качестве комбинации клавиш.
обновление:
предполагая, что вы используете JavaScript-кода тест это, вы можете отметить свою задачу как тест задача, установив его isTestCommand свойства to true и затем вы можете привязать ключ к workbench.action.tasks.test команда для вызова одного действия.
другими словами, ваш tasks.json файл теперь будет содержать:
. и ваш keybindings.json файл теперь будет содержать:
существует гораздо более простой способ запуска JavaScript, конфигурация не требуется:
кроме того, вы можете выбрать часть кода JavaScript и запустить фрагмент кода. Очень удобно!
В качестве альтернативы вы можете создать задачу. Это единственный код в моих задачах.в JSON:
отсюда создайте ярлык. Это мои связки.в JSON:
откроется «выполнить» в командной панели, но вам все равно придется ввести или выбрать мышью задачу, которую вы хотите запустить, в данном случае узел. Второй ярлык переключает панель вывода, там уже есть ярлык для него, но эти клавиши находятся рядом друг с другом и легче работать.
я столкнулся с этой точной проблемой, когда я впервые начал использовать VS Code С расширением Code Runner
что вам нужно сделать, это установить узел.js путь в Настройки Пользователя
вам нужно установить путь как вы устанавливаете его на своей машине Windows.
для моего это было \»C:\Program Files\nodejs\node.exe\»
поскольку у меня есть пробел в моем каталоге файлов Имя
посмотреть этот изображения ниже. Мне не удалось запустить код сначала потому что я ошибся в Путь 
надеюсь, это поможет вам.
и, конечно, ваш вопрос помог мне, так как я тоже пришел сюда, чтобы получить помощь, чтобы бежать JS в своем VS CODE
ну, чтобы просто запустить код и показать вывод на консоли, вы можете создать задачу и выполнить ее, в значительной степени, как упоминает @canerbalci.
недостатком этого является то, что вы получите только выход, и это все.
что мне действительно нравится делать, так это иметь возможность отлаживать код, скажем, Im пытается решить небольшой алгоритм или попробовать новую функцию ES6, и я запускаю ее, и есть что-то подозрительное с ней, я могу отладить ее внутри VSC.
что это делает, так это то, что он запустит любой файл, в котором вы сейчас находитесь, в отладчике VSC. Его набор для остановки при запуске.
чтобы запустить его, нажмите клавишу F5 в файле, который вы хотите отладить.
это очень просто, когда вы создаете новый файл в VS Code и запускаете его, если у вас уже нет файла конфигурации, он создает его для вас, единственное, что вам нужно настроить, это значение «программа» и установить его на путь вашего основного файла JS, выглядит так:
Я использовал Node Exec, никакой конфигурации не требуется, создает файл, который вы в настоящее время заканчиваете или что когда-либо было выбрано, и выводит внутри VSCode.
с немного конфигурации вы можете добавить Babel, чтобы сделать некоторые на лету транспилирования тоже.
нет загрузки, редактирования файлов или чего-либо дополнительного!
отказ от ответственности: это с узлом.Яш установлены. Не уверен, что это необходимое условие.
Это самый быстрый способ для вас, на мой взгляд;
Примечание: настройки узла. (если у вас есть домашнее пиво, просто введите «brew install node» на терминале)
примечание 2.: homebrew и узел настоятельно рекомендуется, если у вас еще нет.
Как использовать Visual Studio Code для разработки и отладки Node.js
Ознакомьтесь с инструкциями по разработке и отладке проекта на JavaScript в Node.js с помощью Visual Studio.
Подготовка среды
Установите git. Интеграция Visual Studio Code с git предоставляет возможность управления Системой управления версиями на боковой панели.
Получите строку подключения к базе данных mongoDB.
Если у вас нет доступной базы данных mongoDB, вы можете:
Клонирование примера проекта на локальный компьютер
Чтобы приступить к работе, скачайте пример проекта, как описано ниже.
Откройте Visual Studio Code.
Нажмите клавишу F1, чтобы отобразить палитру команд.
Выберите (или создайте) локальный каталог, в который нужно клонировать проект.
Использование встроенного терминала bash для установки зависимостей
В этом проекте Node.js сначала необходимо установить все зависимости проекта из npm.
Введите yarn и нажмите клавишу ВВОД.
Переход к файлам и коду проекта
Чтобы ориентироваться в базе кода, поэкспериментируем с возможностями навигации в среде Visual Studio Code.
Нажмите клавиши CTRL+P.
Выберите файл server.js, который является скриптом запуска приложения.
Наведите указатель мыши на переменную database (импортирована в строку 6), чтобы просмотреть ее тип. Эта возможность быстро проверять переменные, модули и типы в файле удобна при разработке проектов.
Нажмите кнопку мыши в пределах диапазона переменной, например database, чтобы просмотреть все ссылки на эту переменную в том же файле. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите Найти все ссылки.
Вы также можете просмотреть определение переменной, даже если оно находится в другом файле. Например, щелкните правой кнопкой мыши database.localUrl (строка 12) и в контекстном меню выберите Показать определение.
Использование функции автозаполнения в mongoDB
Откройте файл server.js.
Кроме встроенных API-интерфейсов Node.js, функция автоматического получения значений также поддерживает более 2000 модулей сторонних производителей, таких как React, Underscore и Express. Например, чтобы не позволить Mongoose аварийно завершать работу приложения, если оно не может подключиться к настроенному экземпляру базы данных MongoDB, вставьте следующую строку кода в строку 13:
Как и при использовании предыдущего кода, вы получите автозаполнение автоматически.
Модули, которые поддерживает эта функция автозаполнения, можно увидеть в созданном сообществом проекте DefinitelyTyped, который является источником для всех определений типов TypeScript.
Выполнение локального приложения Node.js
Теперь, когда вы познакомились с кодом, пришло время запустить приложение. Чтобы запустить приложение из Visual Studio Code, нажмите клавишу F5. При запуске кода с помощью F5 (режим отладки) Visual Studio Code запускает приложение и показывает окно консоли отладки, отображающее StdOut для приложения.
Кроме того, консоль отладки подключается к только что запущенному приложению, чтобы вы могли вводить выражения JavaScript, которые будут обрабатываться в приложении. В этой консоли также есть функция автоматического заполнения. Чтобы увидеть это поведение, введите в консоли process.env :
Вы смогли запустить приложение нажатием клавиши F5, так как открытый сейчас файл является файлом JavaScript (server.js). Поэтому Visual Studio Code предполагает, что проект является приложением Node.js. Закройте все файлы JavaScript в Visual Studio Code и нажмите клавишу F5. В Visual Studio Code появится запрос на выбор среды:
Отладка локального приложения Node.js
Кроме того что в Visual Studio Code можно запустить приложение и взаимодействовать с ним через консоль, вы также можете задавать точки останова непосредственно в коде. Например, нажмите клавиши CTRL+P, чтобы отобразить средство выбора файлов. Когда откроется средство выбора файлов, введите route и выберите файл route.js.
Установите точку останова на строке 28, представляющей маршрут Express (вызывается, когда приложение пытается добавить запись из списка задач). Чтобы задать точку останова, щелкните область слева от номера строки в редакторе, как показано на следующем рисунке.
Помимо стандартных точек останова, средство Visual Studio Code поддерживает условные точки останова, которые позволяют указать время остановки приложения. Чтобы задать условную точку останова, щелкните правой кнопкой мыши область слева от строки, в которой нужно приостановить выполнение, выберите Add Conditional Breakpoint (Добавить условную точку останова) и укажите выражение JavaScript (например, foo = «bar» ) или число операций выполнения, определяющих условие, при котором приложение должно быть остановлено.
Установив точку останова, вернитесь к выполняемому приложению и добавьте запись из списка задач. Добавление такой записи немедленно останавливает выполнение приложения на строке 28, где вы задали точку останова:
Когда приложение будет приостановлено, можно навести указатель мыши на выражения кода, чтобы просмотреть их текущие значения, проверить локальные переменные или контрольные значения и стек вызовов, а также использовать панель инструментов отладки для пошагового выполнения кода. Нажмите клавишу F5, чтобы возобновить выполнение приложения.
Локальная полностековая отладка в Visual Studio Code
Как упоминалось выше, приложение со списком задач — это приложение MEAN, то есть приложение, интерфейс и серверная часть которого написаны с помощью JavaScript. То есть, если вы выполняете отладку серверного кода (Node/Express), в определенный момент может потребоваться отладить код интерфейса (Angular). Для этого в Visual Studio Code есть множество расширений, в том числе встроенная отладка Chrome.
Откройте вкладку Расширения и введите chrome в поле поиска:
Выберите расширение с именем Отладчик для Chrome и выберите Установить. Установив расширение отладки Chrome, щелкните Перезагрузить, чтобы закрыть и снова открыть Visual Studio Code для активации расширения.
Хотя вы смогли выполнить и отладить код Node.js без специальной настройки Visual Studio Code, чтобы отладить внешнее веб-приложение, необходимо создать файл launch.json, который сообщает Visual Studio Code, как запускать приложение.
Создание полностекового файла launch.json для Visual Studio Code
Чтобы создать файл launch.json, откройте вкладку Отладка, выберите значок шестеренки (на нем должна быть небольшая красная точка вверху) и среду node.js.
Созданный файл launch.json выглядит, как на снимке экрана ниже. Этот файл сообщает Visual Studio Code, как запустить приложение или как подключиться к нему, чтобы выполнить его отладку.
Средство Visual Studio Code определило, что скриптом запуска приложения является server.js.
Откройте файл launch.json, нажмите кнопку Добавить конфигурацию (внизу справа) и щелкните Chrome: запустить с использованием userDataDir.
Добавление новой конфигурации запуска для Chrome позволяет отладить внешний код JavaScript.
Чтобы запустить и выполнить отладку внешнего и внутреннего кода одновременно, необходимо создать комплексную конфигурацию запуска, которая сообщает средству Visual Studio Code, какой набор конфигураций нужно выполнять параллельно.
Добавьте следующий фрагмент кода в качестве свойства верхнего уровня в файл launch.json (как одноуровневое свойство имеющегося свойства configurations).
Строковые значения, указанные в массиве 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), можно использовать тот же рабочий процесс (после установки соответствующих расширений для языка или платформы).
Отладка JavaScript в Google Chrome и Visual Studio Code
Способность отладки кода является важным навыком разработчика. Важно понимать и использовать широкий спектр инструментов отладки, которые существуют для конкретного языка программирования.
К сожалению, отладка может показаться не столь очевидной при работе с JavaScript за пределами полноценной среды IDE. По крайней мере — на первый взгляд.
В данной статье будет рассмотрен вопрос, как можно выполнять отладку JavaScript-кода в инструменте Google Chrome Dev Tools и в редакторе кода Visual Studio Code.
Примечание переводчика: перейдя по этой ссылке, можно ознакомиться с видеоверсией данной статьи Debugging JavaScript in Google Chrome and Visual Studio Code на английском языке.
Предустановки
В этой статье процесс отладки будет рассмотрен на примере тестового приложения под названием «Quick Chat»:
У вас есть два способа работы с этим приложением. Вы можете самостоятельно создать его, воспользовавшись этой серией видеоуроков. Или же вы можете использовать исходный код уже готового приложения «Quick Chat»:
Какой бы вариант вы не выбрали, вам потребуется локально запустить приложение «Quick Chat».
Вы можете запустить приложение из-под Node.js ( как это делаю я). Или воспользоваться плагином под Visual Studio Code под названием Live Server.
Если вы новичок в работе с этим плагином, то можете научиться работать с ним при помощи этого видео — Live Server Extension in Visual Studio Code.
Примечание переводчика: видео на английском языке.
В процессе создания данной статьи я добавил в приложении «Quick Chat» небольшую намеренную ошибку, которая не позволяет зарегистрировать пользователя после его входа в систему.
Основы отладки
Начнем с основ. Идея отладки заключается в том, что внутри программного кода можно устанавливать так называемые точки останова ( breakpoints) для того, чтобы остановить выполнение программы в определенном месте.
Это дает вам, как разработчику, возможность взглянуть на текущее состояние приложения и проверить, например, значения переменных в нём. Вы даже можете сделать еще больше и отследить любые переменные по своему выбору, чтобы всякий раз, когда приложение останавливается, вы могли проверить значения этих переменных.
После установки точки останова ( breakpoint) в коде, как правило, есть несколько вариантов дальнейших действий:
У вас также будет доступ к просмотру стека вызовов ( call stack). Другими словами, поскольку в программе функции могут вызывать на исполнение другие функции, то можно просмотреть историю вызовов этих функций.
Отладка в Google Chrome
Обратите внимание, что приложение в окне браузера закрашено серым цветом, чтобы показать, что оно приостановлено. Также обратите внимание, что вкладка Sources в Chrome Dev Tools открылась автоматически:
Вкладка Sources
Первое, что вы могли заметить на этой вкладке — это копию исходного кода приложения. Это код, который браузер загрузил и с которым он работает.
Вы также можете заметить, что строка кода с оператором debugger подсвечена синим цветом, чтобы сообщить нам, что выполнение приложения остановлено на данном участке кода:
Браузер Google Chrome предоставляет нам возможность просматривать исходный код приложения. Имея перед собой исходный код, можно установить в нем точки останова.
Точка останова — преднамеренная остановка или приостановка выполнения программы
Чтобы добавить точку останова, нужно выполнить клик мыши на gutter — поле слева от нумерации строк кода. Как только вы выполните это действие, то заметите, что браузер Google Chrome автоматически добавил эту точку останова в список «Breakpoints»:
Вкладка Scope
На вкладке «Scope» вы можете отслеживать переменные в своем приложении. Обратите внимание, что на этой вкладке есть три раздела: локальная область видимости ( Local), глобальная область видимости ( Global) и раздел сценариев ( Script).
В разделе сценариев вы можете отслеживать переменные в области видимости текущего скрипта:
Вкладка Watch
Как уже упоминалось ранее, помимо просмотра переменных на вкладке «Scope», вы также можете определить переменные, значения которых вы хотели бы отслеживать на всем этапе выполнения программы.
Добавляя переменную на вкладке «Watch», каждый раз, когда вы устанавливаете точку останова, вы можете быстро проверить значение этой переменной (которая может иметь значение undefined в зависимости от того, где вы находитесь в коде).
Нажмите значок плюса и введите имя переменной, которую необходимо отслеживать, в нашем случае это usernameInput :
Пошаговое выполнение, стек вызовов и список точек останова
Раздел вкладки «Sources», расположенный в левом нижнем углу окна отладчика, позволяет просмотреть список точек останова, стек вызовов ( call stack) и т. д.
В стеке вызовов есть только одна функция, которая является обработчиком события для кнопки входа. Функция указана, потому что это единственная функция, которая была вызвана на данный момент. Поскольку одни функции могут вызывать на исполнение другие функции, то эта цепочка будет обновляться соответствующим образом.
Также обратите внимание на кнопки со стрелками в верхней части экрана. Они соответствуют функциям, указанным выше, для продолжения выполнения вашего кода или прохождения по нему по строкам ( stepping). Я бы рекомендовал протестировать немного эти кнопки, чтобы привыкнуть к тому, каким образом можно осуществлять выполнение кода.
Наконец, существуют различные типы точек останова, которые могут быть заданы. Давайте рассмотрим пример создания условной точки останова ( conditional breakpoint), которая будет срабатывать только при выполнении определенного условия.
Например, предположим, что мы хотим предотвратить обработку события на кнопке входа в систему только тогда, когда пользователь пытается войти в систему без ввода имени пользователя.
Мы можем сделать это, щелкнув правой кнопкой мыши на поле gutter и создав точку останова со следующим условием — usernameInput.text === » :
Обратите внимание, что существует ещё больше доступных вариантов точек останова, которые не рассматриваются в данной статье.
Отладка в Visual Studio Code
Инструмент Chrome Developer Tools является одним из лучших в своем роде. Как вы уже видели, он предлагает отличные возможности и функционал для отладки приложения.
Однако командой разработчиков Visual Studio Code была проделана большая работа для того, чтобы сделать процесс отладки в этом редакторе ещё более совершенным.
Мне очень нравится Visual Studio Code и я провожу в нем больше времени, чем в каком-либо другом редакторе кода. Этот процесс включает в себя и отладку.
Чтобы начать отладку кода в VS Code, вам нужно будет установить плагин Debugger for Chrome :
Открыв эту панель, вы увидите инструменты, очень похожие на те, что мы видели в браузере Google Chrome — переменные, стек вызовов, точки останова:
Большинство функциональных возможностей, с которыми мы имели дело в Chrome Dev Tools, также доступны в VS Code.
Затем из этого списка выберите пункт «Chrome»: