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.
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,
You are then positioned to add these contents to the file:
Windows Registry Editor Version 5.00 ; Open files [HKEY_CLASSES_ROOT\*\shell\Open with VS Code] @="Edit with VS Code" "Icon"="C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe,0" [HKEY_CLASSES_ROOT\*\shell\Open with VS Code\command] @="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%1\"" ; This will make it appear when you right click ON a folder ; The "Icon" line can be removed if you don't want the icon to appear [HKEY_CLASSES_ROOT\Directory\shell\vscode] @="Open Folder as VS Code Project" "Icon"="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\",0" [HKEY_CLASSES_ROOT\Directory\shell\vscode\command] @="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%1\"" ; This will make it appear when you right click INSIDE a folder ; The "Icon" line can be removed if you don't want the icon to appear [HKEY_CLASSES_ROOT\Directory\Background\shell\vscode] @="Open Folder as VS Code Project" "Icon"="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\",0" [HKEY_CLASSES_ROOT\Directory\Background\shell\vscode\command] @="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%V\""
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.
Follow Dave Johnson on Twitter to stay up to date on the latest tutorials and tech articles.