Level up the quality of your javascript code base with Babel and ESLint. 
Tags: javascript, babel, eslint, prettier
Published: 2019-04-20 10:36:27

---
title: Level up the quality of your javascript code base with Babel and ESLint. 
published: true
description: Setup Javascript / Nodejs Project with ES6 + Babel 7 + ESLint + Airbnb + Prettier
tags: javascript, babel, eslint, prettier
---

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.

```sh
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.

```sh
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:

```sh
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.

```js
{
  "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](https://github.com/tleunen/babel-plugin-module-resolver)

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

```sh
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.

```js
{
  "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](http://json.schemastore.org/prettierrc).

### Eslint Configuration

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

```sh
{
  "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

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

## Integrated with VSCode

Install [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extensions

Configure VS Code

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

Check my [gist] (https://gist.github.com/vukhanhtruong/670c6b4d1c02a5798cb40a50762c7548) to find the final files. 

Happy coding!