Setting up ESLint + Standard + Prettier + Babel for my Hapi.js Starter Project

Photo by Anastasia Yılmaz on Unsplash

Today, I am going to create my Node.js starter/boilerplate inspired by Hackathon Starter but before archive that goal, I have a lot of thing to setup. e.g. ESLint + Standard for check and verify my code style, Prettier for code auto format and Babel for transpile my code (ES6+) to ES5 and Jest for testing library.

Initial Project

First step, I initial project with yarn that will automatically create package.json for you

yarn init

Then, I install Hapi.js and ecosystems

yarn add hapi joi boom inert vision hapi-auth-jwt2

EditorConfig

The first one to setup is EditorConfig, that’s make sure you can open a source code with the same space or tab in different machine or IDEs/Text Editor

My .editorconfig file is to set JavaScript file to 2 space for indent and the rest is 4 space per indent.

root = true
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 4
[*.js]
indent_style = space
indent_size = 2

Prettier

Install Prettier with yarn

yarn add prettier --dev

And create .prettierrc file

{
  "semi": false,
  "singleQuote": true
}

and also add script for format code with prettier to package.json like this

{
  "scripts": {
    "p": "prettier --write 'src/**/*.js'",
    "p:w": "onchange 'src/**/*.js' -- prettier --write {{changed}}"
  }
}

I need to install onchange for watch a file changed.

yarn add onchange --dev

ESLint

Next step, I setup my ESLint with Standard, I created .eslintrc file with:

{
  "extends": [
    "standard",
    "prettier",
    "prettier/standard"
  ],
  "plugins": [
    "import",
    "prettier",
    "standard"
  ],
  "parserOptions": {
    "ecmaVersion": 2017 
  },
  "env": {
    "node": true,
    "es6": true,
    "jest": true
  },
  "rules": {
    "space-before-function-paren": 0,
    "new-cap": 0,
    "prettier/prettier": 2
  }
}

And install dependencies for Prettier and Standard work fine together.

yarn add eslint eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-standard --dev

Error log when you run `yarn lint`

Babel

Add script below to .babelrc file

{
  "presets": ["env"],
  "plugins": ["transform-runtime"]
}

and install dependencies for Babel

yarn add babel-core babel-preset-envbabel-plugin-transform-runtime --dev

Server.js

and then my server.js look like this:

import Hapi from 'hapi'

const server = Hapi.Server({ port: 5555 })

const init = async () => {
  server.route({
    method: 'GET',
    path: '/',
    handler: (req, h) => ({ message: 'Hello Hapi.js' })
  })

  await server.start()
  console.log('Server is running')
}

init()

Jest

Install Jest for testing

yarn add jest babel-jest --dev

Next step setup Jest, normally you don’t need to setup anything but If you want more configuration you have to create jest.config.js (For my case I setup Code Coverage) like this

module.exports = {
  collectCoverage: true,
  collectCoverageFrom: [
    "src/**/*.js",
    "!**/node_modules/**"
  ],
  coverageDirectory: "coverage"
}

I collect a files inside src/**/*.js for code coverage, Jest will generated code coverage to coverage folder automatically.

Conclusion

Lastly, combined together with scripts in a package.json file

"scripts": {
  "lint": "eslint src --color",
  "build": "babel src --out-dir dist --ignore node_modules",
  "p": "prettier --write 'src/**/*.js'",
  "p:w": "onchange 'src/**/*.js' -- prettier --write {{changed}}",
  "test": "jest"
}

Happy Coding ❤️