How to create a JavaScript project in VS Code

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.

Note: This article used VS Code 1.74 on Windows System. For a Visual Studio IDE example, check Create a JavaScript project using Visual Studio article.

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.

Table of Contents

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).

VS Code - Create new file

Note: We can use Windows Explorer to add new empty files to the project folder. The Visual Studio Code will automatically refresh the list of files in the project.

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 by index.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:

VS Code - Simple website project with three files added

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.

Note: Go through THIS article for a more detailed explanation of the code above.

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.

Note: Check Create Particle System for a more animated example in JavaScript that uses HTML Canvas.

"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:

This site can’t be reached
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.