A quick guide to setup Eslint with Airbnb's style guide and Prettier

#eslint #prettier #airbnb #beginners

Eslint and Prettier are probably the most used tools in web development. Eslint helps to find and fix problems in your JavaScript code whilst Prettier is an opinionated code formatter.

Eslint is very flexible linter. You can customize it as per your needs. But for a beginner, the options provided by Eslint can be overwhelming. And this is where style guide provided by AirBnB comes in handy.

Note: There are other popular styles guide too like Standard Style guide and Google's Style Guide for JavaScript. The process is same if you want to follow these guides instead.

Eslint

To install Eslint we will use npm package manager which comes alongside with Node. Type the following command to create a package.json file with default configuration:

npm init -y

Now we are ready! Install Eslint with following command.

npm install eslint --save-dev

Eslint requires a configuration file to enforce rules. A easy way to create a configuration file is to simply type the following command

npx eslint --init

This command will give you few options to choose from.
We'll go with the third options.

Now press enter and choose other options as per your need. Until you come across this option,

Here, go with the first option and then choose the Airbnb's style guide next.

Depending upon what you choosed, your package.json file will look like this:

{
  "name": "eslint",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^7.13.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1"
  }
}

This command also creates a eslint configuration file on your working directory.

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {
  },
};

Eslint is finally ready to find and fix some bugs. Now you can run Eslint from your terminal but there is an easier option. Install the eslint extension on VS Code which will directly complain about your mistakes right on your text editor.

Prettier

Time to bring prettier on the mix, type the following command to install prettier locally

npm install --save-dev --save-exact prettier

Then, create an empty config file to let editors and other tooling know you are using Prettier:

echo {}> .prettierrc.json

This json file holds rules that prettier will follow to format your code. The basic configuration looks like this:

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

You can use the Prettier from the commandline, but you get the most from Prettier by running it from your editor. Let's install Prettier extension for VS Code. After the installation we've to ensure that all our JS file gets formatted by Prettier, so we'll add the following lines in the settings.json file of VS Code.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Now we'll configure VS Code to format our code on each save. On the same settings.json file add these lines:

"editor.formatOnSave": true,

Final Boss

We are nearly done but we've to install one extra npm package i.e eslint-config-prettier to make Eslint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier. Go ahead and install the package.

npm i eslint-config-prettier

Then, add eslint-config-prettier ( or just prettier) to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: ['airbnb-base', 'prettier'],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {},
};

That's it!! This was the final step. Now both the eslint and prettier are configured properly. Eslint will complain about the mistakes on your code and Prettier will format it flawlessly.

Conclusion

This is just tip of the iceberg. There are hundreds of Eslint Rules that you can play with. You can also find additional Eslint linting rules for Node, React, Vue, Jest and much more. There is even a package called eslint-plugin-security that'll help find Security holes on your JavaScript code. I hope this post helped you get started with Eslint and Prettier.