Как установить node js в vscode
Перейти к содержимому

Как установить node js в vscode

  • автор:

Как настроить VS Code для разработки на JavaScript

Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.

  • отладчик кода
  • встроенный терминал
  • удобные инструменты для работы с Git
  • подсветка синтаксиса для множества популярных языков и файловых форматов
  • удобная навигация
  • встроенный предпросмотр Markdown
  • умное автодополнение
  • встроенный пакетный менеджер

Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.

install package in vs code

Для установки нового пакета зайдите в выпадающее меню «View» на вкладку «Extensions» и введите название пакета в строке поиска, а затем нажмите кнопку «Install».

Babel и ES6

VS Code содержит понятие «сборки проекта». Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:

 "version": "2.0.0", "type": "shell", "tasks": [  "label": "watch", "command": "$/node_modules/.bin/babel src --out-dir dist -w --source-maps", "group": "build", "isBackground": true > ] > 

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B (macOS) запустит сборку.

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

eslint vscode

Нужно сначала установить eslint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

  1. Установите Node.js, используя пакетный менеджер вашей операционной системы.
  2. Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .
  3. Установите плагины, которые конфигурируют eslint . Без них (по умолчанию) eslint ничего не проверяет.

npm install -g eslint-config-airbnb-base eslint-plugin-import 
extends: - 'airbnb-base' env: node: true browser: true 

Автоматическое дополнение

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.

IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json .

jsconfig.json

Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json , то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:

 "compilerOptions":  "target": "ES6" >, "exclude": [ "node_modules", "**/node_modules/*" ] > 

Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

Отладка

VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.

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

  • Debugger for Chrome
  • Debugger for Firefox
  • Debugger for Edge

Подробнее об отладке можно узнать на сайте VS Code.

Ссылки

Курс по настройке окружения для работы в современной экосистеме JavaScript.

Отладка кода Node.js в Visual Studio Code

Редактор Visual Studio Code предлагает огромное количество встроенных функций. Кроме того, он предоставляет поддержку приложений по отладке кода. В этом руководстве мы расскажем, как настроить VS Code для отладки кода Node.js. Для этого мы загрузим расширение Debugger для Chrome, затем создадим и запустим конфигурацию отладки, а также установим точки останова.

Требования

  • Локальная установка Node.js (чтобы найти инструкции по установке, выберите соответствующую систему: mac OS, Debian, CentOS, Ubuntu).
  • Последняя версия Visual Studio Code.
  • Расширение Debugger, установленное в Visual Studio Code.

В данном мануале мы выполним отладку кода приложения по имени Quick Chat. Конечно, описанные здесь инструкции вы можете протестировать на любом своем проекте JavaScript, который можно запустить на сервере Node.

Если у вас нет такого проекта, создайте простой тестовый проект.

1: Создание тестового приложения (опционально)

Разумеется, чтобы выполнить примеры из этого мануала, вам нужно подготовить проект. Как сказано выше, здесь мы используем в этих целях приложение Quick Chat.

С помощью Git клонируйте репозиторий приложения Design-and-Build-a-Chat-Application-with-Socket.io. Помимо этого, вы можете скачать zip-файл и распаковать его.

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

Перейдите в каталог проекта, а затем в каталог part-8:

cd Design-and-Build-a-Chat-Application-with-Socket.io
cd part-8

Далее установите пакеты npm для данного проекта:

Наконец, запустите сервер:

Если вы откроете адрес 127.0.0.1:3000 в Chrome, браузер запросит имя пользователя. Введите имя и нажмите кнопку Chat!, после чего вы будете перенаправлены в приложение и увидите следующее:

User joined the chat.

Если ввести в поле внизу окна какой-то текст и нажать кнопку Send, ваше сообщение отобразится в чате.

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

2: Создание точки останова

Далее мы создадим в приложении точку останова – такие точки позволяют приостановить выполнение кода и проверить его.

Quick Chat – это приложение Node/Express, которое использует Socket.io, чтобы пользователи могли общаться друг с другом в режиме реального времени. Давайте добавим точку останова при подключении клиента к серверу.

Чтобы создать такую точку в VS Code, кликните на пустое пространство слева от номеров строк.

Создайте точку останова внутри функции, которая вызывается при каждом подключении пользователя, это 15 по счету строка. При этом слева от номера строки появится красный кружок.

