ESlint in LWC

 Before we jump into "ESlint" let me explain about "linter"

what is linter ?

A linter is a tool that identifies issues in your code. Running a linter against your code can tell you many things:

• if the code adheres to a certain set of syntax conventions
• if the code contains possible sources of problems
• if the code matches a set of standards you or your team define

It will raise warnings that you, or your tools, can analyze and give you actionable data to improve your code. ESLint is basically a linter for the JavaScript programming language, written in Node.js

ESlint for LWC

In salesforce ESlint is available by default with the Lightning Web Components extension .Salesforce provides specific ESLint rules out of the box for you as a Lightning Web Component developer so that you can write great code. And if you make a mistake, the linting rules help you see it before you deploy your code.

probably you may remember when create a new project, in lwc metadata folder there is file called ".eslintrc" which define the salesforce specific linting rules.




you may have experienced with the Restricted async operation 'setTimeOut' in LWC. lets take a look into below code snippet which is restricted by ESlint due to performance impact.

 

1 2 3 4 5

connectedCallback() { setTimeout(() => { this.variable = true; }, 3000); }

The ESLint for Lightning Web Components will complain about setTimeout and setInterval. if you wanted to use it for any reason you can stop this by adding a comment before the line of code .

 

1 2 3 4 5 6

// eslint-disable-next-line @lwc/lwc/no-async-operation connectedCallback() { setTimeout(() => { this.variable = true; }, 3000); }

Hope you find this post informative ..