DEV Community

loading...
Cover image for A quick guide to setup Eslint with Airbnb's style guide and Prettier

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

bigyank profile image Bigyan Koirala ・Updated on ・4 min read

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
Enter fullscreen mode Exit fullscreen mode

Now we are ready! Install Eslint with following command.

npm install eslint --save-dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

Alt Text

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

Alt Text

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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: {
  },
};
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

Prettier

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

npm install --save-dev --save-exact prettier
Enter fullscreen mode Exit fullscreen mode

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

echo {}> .prettierrc.json
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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,
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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: {},
};
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (3)

pic
Editor guide
Collapse
joshuamwolfe profile image
Joshua Wolfe

Is something we'd for each project or globally?

Collapse
peter33 profile image
Petermhen

I think the eslint and prettier packages are installed per project, but the VS code plugins for both essentially act globally.

Collapse
peter33 profile image
Petermhen • Edited

I think the eslint-config-prettier package should be installed as a dev dependency via
npm i --save-dev eslint-config-prettier

Thanks for this helpful guide Bigyan.