I’ve been a big fan of ESLint and Stylelint for maintaining my front-end code for the past year. Recently, I came across Prettier a code formatter for JavaScript which piqued my interest.

I recently combined the code style of the Airbnb ESLint config with the code formatting of Prettier to create my own config suitable for ES6 code in the browser and written for server-side Node.js applications.

ESLint base config

This config file is for standard JavaScript projects. Firstly, you need to install some packages from npm:

$ npm install eslint eslint-config-prettier eslint-plugin-prettier prettier prettier-eslint
$ (
    export PKG=eslint-config-airbnb;
    npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install "$PKG@latest"
  )

Then add the following code to your .eslintrc.json file:

{
  "extends": ["airbnb", "prettier"],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  }
}

Use with Visual Studio Code

I also love this setup because I can use the “Format on Save” option in Visual Studio Code (my editor of choice), thanks to the ESLint plugin.