When learning about front-end web development, it might be better to learn the basics of JavaScript first before jumping to more complex frameworks and libraries like React or Vue. VS Code is a popular, open-sourced lightweight code editor and in this post, we will create an empty JavaScript project using Visual Studio Code and it can be used as a basis for building more complex web apps.
An HTML page, a JavaScript file, and a CSS stylesheet will be used to create the final web page. We will then copy a code from the CodePen example to make the web page a little more useful.
Create an empty project in VS Code
To generate a new project, we usually use CLI or a command-line tool of installed coding language or framework, but in our case, we will just use plain JavaScript, so all we need to do is create a folder somewhere and then open it with Visual Studio Code.
To open a folder in VS Code, we can launch VS Code and select File > Open Folder, or if we are in a terminal (Command prompt/PowerShell), go to that folder and type the code .
command.
Add new files to the project
To create a new file in the current project in VS Code, we can select File > New File under Menu or we can click on the "New File" icon when "Explorer" is selected in the Activity Bar (big icons located on the left side of the Window).
We will add three files to the project:
- index.html
This is an HTML document. We will add some minimum HTML code as well as references to JavaScript and Stylesheet files. - hello.js
Here we can add JavaScript-related code. It will be used byindex.html
. - style.css
To style the HTML page, we use CSS styles. We can have CSS styles inside the HTML page, but it's preferred to have them in a separate file.
The end result should look something like this:
We'll start by adding minimal HTML code into the index.html
file and then add references to JavaScript and Stylesheet files.
Adding HTML code in index.html
The minimal HTML document should contain the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Currently, the index.html
doesn't know anything about the JavaScript and Stylesheet file. Let's fix that.
Adding JavaScript and stylesheet references to index.html
We must include JavaScript and Stylesheet references in the HTML page, so that they are loaded when index.html
is opened.
Adding reference to JavaScript file
Add the following code before the closing </body> tag:
<script src="hello.js"></script>
Adding reference to Stylesheet file
Place the code below inside the <head></head> element:
<link href="style.css" rel="stylesheet" />
The full content of index.html
The index.html
file should now look like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<script src="hello.js"></script>
</body>
</html>
Running JavaScript Project from VS Code
We can run the project by going to Menu > Run > Start Debugging or simply pressing the F5 key. We can also just run the index.html
page from Windows Explorer. The web page will be empty because the <body> element doesn't contain any visible elements.
Let's make it more useful by adding code from the CodePen example below. Copy the contents of the HTML, CSS, and JS tabs into the corresponding index.html
, hello.js
, and style.css
files. For the index.html
, copy the HTML code at the start of the <body> element.
See the Pen
Very Simple JavaScript innerHTML Example by HowToSolutions (@HowToSolutions)
on CodePen.
In this example, the user can enter their name into a text field and then press Enter or click the "Submit" button, and the page will display a greeting message based on the name entered into the text field.
Make sure that the index.html
is currently active (opened) in VS Code and run the project (Menu > Debug > Start Debugging or F5). We should get the same result in a browser as shown in the above CodePen example.
"This site can’t be reached" problem
If we run the project while the JavaScript or Stylesheet is opened in VS Code, the Visual Studio Code will create a .vscode/launch.json
file with the content below and launch the browser at the location specified in the url attribute.
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
If no web server is running at http://localhost:8080/
, we get the following error in Chrome:
localhost refused to connect.
We can simply delete the launch.json
file and make sure the index.html
is active when running the project in VS Code.
Another solution is to modify the url attribute in launch.json
to contain the absolute path of the index.html
, like so:
"url": "C:/work/website/index.html",
After this fix, we can run the project regardless of which file is currently opened in VS Code.
Conclusion
In this post, we created a simple JavaScript project with VS Code. The web project itself is quite simple, with only three files. We added an HTML page containing minimum HTML content, an empty JavaScript file, and finally a Stylesheet file. We added references to both JavaScript and a stylesheet in the index.html
file. Finally, we used HTML, JS, and CSS code from the CodePen example to try and test a simple web page.