Level up the quality of your javascript code base with Babel and ESLint.

In this post, we will setup ESlint, Prettier to ensure that our code has the same format throughout this project. Babel is a transpiler that can turn our ES6 code into ES5. I’m going to assume you know how to use both node and npm and have them both installed on your machine.

Project Setup

Create a directory and run the following command.

npm init 

For this tutorial, I will be adding an index.js file to the src folder, and this will be our entry point. Our file directory should look like this.

your-project/
|--src/
  |--index.js
|--package.json

Install Packages

Nodemon

Nodemon is a tool that helps develop Js/Nodejs based applications by automatically restarting the node application when file changes detected.

npm install nodemon --save-dev

Babel

Babel is a tool that is used to convert ECMAScript 2015+ code into a backward compatible version of JavaScript so that older browsers and environment will be able to understand your code.

Run the following command to install babel:

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

Next, we need to tell babel how to transpile our files by creating a .babelrc file in the root directory and adding the following code to it.

{
  "presets": [
    "@babel/preset-env"
  ]
}

[Optional] If you want to set up a custom alias for directories, specific files, or even other npm modules. Let's take a look to this handy plugin

ESLint + Airbnb JS style guide + Prettier

These tools will be identifying, reporting and formatting on patterns found in ECMAScript/JavaScript code, with the goal of making the code more consistent and avoiding bugs.

Run the following command to install:

npm install eslint \
            eslint-config-airbnb-base \
            eslint-config-prettier \
            eslint-plugin-import \
            eslint-plugin-prettier \
            prettier --save-dev

Prettier Configuration

Create the file named .prettierrc in the root directory and adding the following code to it.

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

If you'd like a JSON schema to validate your configuration, one is available here: http://json.schemastore.org/prettierrc.

Eslint Configuration

Create the file named .eslintrc.json in the root directory and add the following code to it.

{
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }  
}

Scripts

Open up package.json then add the following code to the scripts section

{
  ...
  "scripts": {
    "build": "babel ./src --out-dir ./build",
    "start": "nodemon --exec babel-node src/index.js",
    "lint": "eslint ."
  },
  ...
}

Integrated with VSCode

Install Prettier and ESLint extensions

Configure VS Code

{
  ..
  "editor.formatOnSave": true,
  ..
}

Check my gist to find the final files.

Happy coding!