When starting a new node.js project, a number of initial steps are required

• to ensure that the new es6+ features can be used, and
• to ensure debugging is enabled in the node.js project.

Two most common tools used to make these initial steps much more simpler are

• Babel and
• Visual studio code.

This article will present the steps required to get a simple node.js project running using es6+ features with debugging enabled in visual studio code.

Before proceeding with this article, ensure that you have node.js and visual studio code installed.

Getting started

Create a new project folder and navigate to it using a console or terminal. Create a simple npm project.

npm init -f

Create a simple app

Open the project in visual studio code and create an src folder with the following files.

As can be seen from the above files, a simple calculator is created that adds two numbers. When the application is executed, a new calculator will be initialized and the add method will be invoked with two numbers, 1 and 3. The result of the calculator will be outputted to the console. The expected result that is to be displayed in the console is 4.

Add a breakpoint to line 3 in the server.js file.

Create a .env file

In the root folder of the project, create a .env file to store environment variables as follows.

Setting up babel

Babel is a JavaScript compiler that is mainly used to convert ECMAScript2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Run the below commands to install babel as a development dependency.

npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env

Alternatively, to install all dependencies in one command, run the below command.

npm install --save-dev @babel/core @babel/cli @babel/preset-env

Create a babel.config.json file in the root folder of the application with the below json.

Open the package.json file and modify the scripts object as follows.

The above script will compile all the code in the src folder to a compatible JavaScript version (that is, version < es6) and output the compiled files to a folder called build. The --source-maps option generates source maps that can be used by the visual studio debugger. The --watch option enables babel to compile a file every time it is changed.

In a terminal or console, run the following command to compile the src folder and to output the compiled code to the build folder.

npm run build:dev

With the watch option enabled, babel will automatically compile a file every time it is changed.

Setting up debugging in visual studio code

In visual studio code, create a node.js launch.json file with the following Launch App configuration.

The following three properties where added to the file:

• program – specifies the entry point to the application.
• envFile – specifies the location to the environment variables file.
• outFiles – specifies the location to the compiled files, that is, the build folder.

To allow debugging of the currently opened file in the editor, modify the launch.json file by adding a new configuration, Launch Current File, for debugging the current file.

Configuration can be switched in the visual studio code editor by selecting the appropriate configuration.

Debug the application

Now that everything is set up, press F5 to start debugging the application. The debugger should stop at line 3 in the server.js file when using the Launch App configuration.

After stepping through the code, 4 will be displayed in the console.

Summary

This article provided a detailed list of steps that can be used to ensure that es6+ and debugging can be used in a node.js project using the visual studio code editor. The process to set this up is not that difficult thanks to babel and visual studio code.

Babel is built out of plugins and babel provides a number of plugins that can be used in a node.js project based on the requirements of a project.

Further information on babel can be found at the following links:

• Babel
• Babel usage

The source code used in this article can be found here.

Software versions used in this article

• node v12.17.0
• npm v6.14.5
• visual studio code v1.45.1
• babel v7.10.1