Node Js Getting Started Visual Studio 2019 First Node Js Web APP. Visual Studio installs the package and its dependencies into the project. You may be asked to accept license terms. When installation is complete, the added packages appear on the Installed tab. Packages are also listed in the References node of Solution Explorer, indicating that you can refer to them in the project with using statements. We are using Node.js 12.18.3, Chromium 87.0.4280.60, and Electron 11.0.1.' This is all well and good, but how useful it is depends on what you really want Visual Studio to do for you. It will only break on the main thread, although you can debug the renderer threads using the Chrome dev tools as usual. I find the node tools apps a little limiting.
Search results for 'node', Visual Studio Code on marketplace.visualstudio.com.
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).
Specifically, I had an issue with node-sass and windows bindings. 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:
Visual Studio Code Node
Step 1: Find the Node.js install location
First, find the Node.js installation that you use on the command line. 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.
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.
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.
Visual Studio Node Debugger
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!
This pack includes some extensions that help with developing node.js application in a group environment.
Extensions Included
Debugger for Chrome - Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
Dependency Analytics - Insights about your application dependencies: Security, License compatibility and AI based guidance to choose appropriate dependencies for your application.
Docker - Adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files.
DotENV - Support for dotenv file syntax.
EditorConfig for VS Code - EditorConfig Support for Visual Studio Code.
ESLint - Autocompletes filenames in your code.
GitLens — Git supercharged - Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
GitHub Pull Requests - Pull Request Provider for GitHub.
Import Cost - Display import/require package size in the editor.
Jest - Use Facebook's Jest With Pleasure.
Kubernetes - Develop, deploy and debug Kubernetes applications.
Nomo Dark Icon Theme - Nomo Dark Icon Theme.
Path Intellisense - Visual Studio Code plugin that autocompletes filenames.
Quokka.js - Live Scratchpad for JavaScript.
TypeScript TSLint Plugin - Provides TSLint support using the typescript-tslint-plugin.
Visual Studio IntelliCode - AI assisted developer productivity.
VS Live Share - Real-time collaborative development from the comfort of your favorite tools.
YAML - YAML Language Support by Red Hat, with built-in Kubernetes and Kedge syntax support.
License
The source code for this extension is licensed under the MIT license.
Visual Studio Node.js Interactive Window
made with :heart: by me