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
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”.
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.
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.
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.