Is it possible for VS Code to use node version specified by NVM? I have 6.9.2 installed locally. Even after switching to another version, from the OS X terminal (not the VS Code terminal), restarting VS Code, VS Code still shows using 6.9.2. Thank you for your feedback! Please add your vote to the corresponding UserVoice suggestion.
I’m all about using Visual Studio Code for Node.js development. It is a lightweight code editor and runs on Windows, Mac OS X, and Linux. I enjoy it so much that I also use it for Node.js projects on the Raspberry Pi. To accomplish this, I create a Windows file share on the RasPi as described in my Beginner’s Guide to Installing Node.js on the Raspberry Pi and map a drive on my Windows system to the RasPi. I am then able to use VS Code to create my Node.js code and jump onto the RasPi to run the actual code.
Anyway, back to our regularly scheduled program… Today’s topic is aimed at Windows users who are using Visual Studio Code and want to be able to right click on a given folder and launch VS Code. We’re going to add a right click context menu item to “Open Folder as VS Code Project” since it saves time—and it’s more fun!
Major Edit: It turns out that when you install VS Code for Windows, you have an opportunity to add an “Open with Code” action to the Windows Explorer file context menu—if you don’t hastily sprint through the installation and take the defaults like I did the first time around. 🙂 Take a deep breath and jog rather than scream through the installation. When you see the dialog box below, be sure to check the two checkboxes highlighted.
Microsoft Visual Studio For Mac
Ignore the rest of this post unless you don’t want to re-install VS Code or if you are curious for other contexts. It’s easier to simply re-install VS Code.
Let’s make it so. I am leveraging the excellent work of some of my friends on GitHub who created a Windows context menu item for Sublime Text 2/3.
First, create a file with a “.reg” extension. For example, vsCodeOpenFolder.reg.
You are then positioned to add these contents to the file:
Next, save the file.
Note: the above .reg file assumes that you installed VS Code in the default location—which will be the case for most people. Adjust accordingly if the Code.exe file is installed in a different folder.
Very nice – we are almost done. Double click on the vsCodeOpenFolder.reg file that you just created.
Windows UAC (User Account Control) will launch and ask you if you want to allow this app to make changes to your PC. Go ahead and click OK so you can merge the registry code contained in the file with the Windows Registry on your computer.
That’s all there is to it! You can now navigate to a folder through Windows Explorer, right click on either the folder icon or in the folder itself, and you will see an option to “Open Folder as VS Code Project”. As a bonus, you can right click on individual files and “Edit with VS Code” as well.
You can now smile at the fact that you’ll have a little more time each day to write amazing code in Node.js/JavaScript or any of the other languages available for use with VS Code.
Follow Dave Johnson on Twitter to stay up to date on the latest tutorials and tech articles.
Visual Studio Code is a free code editor of Microsoft with an excellent TypeScript and Node.js development support. This blog post describes how easy it is to create a new Node.js project with TypeScript support. And at the end, we will also debug a small “Hello World” example.
The example in this article provides to setup the following:
- Node.js - http://www.nodejs.org (runs on Windows, Mac and Linux)
- TypeScript
typenpm install typescript –gin the terminal - Visual Studio Code - http://code.visualstudio.com (runs on Windows, Mac and Linux)
A new project
To create a new project, the only thing we need is a new folder in our file explorer. Afterwards, we open the created folder in Visual Studio Code File | Open Folder. As project file the packages.json file is needed. To include it, we just have to write npm init –y in the terminal. You can open the integrated terminal in Visual Studio Code using the keyboard shortcut [Ctrl] + [`].
Install Node.js declaration files
To ensure that Visual Studio Code can solve Node.js features within IntelliSense, the TypeScript declaration files for Node.js are required. They will be installed with the node package manager (npm) since TypeScript 2. The command npm install @types/node --save-dev will have it done. To install other packages like jQuery for example, you would have to call npm install @types/jquery --save-dev.
TypeScript compiler configuration
For a proper Node.js support with TypeScript, a compiler configuration file is absolutely necessary. It will be created as tsconfig.json in the root directory. Thanks to the JSON IntelliSense feature of Visual Studio Code, which automatically provides an autocomplete on the basis of the filename. So you just need to write the first curly braces and IntelliSense will autocomplete it with the shortcut [Ctrl] + [.]. The IntelliSense support only works with an existing internet connection. In this case you need write the following compiler configuration:
Module: In a typical web application, the browser obtains the JavaScript files via the Script tag. With Node.js, the JavaScript code will be executed irrespective of the website. This is the reason, the modul system CommonJS has been developed. It allows to load JavaScript files within the JavaScript code. Because of that, TypeScript needs to know which modul system is used, so the “import” and “export” code will be generated automatically.
Source Map: As the name suggests, debugger-service maps will be generated here. They support the debugger to solve a code area of the TypeScript file to the generated JavaScript file. So it is possible to debug right within the TypeScript file.
Watch: The watch option helps to prevent to start the TypeScript compiler before each debugging. It monitors all TypeScript files for changes. If a file changes, the compiler is automatically activated. So the compiler has to be started only once.
The first Node.js „Hello World“
Now we create an index.ts file. The following code is required for a “Hello World” example:
The first line begins with a TypeScript-specific keyword import. Thus, TypeScript knows that there must be a declaration for this module. If there is no declaration file or a TypeScript code in the project, let is written as usual. Then we access a Node.js build-in module called http. The first line is comparable to a using, import or include from other high-level languages.
From line 3, a Web server is already being created. When calling, the anonymous function is triggered and a streaming to the client is active. Here we get all client request information with the request parameter. We can use the response parameter to append data to the current stream. The simple write function was used to send a simple string value. To terminate the current stream, the end function is required.With the listen function, the current web server is activated for the defined port. That’s it!
Start the TypeScript compiler with Visual Studio Code
Node In Visual Studio
The TypeScript file was written, but a JavaScript file is needed to run it. The key combination [Ctrl] + [Shift] + [b] prompts Visual Studio Code to build the project. Alternatively, you can open the command line with [F1] and type Build. Now Visual Studio Code does not know what exactly it should do. So it will ask you, what exactly you want. We choose TypeScript - tsconfig.json here.
A new directory is created with .vscode and a tasks.json file is created. The pleasant thing about this template is that all relevant settings are already stored. So we can close this file and call the build process again with [Ctrl] + [Shift] + [b]. Left below we can see a rotating character and in File Explorer we can see two new files for our TypeScript file. One is the generated JavaScript file and the other is the SourceMap file which is required for debugging.
Debug the Node.js application
There are different ways to run the application. One way is to start from the terminal using node index.js, regardless of Visual Studio Code. The only bad thing is, we have no debugging comfort here. Therefore we use the second option: We press the [F5] key within Visual Studio Code to debug. Again, Visual Studio Code does not know what exactly it should run. We select node.js.
A further JSON file is created in the .vscode directory. It is important to note that the JavaScript file name corresponds to what we have created and that the option SourceMaps is activated. Otherwise, we can only debug within the JavaScript file. Then press the [F5] button again. The server has now been started. If we press the [F9] key in the response.write line, or alternatively next to the line number, we get a red breakpoint. Now go to the browser and call your web server with http: // localhost: 3000. Visual Studio Code then stops at the breakpoint and you can check all the parameter values as you are used to debugging other high-level languages.
If there are problems, it is mostly because you have forgotten to start the TypeScript compiler once. Therefore, check whether your JavaScript and SourceMap files were generated.
Visual Studio For Mac Node Js Install
Conclusion
Visual Studio For Mac Nodejs
Visual Studio Code is a great tool for development with Node.js and TypeScript. With just a few lines of code, we have created a web server and a REST Web service. Completely without IIS, Tomcat or Apache HTTP Server.The example I have deposited here on GitHub:
Visual Studio For Mac Tutorial
Did the article help you? Do you have any questions? Then write me a comment!