// .
io.on(‘connection’, socket => console.log(‘a user connected’);
// .
>);

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

3: Панель отладки VS Code

Обратите внимание на боковую панель редактора (по умолчанию она находится слева). Чтобы открыть панель отладки, найдите в этой панели кнопку с перечеркнутым жуком и нажмите ее. Здесь вы увидите четыре разных раздела: variables, watch, call stack и breakpoints.

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

VS Code хранит конфигурации отладки в файле launch.json внутри папки .vscode. VS Code помогает создать не только эту папку и файл, но в том числе и предопределенные конфигурации. Давайте попробуем создать нашу первую конфигурацию.

Итак, чтобы создать исходный файл launch.json, кликните на выпадающий список No Configurations и выберите Add Configuration. На экране появится всплывающее окно, которое можно проигнорировать. Приступим же к созданию нашей первой конфигурации.

Ключевыми компонентами конфигурации отладки являются:

  • name – имя вашей конфигурации, отображаемое в выпадающем списке.
  • request – тип действия, которое вы хотите выполнить.
  • type – тип отладчика конфигурации. Это может быть Node, Chrome, PHP и т.д.

Кроме того, VS Code поможет определить другие свойства через IntelliSense.

4: Отладка с помощью программы запуска

Первая конфигурация запустит приложение Node в режиме отладки. Запуск в этом режиме позволяет VS Code подключаться к приложению через определенный порт. Кроме того, нам нужно определить файл программы, которая будет запускаться. В итоге конфигурация выглядит так:

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

В дальнейшем используйте флаг –inspect, чтобы запустить приложение Node в режиме отладки.

5: Отладка по идентификатору процесса

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

Для этого перед запуском конфигурации отладки нам нужно самостоятельно запустить сервер Node. Используйте следующую команду для запуска вашего сервера (вместе с флагом –inspect, как говорилось ранее). Замените app.js именем вашего файла.

node —inspect app.js

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

После этого соединение будет установлено успешно.

6: Отладка через подключение к порту

Третий пример конфигурации – подключение к существующему приложению Node, работающему по заданному порту.

«type»: «node»,
«request»: «attach»,
«name»: «Attach to Port»,
«port»: 9229
>,

9229 – стандартный порт для отладки при использовании флага –inspect, поэтому мы и будем использовать его здесь.

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

Если вы указываете port, localRoot и remoteRoot, вы можете также выполнить отладку, подключившись через сетевое соединение к удаленному компьютеру.

7: Отладка через подключение к порту и Nodemon

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

«type»: «node»,
«request»: «attach»,
«name»: «Nodemon Debug»,
«port»: 9229,
«restart»: true
>,

Примечание: Современные версии VS Code поддерживают параметр runtimeExecutable, который можно использовать для другой конфигурации Node.js+Nodemon.

Чтобы установить Nodemon, используйте следующую команду:

npm install -g nodemon

Пакет Nodemon автоматически перезапускает сервер, поэтому мы установили значение true для свойства restart в конфигурации отладки. Таким образом, при перезапуске сервера отладчик подключится повторно. Чтобы проверить, как это работает, запустите свой сервер с помощью этой команды (заменив node на nodemon):

nodemon —inspect app.js

Затем запустите вашу конфигурацию.

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

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

Заключение

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

Как использовать 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: Клонировать и нажмите клавишу ВВОД. gitcl command in the Visual Studio Code command palette prompt
  4. Если появится запрос ввести URL-адрес репозитория, введите https://github.com/Azure-Samples/js-e2e-express-mongodb , затем нажмите клавишу ВВОД.
  5. Выберите (или создайте) локальный каталог, в который нужно клонировать проект. Partial screenshot of Visual Studio Code showing the file explorer for a Node J S and Mongo D B project.

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

В этом проекте 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. Эта возможность быстро проверять переменные, модули и типы в файле полезна во время разработки проектов. Discover type in Visual Studio Code with hover help
  5. Щелкнув мышь на переменной , например метку времени , можно просмотреть все ссылки на эту переменную в одном файле. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите Найти все ссылки. Screenshot of Visual Studio Code with the `timestamp` variable highlighted.

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

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

Full screenshot of Visual Studio Code showing the code completion pop-up window highlighted with a red box.

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

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

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

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

Monitoring an app

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

Typing code into the Debug console

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

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

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

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

Setting a breakpoint within Visual Studio Code

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

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

