ESLint- A vital tool for developers
Weird right? how does the image correlate with ESlint someone may ask, well by the end of this article, you should have understood the connection between the image and ESLint. In this article, am going to talk about ESLint, how I have come to like and add ESlint to my tool belt, its functionalities and benefit and how to use it in a project. Trust me this article only covers the basics and meant for beginners. But if you already have a knowledge about how to use ESLint, feel free to use this as a refresher and if you want to add to this, please drop a comment in the comment box below.
Shall we? Lets get started
What’s ESLint?
According to their website, ESLint is an open source JavaScript linting utility and it is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making the code more consistent and avoiding bugs.
If that sounds gibberish to you, its fine here’s a definition in a more friendly language. ESLint simply is a tool that helps developers to style their codes neatly in a set of consistent rules and pattern. Firstly, you are setting up rules and then ESlint underlines places where the rules are broken. ESlint also helps a team of developers to follow unified rules increasing readability and purity of code. You see how the pink flower in the opening image has a consistent pattern from a single strand to a single bunch and then to a group of them? that’s how ESLint makes your code. It makes it beautiful. It’s that simple!
For example, developers have different ways of indenting their codes. Some use tabs while others use space. But ESLint help developers maintain a certain set of rules and patterns.
The primary reason ESLint was created was to allow developers, create their own linting rules. ESLint is designed to have all rules completely pluggable. The default rules are written just like any plugin rules would be.
How is it used?
Here’s how to install it and use it within your project. You’ll need to use npm as the package manager. So first of all, you need to move to your project folder. Using the terminal, simply write npm install eslint — save. Remember you should have your package managers installed and you package.json initialized.
As soon as the packages have been installed, you need to create ESlint config file, where you will set up all your rules, for this write eslint — init.
Lookout for some questions, go ahead and answer them, ESlint will set up some rules based on the answers you choose. Be sure you have chosen 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 it you can see an object with properties such as “env”, “extends”, “parserOptions”, “rules”.
“env”
You can use this to setup environment you shall be working in. For example, 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. Set Es6: true so that you can use the amazing Es6 features.
“extends”
This feature allows you to use style guides of other people. For the project am currently working on, I am using 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.
The next thing to do is to install airbnb-base config itself using this command — npm install eslint-plugin-import — save.
Include “extends”: “airbnb-base” to your config file to extend airbnb-base rules.
I totally recommend VScode as an editor and if that’s what you are using, you can simply install the 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 scary underlines inside your JavaScript code. Not a problem, you can find the problems and adjust it yourself or you can also click on the red lines and a yellow bulb should appear. Click on it and you’ll see automatic fixing options, click the one you should and your problems should be solved else, keep searching ;-).
Conclusion
At this point in time, you should now understand the similarities between ESLint and the opening flower image. ESLint is a really powerful tool for developers to add to their tool belt. Am not a pro yet and sometimes the red lines can just be much and scary, but the moment you identify and fix the bugs, your entire code should be clear and consistent. To dive deeper into the awesome features of ESLint, get started here. Thanks for sticking with me till the end of this brief tutorial. If you found this helpful show this by your claps and for more additions and feedback, please write in the comment box below. Do check out a previous article I discussed a tool called CSS Flex-box. I look forward to exploring other programming tools and sharing them here. So stay tuned for the next.
