ESLint under the hood

Hey there folks👋, this article is for those who want to know How do ESLint works, This article consists of fundamental knowledge of Linting, also I’ve tried to make it as much interactive as possible😌.

ESLint is a configurable JavaScript linter. It helps you find and fix problems in your JavaScript code. Problems can be anything from potential runtime bugs, to …… from ESLint Doc.

Confused🤯?? let’s break the monotony, as usual🧐:

See this image first to understand lint:

removing lint (textile fibers and other materials)

That’s what Linting does: does not ring a bell🔔? let me tell you in brief. in this image, Linting is an act of removing lint (unwanted fiber on cloth). So in programming also Linting works the same, it analyses👀 the source code, finds the destructive code, or code which is not according to the rule like a linter roller would find a fiber that does not belong to cloth.

Why ESLint?:

if more than 2 people are working on the same project, every developer has his/her own style of writing code, so if developer-A.👩🏼‍💻 looks and tries to understand developer-B’s🧑‍💻 code then this will be an issue😬, so to avoid this we use certain rules (which must be followed by every developer) to have some code consistency and for better understanding.

main reason -

JS is a not compiled language it will not show the programming errors at the compiled time😳, in compiled languages like C, C++ shows errors at compile time, errors like typos, syntax errors, and undeclared variables.

have a look at this code! are both variables the same???🤔

const tool = “ESLint”;  //1
const tool = "ESLint";  //2

of course, yes😌! both lines are identical. but the JS doesn’t know🤷🏻 the difference, and JS will not show us the error at compile time. JS is in chill mode don’t you think??

JS is on Chill mode!

this is how a typical developer👨‍💻 develops without caring about potential errors,

so, you( 👨‍💻 ) + JS = 💥💥💥Errors💥💥💥

How ESlint:

You need to learn the process of parsing before understanding😌 ESlint, go through this article to understand parsing. and brief about AST ( Abstract Syntax Tree)🌲.

ESLint uses Espree JSparser, which converts the code to AST, Want to look at how your code looks like in AST? There is one exercise🦾 for you just write one line/ or whatever JS code you want to write in this link,

AST explorer

you will be amazed 🤯 to see the output,

so why are we talking about the AST ❓, isn’t this article about ESlint😅????

it is because ESlint uses an AST to evaluate patterns🙃,

AST is now ready not what? Linter will traverse/crawls/move🏃🏻‍♂️ to each AST’s nodes, it will use the if else condition on the basis of your rules, for example, if we have added a certain rule like I want semicolon(;) at end of every statement if it finds any error then the formatter would show the error.

Let’s See the practical example of traversing 😌

For example, if we want to make sure that all Literal Definitions in our Array declaration are Integers, we could check for that with the sample script below:

• Why Do We Need ESLint? ➡ for making code more consistent, avoiding bugs, and imposing rules about maintaining the code standard across the project.
• How ESLint works ➡ your code/source code ➡ espree (JSparser) ➡ AST ( Abstract Syntax Tree)🌲. ➡ linter traverses Through each Node of AST to check the rules with the help of the if-else condition. ➡ it will show the error using the formatter.