- Добавляем поддержку Node.js в Visual Studio 2017
- Develop JavaScript and TypeScript code in Visual Studio without solutions or projects
- Prerequisites
- npm integration
- Build and debug
- package.json
- JavaScript files
- TypeScript files and tsconfig.json
- Unit Tests
- Develop JavaScript and TypeScript code in Visual Studio without solutions or projects
- Prerequisites
- npm integration
- Build and debug
- package.json
- JavaScript files
- TypeScript files and tsconfig.json
- Unit Tests
Добавляем поддержку Node.js в Visual Studio 2017
В настоящее время существует несколько популярных IDE которые поддерживают Node.js. В их числе: Web Storm от JetBrains, NetBeans и VisualStudio. Но, если в первых двух поддержка разработки на Node.js уже есть из коробки (правда, в случае NetBans это справедливо не для всех редакций), то для Visual Studio её необходимо добавить.
К сожалению, расширение Visual Studio для Node.js включает только установку шаблон ов проектов и средств для работы с кодом и отладки. Поэтому устанавливать сам Node.js придётся самостоятельно.
После скачивания запускаем программу установки, принимаем лицензионное соглашение и перелистываем окна мастера до начала собственно процесса инсталляции. При желании установку Node.js можно настроить, но лучше оставить параметры установки по умолчанию.
После его завершения можно приступить к установке расширения Visual Studio для Node.js. Настоятельно рекомендуется перед этим закрыть Visual Studio, если она запущена.
Установку будем выполнять при помощи утилиты Visual Studio Installer ( «Установщик Visual Studio » ).
Процесс установки стандартный. После запуска Visual Studio Installer нужно нажать кнопку «Изменить» рядом с установленным выпуском Visual Studio. В открывшемся окне на вкладке «Рабочие нагрузки» нажимаем кнопку «Разработка Node.js » (на скриншоте выделена красным) и затем кнопку «Изменить».
После этого ждём пока Visual Studio Installer загрузит и установит необходимые компоненты. Когда процесс установки завершится Visual Studio Installer можно закрыть.
При запуске Visual Studio в окне создания нового проекта можно будет увидеть шаблоны для Node.js.
Убедительно рекомендуется соблюдать описанный в статье порядок добавления поддержки Node.js в Visual Studio.
В противном случае можно столкнуться с проблемой отсутствия тех или иных пакетов при запуске вновь созданного проекта.
К счастью, это можно исправить путём самостоятельной загрузки пакетов через npm.
Visual Studio предоставляет своего рода графическую оболочку для npm. Чтобы ей воспользоваться необходимо в обозревателе решений открыть ваш проект и кликнуть правой кнопкой мыши на разделе npm . В открывшемся контекстном меню нужно выбрать пункт «Установить отсутствующие пакеты npm » ( см. скриншот ниже).
После завершения процесса установки проблема должна быть решена.
Develop JavaScript and TypeScript code in Visual Studio without solutions or projects
Applies to: 
Visual Studio 
Visual Studio for Mac Visual Studio Code
Starting in Visual Studio 2017, you can develop code without projects or solutions, which enables you to open a folder of code and immediately start working with rich editor support such as IntelliSense, search, refactoring, debugging, and more. In addition to these features, the Node.js Tools for Visual Studio adds support for building TypeScript files, managing npm packages, and running npm scripts.
To get started, select File > Open > Folder from the toolbar. Solution Explorer displays all the files in the folder, and you can open any of the files to begin editing. In the background, Visual Studio indexes the files to enable npm, build, and debug features.
Before using an Open Folder project, try creating a solution from existing Node.js code. In some scenarios, this method provides better feature support in Visual Studio. To create the project, choose File > New Project > JavaScript > From Existing Node.js code, and then choose your project folder as the source.
Prerequisites
- Visual Studio 2017 version 15.8 or later versions
- Visual Studio Node.js development workload must be installed
npm integration
If the folder you open contains a package.json file, you can right-click package.json to show a context menu (shortcut menu) specific to npm.
In the shortcut menu, you can manage the packages installed by npm in the same way that you manage npm packages when using a project file.
In addition, the menu also allows you to run scripts defined in the scripts element in package.json. These scripts will use the version of Node.js available on the PATH environment variable. The scripts run in a new window. This is a great way to execute build or run scripts.
Build and debug
package.json
If the package.json in the folder specifies a main element, the Debug command will be available in the right-click shortcut menu for package.json. Clicking this will start node.exe with the specified script as its argument.
JavaScript files
You can debug JavaScript files by right-clicking a file and selecting Debug from the shortcut menu. This starts node.exe with that JavaScript file as its argument.
If you don’t see the Debug menu option, you may need to create the project from existing Node.js code, as described previously.
TypeScript files and tsconfig.json
If there is no tsconfig.json present in the folder, you can right-click a TypeScript file to see shortcut menu commands to build and debug that file. When you use these commands, you build or debug using tsc.exe with default options. (You need to build the file before you can debug.)
When building TypeScript code, we use the newest version installed in C:\Program Files (x86)\Microsoft SDKs\TypeScript .
If there is a tsconfig.json file present in the folder, you can right-click a TypeScript file to see a menu command to debug that TypeScript file. The option appears only if there is no outFile specified in tsconfig.json. If an outFile is specified, you can debug that file by right-clicking tsconfig.json and selecting the correct option. The tsconfig.json file also gives you a build option to allow you to specify compiler options.
You can find more information about tsconfig.json in the tsconfig.json TypeScript Handbook page.
Unit Tests
You can enable the unit test integration in Visual Studio by specifying a test root in your package.json:
The test runner enumerates the locally installed packages to determine which test framework to use. If none of the supported frameworks are recognized, the test runner defaults to ExportRunner. The other supported frameworks are:
After opening Test Explorer (choose Test > Windows > Test Explorer), Visual Studio discovers and displays tests.
The test runner will only enumerate the JavaScript files in the test root, if your application is written in TypeScript you need to build those first.
Develop JavaScript and TypeScript code in Visual Studio without solutions or projects
Applies to: 
Visual Studio 
Visual Studio for Mac Visual Studio Code
Starting in Visual Studio 2017, you can develop code without projects or solutions, which enables you to open a folder of code and immediately start working with rich editor support such as IntelliSense, search, refactoring, debugging, and more. In addition to these features, the Node.js Tools for Visual Studio adds support for building TypeScript files, managing npm packages, and running npm scripts.
To get started, select File > Open > Folder from the toolbar. Solution Explorer displays all the files in the folder, and you can open any of the files to begin editing. In the background, Visual Studio indexes the files to enable npm, build, and debug features.
Before using an Open Folder project, try creating a solution from existing Node.js code. In some scenarios, this method provides better feature support in Visual Studio. To create the project, choose File > New Project > JavaScript > From Existing Node.js code, and then choose your project folder as the source.
Prerequisites
- Visual Studio 2017 version 15.8 or later versions
- Visual Studio Node.js development workload must be installed
npm integration
If the folder you open contains a package.json file, you can right-click package.json to show a context menu (shortcut menu) specific to npm.
In the shortcut menu, you can manage the packages installed by npm in the same way that you manage npm packages when using a project file.
In addition, the menu also allows you to run scripts defined in the scripts element in package.json. These scripts will use the version of Node.js available on the PATH environment variable. The scripts run in a new window. This is a great way to execute build or run scripts.
Build and debug
package.json
If the package.json in the folder specifies a main element, the Debug command will be available in the right-click shortcut menu for package.json. Clicking this will start node.exe with the specified script as its argument.
JavaScript files
You can debug JavaScript files by right-clicking a file and selecting Debug from the shortcut menu. This starts node.exe with that JavaScript file as its argument.
If you don’t see the Debug menu option, you may need to create the project from existing Node.js code, as described previously.
TypeScript files and tsconfig.json
If there is no tsconfig.json present in the folder, you can right-click a TypeScript file to see shortcut menu commands to build and debug that file. When you use these commands, you build or debug using tsc.exe with default options. (You need to build the file before you can debug.)
When building TypeScript code, we use the newest version installed in C:\Program Files (x86)\Microsoft SDKs\TypeScript .
If there is a tsconfig.json file present in the folder, you can right-click a TypeScript file to see a menu command to debug that TypeScript file. The option appears only if there is no outFile specified in tsconfig.json. If an outFile is specified, you can debug that file by right-clicking tsconfig.json and selecting the correct option. The tsconfig.json file also gives you a build option to allow you to specify compiler options.
You can find more information about tsconfig.json in the tsconfig.json TypeScript Handbook page.
Unit Tests
You can enable the unit test integration in Visual Studio by specifying a test root in your package.json:
The test runner enumerates the locally installed packages to determine which test framework to use. If none of the supported frameworks are recognized, the test runner defaults to ExportRunner. The other supported frameworks are:
After opening Test Explorer (choose Test > Windows > Test Explorer), Visual Studio discovers and displays tests.
The test runner will only enumerate the JavaScript files in the test root, if your application is written in TypeScript you need to build those first.