Setup Javascript / Nodejs Project with ES6 + Babel 7 + ESLint + Airbnb + Prettier

._README.md

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-folder/
|--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"
  ]
}

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 + 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,
  ..
}

.babelrc

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

.eslintignore

/node_modules/**
/build

.eslintrc.json

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

.prettierrc

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

package.json

{
  "name": "your-project",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start": "nodemon --exec babel-node src/index.js",
    "build": "babel ./src --out-dir ./build",
    "lint": "eslint ."
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "7.4.3",
    "@babel/core": "7.4.3",
    "@babel/node": "7.2.2",
    "@babel/preset-env": "7.4.3",
    "@babel/runtime": "^7.4.3",
    "babel-eslint": "^10.0.1",
    "babel-plugin-module-resolver": "^3.2.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-prettier": "^3.0.1",
    "nodemon": "1.18.4",
    "prettier": "^1.17.0"
  },
  "keywords": []
}