Opening JS and HTML files in the browser from VSCode (for Windows)
When getting started with coding or programming from a beginners perspective its a common theme to run into problems that aren’t only based on your syntax or ability to write good JavaScript. This can be really irritating! Not being able to open a file, read a certain document, or get your app to run can be a pressing issue when all you want to do is know if you’re writing decent code.
Believe it or not, this makes us better programmers. All of these side issues that have nothing to do with creating better code or writing cleaner algorithms are extremely important for your skill set; this will greatly help you in a professional setting as well. One of the major issues I immediately came across was when I starting programming on Windows after being an IOS person for over a year.
I couldn’t find out how to simply open up my index.js or html files from my projects into the browser to see my project! What is the main cause of this? Typically it has to do with the fact that you’re working on a PC which has different parameters than working on a Mac. Today, we’re going to work on this issue if we were using Virtual Studio Code (different than Virtual Studio!) as our text editor.
Command Tasks
A common way for programmers to learn how to write code is using Notepad or Notepad++ for windows. Its extremely simple, free, and allows a user to quickly view their HTML in a browser. While one can add JavaScript within a <script> tag to make a full program in Notepad++, it can get messy and all has to be in one file. To work with professional programs and get used to a coding text editor its best to graduate from these simple programs and use something like VS Code. While it can be a little confusing at first, it’s extremely user friendly on its presentation and gives you plenty more options; including separate files/folders to work with.
While I do preach everyone should use VS Code, I also know there are some user interface issues with it that make a new programmers life pretty irritating. While they may seem hidden at first, one of the pressing issues I had with it when switching to windows was being able to use the terminal command to open my index.js or index.html files. A standard and simple command, it allows the user to open their files to the browser to see their program thus far.
When attempting to do so, the terminal will say “no such command.” Why is that? This is due to the JSON file in VS Code for Windows and the code initially set up. How can we check on this?
Original JSON File
This is what your original JSON file will look like; comments included. How do we get there? First, we either press cntrl+shift+p or simply F1 to open up the Command Palette. The Command Palette shows us all of the keyboard shortcuts available to the user, as well as giving a list of all potential functionality in VS Code. It’s a drop down menu to do anything in VS Code!
Once here, we can search by typing in Tasks: Configure Task to get to where we need to go.
Note: On older versions type in Configure Task Runner
When we choose this, it’ll open up our tasks.json file. This is exactly where we want to go; right on! It will look just like this:
As you can see through the premade comments and code, this JSON file has its own documentation and instructions on what you should do to have it work for what you want. I’m here to cut out all that reading and tell you exactly how to fix this simple problem. Like most opinionated programmers say — “delete everything”.
And I mean it.
Delete everything in the file (but not the file itself!) so we have an empty tasks.json file. Now we can put in the code we want to be able to open our project in the browser. This is the code to copy in:
{
“version”: “0.1.0”,
“command”: “explorer”,
“windows”: {
“command”: “explorer.exe”
},
“args”: [“${file}”]
}
And boom! We’re fixed! A quick note to take in: look at the “args” section of this new code. Within it, we can simply put the file we want to show in brackets and quotes. Lets say we wanted to show our index.html file in the browser; that means we would change the “args” value to [“index.html”]. Here, I have it as [“${file}”] for a reason.
By using this syntax, we can have the file interpolated into the args so it will open whatever file we are currently open on in the program! This can be great when working between multiple different views or files. Note that the $ symbol goes outside the curly brackets; if not, we’ll receive and error.
Finally We Can See!
Now everything is fixed! Ta-daaaaa! To open up our current file, or the file we hard coded into the “args” we type the command ctrl+shift+b to open our file in the browser.
Note: This might bring up more commands in the Command Palette. That’s ok! Just keep entering through the one or two options it gives you with the first option on each drop down menu and it’ll work out just fine.
Once here we don’t need to run this command over and over again to see our page. We can simply refresh the browser after we update our code to see the difference! Some frameworks hot render like ReactJS, but if we’re just using HTML and/or JS for these programs, a refresh on the page will do.
Nice work!