Visual Studio Code pausing execution on a breakpoint

Когда приложение будет приостановлено, можно навести указатель мыши на выражения кода, чтобы просмотреть их текущие значения, проверить локальные переменные или контрольные значения и стек вызовов, а также использовать панель инструментов отладки для пошагового выполнения кода. Нажмите клавишу 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«.

Adding a Chrome configuration to Visual Studio Code

Добавление новой конфигурации запуска для 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 для запуска.

Running a configuration in Visual Studio Code

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

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

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

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

Debugging front-end code in Visual Studio Code

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

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

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

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

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

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

Node.js tutorial in Visual Studio Code

Node.js is a platform for building fast and scalable server applications using JavaScript. Node.js is the runtime and npm is the Package Manager for Node.js modules.

Visual Studio Code has support for the JavaScript and TypeScript languages out-of-the-box as well as Node.js debugging. However, to run a Node.js application, you will need to install the Node.js runtime on your machine.

To get started in this walkthrough, install Node.js for your platform. The Node Package Manager is included in the Node.js distribution. You’ll need to open a new terminal (command prompt) for the node and npm command-line tools to be on your PATH.

To test that you have Node.js installed correctly on your computer, open a new terminal and type node —version and you should see the current Node.js version installed.

Linux: There are specific Node.js packages available for the various flavors of Linux. See Installing Node.js via package manager to find the Node.js package and installation instructions tailored to your version of Linux.

Windows Subsystem for Linux: If you are on Windows, WSL is a great way to do Node.js development. You can run Linux distributions on Windows and install Node.js into the Linux environment. When coupled with the WSL extension, you get full VS Code editing and debugging support while running in the context of WSL. To learn more, go to Developing in WSL or try the Working in WSL tutorial.

Hello World

Let’s get started by creating the simplest Node.js application, «Hello World».

Create an empty folder called «hello», navigate into and open VS Code:

mkdir hello cd hello code . 

Tip: You can open files or folders directly from the command line. The period ‘.’ refers to the current folder, therefore VS Code will start and open the Hello folder.

From the File Explorer toolbar, press the New File button:

File Explorer New File

and name the file app.js :

File Explorer app.js

By using the .js file extension, VS Code interprets this file as JavaScript and will evaluate the contents with the JavaScript language service. Refer to the VS Code JavaScript language topic to learn more about JavaScript support.

Create a simple string variable in app.js and send the contents of the string to the console:

var msg = 'Hello World'; console.log(msg); 

Note that when you typed console. IntelliSense on the console object was automatically presented to you.

console IntelliSense

Also notice that VS Code knows that msg is a string based on the initialization to ‘Hello World’ . If you type msg. you’ll see IntelliSense showing all of the string functions available on msg .

string IntelliSense

After experimenting with IntelliSense, revert any extra changes from the source code example above and save the file ( ⌘S (Windows, Linux Ctrl+S ) ).

Running Hello World

It’s simple to run app.js with Node.js. From a terminal, just type:

node app.js 

You should see «Hello World» output to the terminal and then Node.js returns.

Integrated Terminal

VS Code has an integrated terminal which you can use to run shell commands. You can run Node.js directly from there and avoid switching out of VS Code while running command-line tools.

View > Terminal ( ⌃` (Windows, Linux Ctrl+` ) with the backtick character) will open the integrated terminal and you can run node app.js there:

integrated terminal

For this walkthrough, you can use either an external terminal or the VS Code integrated terminal for running the command-line tools.

Debugging Hello World

As mentioned in the introduction, VS Code ships with a debugger for Node.js applications. Let’s try debugging our simple Hello World application.

To set a breakpoint in app.js , put the editor cursor on the first line and press F9 or click in the editor left gutter next to the line numbers. A red circle will appear in the gutter.

app.js breakpoint set

To start debugging, select the Run and Debug view in the Activity Bar:

Run icon

You can now click Debug toolbar green arrow or press F5 to launch and debug «Hello World». Your breakpoint will be hit and you can view and step through the simple application. Notice that VS Code displays a different colored Status Bar to indicate it is in Debug mode and the DEBUG CONSOLE is displayed.

hello world debugging

Now that you’ve seen VS Code in action with «Hello World», the next section shows using VS Code with a full-stack Node.js web app.

Note: We’re done with the «Hello World» example so navigate out of that folder before you create an Express app. You can delete the «Hello» folder if you want as it is not required for the rest of the walkthrough.

