ESlint introduction

This article was made for beginners in JS world as me, I have problems installing ESlint to my project. When I have found proper way to install it, I decided to save other beginner’s time, enjoy!

I am making my first steps into a huge front-end development world and due to it I haven’t been familiar with ESlint yet. Few days ago my mentor told me about ESlint and I was astonished to it’s impact on development process. As a style guide base I will use airbnb style guide. It is considered to be the most popular style guide and it has got huge community.This article is named as Introduction, so I will tell you basic things about ESlint.

Do you have developers among your friends? Maybe you are lucky to be in a team of developers? If the answer is yes, you should be familiar with the situations when each developer uses different style guide during the development. Begining from a simple things such as spaces vs tabs battle

tabs vs spaces

and finishing with annoying cases

Familiarly? ESlint solving all these problems. Firstly, you are setting up rules and then ESlint underlines places where the rules are broken. Summing up, ESlint helps a team to follow unified rules increasing readability and purity of code.

Now I will tell you how to install and begin using ESlint within your project. I will use npm as a package manager. Firstly, you need to move to your project folder using terminal and simply write npm install eslint — save

As soon as packages have been installed, you need to create ESlint config file, where you will setup all your rules, for this write eslint — init

You will be asked some questions, go ahead and answer them, ESlint will setup some rules based on your answers. Be sure you have choosed JSON as a format of your config file. After that you will be able to see a new file in your project folder named as .eslintrc.json

Inside of it you can see an object with props “env”, “extends”, “parserOptions”, “rules”.

“env”

Using it you can simply set up environments you are using. For instanse, use browser: true if you write your project for browsers or node: true if you are working on a server side using node.js or both these rules. Moreover, I hope you will add es6: true to use amazing es6 features.

“extends”

This feature allows you to use config of other people. There are lots of public configs for ESlint which you can use “from box”, simply installing it with npm and write extends: config-name. As I mentioned before, I will use airbnb as a foundation of my config. Airbnb-base contains all of airbnb ESLint rules, including ECMAScript 6+. It requires eslint which we have already installed and eslint-plugin-import. Eslint-plugin-import supports ES6+ export/import features, to install it write npm install eslint-plugin-import — save.

Next step is to intsall airbnb-base config itself using this command - npm install eslint-plugin-import — save.

Add this line to your config file to extend airbnb-base rules.

In addition, some of IDE’s require some changes inside settings to support ESlint usage. In VScode you can simply install eslint plugin. After all these steps you are ready to use ESlint inside your project and if you do everything right, you will see lots of red underlines inside your Javascripts code.

Moreover, ESlint have got amazing documentation about rules and I will highly recommend to visit their documentation. Thanks for reading, write comments, I will be glad to answer them.