DEV Community

loading...
Cover image for Add Eslint, Prettier, and Airbnb style guide to your project.

Add Eslint, Prettier, and Airbnb style guide to your project.

saurabhggc profile image Saurabh Updated on ・3 min read

Why even use ESLint.

As we all know Javascript is a dynamic language i.e, there is a lot of room to make errors and write bad code. So to prevent some of these errors we have ESLint with us.

Creating a Project

I assume you have nodejs installed on your system.
Now open your terminal.

Let's create a sample vite project in which we are going to install ESLint (NOTE: You can add ESLint in any javascript project).

You can create a vite project by running the following commands.

npm init @vitejs/app eslint-app --template vanilla
cd eslint-app
npm i
Enter fullscreen mode Exit fullscreen mode

ESLint

ESLint is a Javascript tool used for linting common errors and anti-patterns in your code. It is used by javascript devs all around the world.

Here is a graph from npmtrends.com

Alt Text

After reading this post you are going to be one of those devs.

Installing ESLint

Now we can add ESLint to our app. It is as easy as running

npx eslint --init
Enter fullscreen mode Exit fullscreen mode

Now ESLint will ask you some questions related to your app.

Alt Text

Eslint has generated a .eslintrc.js file, this file is the file used to configure ESLint.

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["airbnb-base"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {},
};
Enter fullscreen mode Exit fullscreen mode

Airbnb

When we set ESLint in our app we can choose to use the Airbnb style guide.

Alt Text

So what is the Airbnb style guide. Airbnb style guide is a set of guidelines and some common best practices for writing good code.

The Airbnb style guide is one of the most stared style guides on Github.

Now finally let's add prettier

Prettier another tool used by developers to format their code.

Don't get confused between ESLint and prettier, ESLint is a linter that finds errors in your code on the other hand prettier is a code formatted.

Installing Prettier

So to add prettier to our project run the following commands

npm i eslint-config-prettier eslint-plugin-prettier prettier -D

Enter fullscreen mode Exit fullscreen mode

Now let's add prettier to .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["airbnb-base", "prettier"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};
Enter fullscreen mode Exit fullscreen mode

Some Pro tips:

Here are some tips to make your experience better.

1: Install prettier and ESLint extension for VSCode

Alt Text

2: Add the following lines in your setting.json (VSCode only).

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
Enter fullscreen mode Exit fullscreen mode

This automatically formats and fixes all fixable errors in your code on save.

3: Add a lint and format script in package.json

  // ...
  "scripts": {
    "lint": "eslint --fix main.js",
    "format": "prettier -w ."
  }
  // ...
Enter fullscreen mode Exit fullscreen mode

NOTE for React Apps

You might have some problem (I had some) if you choose to use react as a framework while setting up ESLint and then add prettier then.

Alt Text

It is because both react style guide and prettier try to format and lint your code.

So, I recommend removing the react plugin from the .eslintrc.js (don't remove prettier) because the eslint-config-airbnb (Airbnb's style guide) also has rules and guidelines for React.

Alt Text

Conclucsion

Writing maintainable javascript is hard but with help tool
like ESLint, prettier, and typescript, we can make it a lot easier.

Had any problem comment down below?

Discussion (0)

pic
Editor guide