Node Js Visual Studio

Posted on |



Visual Studio is a fantastic IDE (and free for individual use)! It’s been so great that they’ve added modern web dev support in recent years for things like React, Webpack, and more. In addition, Visual Studio’s installer has an option to install Node.js as part of its regular installation in order to support the npm task runners that are built in. However, I ran into an issue I updated Node.js outside of Visual Studio , but since Visual Studio uses its own install that is separate from any outside installation, you can potentially run into a node_modules package dependency issue where one version of npm installs a package (which makes it rely on that version of Node/npm), and then you can’t run commands in the other version (they break).

Visual Studio Code supports many features for JavaScript and Node.js development. The features that ship with the downloaded product are the core features: debugging, IntelliSense, code navigation, etc. In addition, to these core features, you can install a large number of quality extensions to add features to VS Code for JavaScript development. Node.js debugging in VS Code. The Visual Studio Code editor has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, and many other languages that are transpiled into JavaScript. Setting up a project for Node.js debugging is straightforward with VS Code providing appropriate launch configuration defaults and snippets. Node.js Tools for Visual Studio (NTVS) is a free, open-source plug-in that turns Visual Studio into a Node.js Integrated Development Environment (IDE). It supports a broad range of features including editing, IntelliSense, cross platform and remote debugging, edit and continue, npm integration, profiling, TypeScript, and an integrated REPL window.

Tag: Node.js from Visual Studio Blog. Visual Studio Code Docker extension 1.0 – Better than Ever! Mike Morton March 16, 2020 Mar 16, 2020 03/16/20 We recently released the 1.0 version of our Visual Studio Code Docker extension, which is the first general availability (GA) release. The Docker extension makes it easier to build apps that.

Specifically, I had an issue with node-sass and windows bindings. Day one for mac download. The solution was to point Visual Studio to the version of Node.JS that I had already set up externally to Visual Studio. Here’s how to synchronize them:

Step 1: Find the Node.js install location

First, find the Node.js installation that you use on the command line. Mp3 converter youtube for mac free. By default, Node.js installs to C:Program Filesnodejs. Unless you picked a custom installation directory when you initially installed Node.js, this is likely the path you’ll use.

Node Js Visual Studio Build Tools

Once you’ve found the installation directory, copy that directory path to your clipboard for a future step.

Step 2: Configure Visual Studio

Let’s setup up Visual Studio to point to the real Node.js

Note: These instructions work on Visual Studio 2015, 2017, 2019, and probably future versions as well.

To configure Visual Studio to use a different version of Node.js, first open Visual Studio and navigate to Tools > Options.

Studio

In this dialog, go to Projects and Solutions > External Web Tools to open the dialog that manages all of the 3rd party tools used within Visual Studio. This is where Visual Studio is configured to point to a specific version of Node.js.

Add an entry at the top to the path to the Node.js directory to force Visual Studio to use that version instead.

Using the Windows PATH Instead

If you’re making this change, you probably notice that you can also move the $(PATH) option up to tell Visual Studio to look at the PATH environment variable to determine where it should look for node or other command line tools. This is probably what you want globally if you’re someone who is comfortable with the command line and understand the implications.

In general it seems that Visual Studio tries to isolate itself and the tools it uses from both other installs of Visual Studio and anything else that may cause issue with it. In general, Visual Studio developers have not traditionally had to touch the command line much, so this makes sense historically, but modern web applications require a different approach.

Managing switching the Node.js Version using Powershell

Another issue that might arise due to using the $(PATH) is that you might have projects that use different versions of Node.js. For example one might use Node.js 8.x.x, while another uses 10.x.x. In this case you might want to use Node Version Manager, or 'NVM' as it’s called, to switch versions on the command line in powershell.

You can use NVM to switch versions of Node.js yourself on the command line, or use it to read the package.json file’s 'Engine' property, and sets the appropriate version. If the version isn’t available it can even silently install the appropriate Node.js version. This is helpful in many situations, and can be included in an MSBuild task if needed to swap the version when you hit the 'Play' button to the correct version, or as a step in your CI/CD build process.

Wrapping Up

And that’s it! Now you’re all synced up! Having two separate installs is really confusing. If you’re starting out with JUST the VS Node.js version, you’ll eventually come to a point where you may update node.js by installing it outside VS, causing it to get out of sync anyway. If you’re a veteran to Node.js, then you’re already using Node outside of Visual Studio and will need to do this anyway. It seems like there should be better documentation or indicators to show what version VS is using so this is more apparent.

