JavaScript Tooling to the Rescue

JavaScript Tooling to the Rescue

Today, there are a number of development tools available for Javascript developers to make our job easier, These tools let us focus on stop worrying about the mundane tasks related to application development and focus on the really important part, coding.

In this post, I am presenting a few of the most popular Javascript tools among developers: Webpack, Babel, ESLint, and Prettier. If you haven’t used even one of them in your projects, trust me, you are missing out. So, definitely give them a try on your next project.


Webpack is a popular module bundler among Javascript developers. It takes the large collection of Javascript modules in your application as input and bundles them into one or several JS files that you can easily include in an HTML document.

A modern-day web application contains a considerably high number of JS files because of our tendency to use more and more dynamic features in the application. While the added features are great for the users, managing these modules along with other third-party dependencies used in the application, without additional support, could become quite a headache for developers.

For example, you’ll have to manually control the order each script is executed on the browser. Loading many files could also affect the performance of your application.

With the use of Webpack, you can stop worrying about these issues. Webpack, easily and efficiently, takes care of this business for you. It analyzes the JS modules of the application, starting from an entry point, and constructs a dependency graph. With the help of loaders and plugins, it then handles tasks like dealing with dependencies, deciding load priorities, and resolving paths.

Not just Javascript, you can also use Webpack’s css-loader to manage the CSS files.

Webpack allows you to define split points in the code so that the output is bundled to several JS files instead of a single long file. It gives you the freedom to load parts of code only when they are needed.

This on-demand, lazy loading could be used efficiently to increase the performance of your application. You load the new code blocks only when the user has done something to require their functionality.

Especially, if you are working with frameworks like React, the functions provided by Webpack, splitting and bundling code, dealing with dependency modules, will save you a lot of hassle of managing them by yourself.


Babel is the most popular transpiler for Javascript. It converts ES6 Javascript code into ES5 Javascript so that the code can run in even the old browser versions.

Transpilers are tools that take the code written in one language as input and convert it to another language. In Babel’s case, it mainly takes ES6 code and outputs ES5 code.

Take the following code snippet written using newly introduced classes in ES6.

class Person {
  constructor(name){ = name;

let person = new Person("Mark");

Babel will convert it into ES5 like this.

"use strict";

function _instanceof(left, right) { 
   if (right != null && typeof Symbol !== "undefined" &&      right[Symbol.hasInstance]) { 
       return !!right[Symbol.hasInstance](left); 
   } else { 
        return left instanceof right; 

function _classCallCheck(instance, Constructor) { 
    if (!_instanceof(instance, Constructor)) { 
        throw new TypeError("Cannot call a class as a function"); 

var Person = function Person(name) {
  _classCallCheck(this, Person); = name;

var person = new Person("Mark");

If that’s all Babel does, why should you use Babel in your project? Though developers embraced new ES6 features introduced to Javascript in stride, some browsers are yet to catch up with ES6 support.

If the users of your web application are using one of these browsers, or simply older browser versions, they won’t be able to take advantage of all the great features you have added to the application. To make sure your app is accessible to everyone, Babel steps in and transpiles your code to ES5, which is supported by all the browsers.

Should you stop using Babel after all the browsers start supporting ES6? The answer is, no. Even though the focus is currently on ES6, ECMA releases new Javascript updates yearly. It’ll always take browsers some time to catch up with the newest standards.

But with the support of Babel, which adopts the newest standards much sooner, you won’t have to worry about transitioning to use new Javascript features when developing your applications.

If you are a React developer who wants to use ES6 features or JSX in your code, letting Babel help you with transpiling the code to ES5 is the wise choice to make. Also, you can use Babel with Angular to write ES6 code.

In addition to ES6, Babel can transpile Typescript to ES5 as well.


ESLint is the default linter of most Javascript developers. It helps you write cleaner code and adhere to the coding conventions you follow.

The task of a linter is to analyze your code and flag programming and style errors in it. With ESLint, you have complete control over which errors should be flagged and what their error level is. You can define the error level of a rule as error, warning, or disabled.

ESLint is quite useful to spot errors like undeclared variable assignment and issues related to variable scope.

You can also use rules to enforce certain coding conventions in your code. For example, you can define rules to disallow the use of await inside loops or disallow the use of console.

If the project you are involved in follows a specific style guide and coding convention, you can define ESLint rules to help you stay consistent with them. If the style guide you follow has a limit on continuous empty lines, you can specify this in the rules. Then, whenever you mistakenly leave too many empty lines, ESLint shows an error in your code.


Prettier is a code formatter. You can use it to automatically format your code without having to manually check for style errors.

By design, Prettier is very opinionated when it comes to coding styles. One of the major reasons to adopt Prettier is to stop all ongoing debates over code styles, and because that’s a part of its mission there are only a few options available for it. More on that on the Prettier opinion philosophy page

Similar to ESLint, Prettier helps you write cleaner code that confirms to a style guide. The difference between ESLint and Prettier when it comes to enforcing style is that ESLint only shows you errors on what you are doing wrong, but Prettier does the formatting by itself.

But it’s important to understand that they are not interchangeable. ESLint offers more use cases than checking style errors.


JavaScript ecosystem relies on tools that help developers to resolve problems and build amazing apps. These tools provide support to clean code, compatibility issues and performance.

It is thanks to these tools that frameworks like React are possible, and that JavaScript can be present in much more than just the web.

It is also true that some of these tools are here just to fix the “mess” that JavaScript legacy left us.

Thanks for reading!

If you liked what you saw, please support my work!

Juan Cruz Martinez - Author @ Live Code Stream

Juan Cruz Martinez

Juan has made it his mission to help aspiring developers unlock their full potential. With over two decades of hands-on programming experience, he understands the challenges and rewards of learning to code. By providing accessible and engaging educational content, Juan has cultivated a community of learners who share their passion for coding. Leveraging his expertise and empathetic teaching approach, Juan has successfully guided countless students on their journey to becoming skilled developers, transforming lives through the power of technology.