Working with Browser (Clientside) JavaScript in NTVS
🎵Note: This documentation is outdated at this point, especially when using the Node tools in Visual Studio 2017. We're working on update docs, and will redirect you to those when they're ready.
There are slight differences between browser-side JavaScript and Node.js. The biggest difference you'll notice is global objects and global scope.
In browser-land, the window object and all of it's properties, methods, and events are part of the global scope. This means that wherever you are, identifiers such as 'window', 'document', 'onclose', etc. will be available to you.
In Node-land, there are different global objects (such as 'global', 'process', etc.), as defined in the Node.js documentation.
By default NTVS will only display completions for Node.js-land JavaScript, not for browser-land JavaScript. You can modify these settings as follows:
- Right click the file in Solution Explorer, and selecting Properties.
- Change the Build Action to:
- Content for Browser-side completions
- Compile for Node.js-land completions
- Close and re-open the editor tab associated with the file if it was already open
Now this whole process can be a little burdensome if you're working with a bunch of files, so in an effort to make this feature more discoverable and easier to use, we've introduced an explicit node/browser label on folders containing javascript files. Additionally, you can right click on any directory, and select Set as Content (browser code) or Set as Compile (Node.js code) to toggle between modes.
And of course, if you want to turn the labels off once you've configured your project, there's an option to do so in:
Options > Node.js Tools > Show labels denoting browser and Node.js code in Solution Explorer
Node.js-land code and Browser-land code use different formatting options.
- Browser-land options are available in Tools -> Options -> Text Editor -> JavaScript
- Node.js-land options are avaialble in Tools -> Options -> Text Editor -> Node.js
But why?! Why are they in different places? Here be dragons 😃
NTVS is designed to debug Node.js code only. For client-side code debugging, you can use your browser F12 debug tools You can also use the built-in Visual Studio JavaScript debugger that works with Internet Explorer. Unlike ASP.NET projects, we don't have automatic attach to IE when launching a web project (this is feature request). But you can still do Debug -> Attach to Process, select iexplore.exe, and make sure that you're using the Script code type, to get the same effect.