Hope that helped. Did this fix it for you? Do you have a better way of keeping this in sync or a plugin/tool to help out? Let us know in the comments!

-->

In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you'll create and run a simple Vue.js web application.

Important

This article requires the Vue.js template, which is available starting in Visual Studio 2017 version 15.8.

Prerequisites

  • You must have Visual Studio installed and the Node.js development workload.

    If you haven't already installed Visual Studio 2019, go to the Visual Studio downloads page to install it for free.

    If you haven't already installed Visual Studio 2017, go to the Visual Studio downloads page to install it for free.

    If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features.., which opens the Visual Studio Installer. Choose the Node.js development workload, then choose Modify.

  • You must have the Node.js runtime installed.

    If you don't have it installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries. Node.js is built for 32-bit and 64-bit architectures. The Node.js tools in Visual Studio, included in the Node.js workload, support both versions. Only one is required and the Node.js installer only supports one being installed at a time.

    In general, Visual Studio automatically detects the installed Node.js runtime. If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node, choose Properties, and set the Node.exe path). You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects.

Create a project

First, you'll create a Vue.js web application project.

  1. If you don't have the Node.js runtime already installed, install the LTS version from the Node.js website.

    For more information, see the prerequisites.

  2. Open Visual Studio.

  3. Create a new project.

    Press Esc to close the start window. Type Ctrl + Q to open the search box, type Basic Vue.js, then choose Basic Vue.js Web application (either JavaScript or TypeScript). In the dialog box that appears, type the name basic-vuejs, and then choose Create.

    From the top menu bar, choose File > New > Project. In the left pane of the New Project dialog box, expand JavaScript or TypeScript, then choose Node.js. In the middle pane, choose Basic Vue.js Web application, type the name basic-vuejs, and then choose OK.

    If you don't see the Basic Vue.js Web application project template, you must add the Node.js development workload. For detailed instructions, see the Prerequisites.

    Visual Studio creates the new project. The new project opens in Solution Explorer (right pane).

  4. Check the Output window (lower pane) for progress on installing the npm packages required for the application.

  5. In Solution Explorer, open the npm node and make sure that all the listed npm packages are installed.

    If any packages are missing (exclamation point icon), you can right-click the npm node and choose Install Missing npm Packages.

Explore the IDE

  1. Take a look at Solution Explorer in the right pane.

    • Highlighted in bold is your project, using the name you gave in the New Project dialog box. On disk, this project is represented by a .njsproj file in your project folder.

    • At the top level is a solution, which by default has the same name as your project. A solution, represented by a .sln file on disk, is a container for one or more related projects.

    • The npm node shows any installed npm packages. You can right-click the npm node to search for and install npm packages using a dialog box.

  2. If you want to install npm packages or run Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here.

Add a .vue file to the project

  1. In Solution Explorer, right-click any folder such as the src/components folder, and then choose Add > New Item.

  2. Select either JavaScript Vue Single File Component or TypeScript Vue Single File Component, and then click Add.

    Visual Studio adds the new file to the project.

Build the project

  1. Next, choose Build > Build Solution to build the project.

  2. Check the Output window to see build results, and choose Build from the Show output from list.

  1. (TypeScript project only) From Visual Studio, choose Build > Clean Solution.

  2. Next, choose Build > Build Solution to build the project.

  3. Check the Output window to see build results, and choose Build from the Show output from list.

Node Js Tools For Visual Studio

The JavaScript Vue.js project template (and older versions of the TypeScript template) use the build npm script by configuring a post build event. If you want to modify this setting, open the project file (<projectname>.njsproj) from Windows Explorer and locate this line of code:

Run the application

  1. Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application.

    In the console, you see a message Starting Development Server.

    Then, the app opens in a browser.

    If you don't see the running app, refresh the page.

  2. Close the web browser.

Node Js Visual Studio 2019

Congratulations on completing this Quickstart! We hope you learned a little bit about using the Visual Studio IDE with Vue.js. If you'd like to delve deeper into its capabilities, continue with a tutorial in the Tutorials section of the table of contents.

Node Js Visual Studio Tutorial

Next steps