An Express application

Express is a very popular application framework for building and running Node.js applications. You can scaffold (create) a new Express application using the Express Generator tool. The Express Generator is shipped as an npm module and installed by using the npm command-line tool npm .

Tip: To test that you’ve got npm correctly installed on your computer, type npm —help from a terminal and you should see the usage documentation.

Install the Express Generator by running the following from a terminal:

npm install -g express-generator 

The -g switch installs the Express Generator globally on your machine so you can run it from anywhere.

We can now scaffold a new Express application called myExpressApp by running:

express myExpressApp --view pug 

This creates a new folder called myExpressApp with the contents of your application. The —view pug parameters tell the generator to use the pug template engine.

To install all of the application’s dependencies (again shipped as npm modules), go to the new folder and execute npm install :

cd myExpressApp npm install 

At this point, we should test that our application runs. The generated Express application has a package.json file which includes a start script to run node ./bin/www . This will start the Node.js application running.

From a terminal in the Express application folder, run:

npm start 

The Node.js web server will start and you can browse to http://localhost:3000 to see the running application.

Your first Node Express App

Great code editing

Close the browser and from a terminal in the myExpressApp folder, stop the Node.js server by pressing CTRL+C .

Now launch VS Code:

code . 

Note: If you’ve been using the VS Code integrated terminal to install the Express generator and scaffold the app, you can open the myExpressApp folder from your running VS Code instance with the File > Open Folder command.

The Node.js and Express documentation does a great job explaining how to build rich applications using the platform and framework. Visual Studio Code will make you more productive in developing these types of applications by providing great code editing and navigation experiences.

Open the file app.js and hover over the Node.js global object __dirname . Notice how VS Code understands that __dirname is a string. Even more interesting, you can get full IntelliSense against the Node.js framework. For example, you can require http and get full IntelliSense against the http class as you type in Visual Studio Code.

http IntelliSense

VS Code uses TypeScript type declaration (typings) files (for example node.d.ts ) to provide metadata to VS Code about the JavaScript based frameworks you are consuming in your application. Type declaration files are written in TypeScript so they can express the data types of parameters and functions, allowing VS Code to provide a rich IntelliSense experience. Thanks to a feature called Automatic Type Acquisition , you do not have to worry about downloading these type declaration files, VS Code will install them automatically for you.

You can also write code that references modules in other files. For example, in app.js we require the ./routes/index module, which exports an Express.Router class. If you bring up IntelliSense on index , you can see the shape of the Router class.

Express.Router IntelliSense

Debug your Express app

You will need to create a debugger configuration file launch.json for your Express application. Click on Run and Debug in the Activity Bar ( ⇧⌘D (Windows, Linux Ctrl+Shift+D ) ) and then select the create a launch.json file link to create a default launch.json file. Select the Node.js environment by ensuring that the type property in configurations is set to «node» . When the file is first created, VS Code will look in package.json for a start script and will use that value as the program (which in this case is «$\\bin\\www ) for the Launch Program configuration.

 "version": "0.2.0", "configurations": [   "type": "node", "request": "launch", "name": "Launch Program", "program": "$ \\bin\\www"  >  ] > 

Save the new file and make sure Launch Program is selected in the configuration dropdown at the top of the Run and Debug view. Open app.js and set a breakpoint near the top of the file where the Express app object is created by clicking in the gutter to the left of the line number. Press F5 to start debugging the application. VS Code will start the server in a new terminal and hit the breakpoint we set. From there you can inspect variables, create watches, and step through your code.

Debug session

Deploy your application

If you’d like to learn how to deploy your web application, check out the Deploying Applications to Azure tutorials where we show how to run your website in Azure.

Next steps

There is much more to explore with Visual Studio Code, please try the following topics:

  • Node.js profile template — Create a new profile with a curated set of extensions, settings, and snippets.
  • Settings — Learn how to customize VS Code for how you like to work.
  • Debugging — This is where VS Code really shines.
  • Video: Getting started with Node.js debugging — Learn how to attach to a running Node.js process.
  • Node.js debugging — Learn more about VS Code’s built-in Node.js debugging.
  • Debugging recipes — Examples for scenarios like client-side and container debugging.
  • Tasks — Running tasks with Gulp, Grunt and Jake. Showing Errors and Warnings.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *