Advanced linting rules with ESLint

Rate this content
Bookmark

This talk will explore more advanced ways to write static analysis rules in ESLint using ESLint's control flow APIs. I will quickly explain what a control flow graph is and how you can use it to find issues in your code. I will show you how to detect when a value is assigned to variable uselessly and other logical problems you can detect using this technique.

10 min
21 Sep, 2023

Video Summary and Transcription

Tibor Blanesy from Sonar presents advanced techniques for linting with ESLint, including the use of ControlFlowGraph to detect errors in code. The algorithm is based on liveness analysis, which identifies live variables at any point in the program. Additionally, the talk covers the computation of block sets using the difference between outset and kill set unionized with genset.

Available in Español

1. Advanced Techniques for Linting with ESLint

Short description:

Hello! My name is Tibor Blanesy, I work on JavaScript static analysis at Sonar, and in this talk I would like to show you some more advanced techniques for linting with ESLint. Let's have a look at a function that returns a range of numbers between two values passed in the argument. If the argument is not provided, it will assume that the range should start from zero. We will use a representation of code called ControlFlowGraph to detect errors in the code. The base of the algorithm is liveness analysis, which tells us which variables are live at any given point in the program.

Hello! My name is Tibor Blanesy, I work on JavaScript static analysis at Sonar, and in this talk I would like to show you some more advanced techniques for linting with ESLint. Let's have a look at the following function, which I have found in the VS Code codebase. This function returns a range of numbers between two values passed in the argument.

If the argument is not provided, it will assume that the range should start from zero. When we use some static analysis tools, such as SonarQube, it will quickly show us that there is an issue with this code. For some reason, the value assigned to the variable from is never used later in the code. The logic handling the arguments is actually duplicated.

These kind of errors, when value written to the variable is not used is called a dead store. SonarQube provides following explanation why this is an issue. A dead store happens when local variable is assigned a value that is not read by any subsequent instruction. Calculating or retrieving a value only to then overwrite it or throw away could indicate a serious error in the code. Even if it's not an issue, it is at best a waste of resources. Therefore over-calculated values should be used. In the following couple of minutes I will try to explain how this kind of errors can be detected with static analysis.

First, we will use a representation of code called ControlFlowGraph. In this representation, node called basic blocks contains only statements which are executed sequentially. Jumps are represented as arrows between the blocks. So here we have a ControlFlowGraph for the function I showed earlier. We will only show part of the graph, which is relevant for the issue, to keep it small. In the next slide, I have the same ControlFlowGraph annotated in red, with events which are provided by ESLint when we write a custom rule. ESLint API provides two objects, CodePath, which represents the ControlFlow of the whole function, and ControlPathSegment for each basic block. ESLint then fires events for the start and end of the CodePath, and for the start and end of each basic block, which is a CodePathSegment.

So in the code, what we will write is the following object, which contains an event handler for the CodePath events. We don't have the time to go into implementation details, but in the following slides, I will quickly describe the basics of the algorithm. The base of the algorithm is liveness analysis, which tells us which variables are live at any given point in the program. The variable is live when value it is holding might be needed in the future. For each basic block, we will compute four sets of variables. The begin set with variables that are being read in the basic block, kill set, which contains variables that are being written in the basic block, inset with variables which are live at the beginning of the block, and outset with variables which are live at the end of the block. To compute these sets we will use following two rules. Outset of the current block is union of all insets of its successors.

2. Computing Block Sets

Short description:

And inset of the current block is a difference between outset and kill set unionized with genset. We will compute the values of these sets by starting at the bottom of the graph and moving to the predecessors of each block.

And inset of the current block is a difference between outset and kill set unionized with genset. Now I will go through the basic blocks of the function I showed earlier, and we will compute the values of these sets. So we will start at the bottom of the graph to compute the sets of this basic block. So we will assume that from and to are being read later in the function, so genset is set to from and to and we will ignore that there is something written so kill set will be empty. From this we can compute the inset as being from and to and now we will move to the predecessors of this block.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
You will learn about one of the most popular package managers for JavaScript and its advantages over npm and Yarn.A brief history of JavaScript package managersThe isolated node_modules structure created pnpmWhat makes pnpm so fastWhat makes pnpm disk space efficientMonorepo supportManaging Node.js versions with pnpm
React Advanced Conference 2021React Advanced Conference 2021
20 min
Advanced Patterns for API Management in Large-Scale React Applications
Top Content
In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner.
React Advanced Conference 2021React Advanced Conference 2021
27 min
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
Top Content
There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
JSNation Live 2021JSNation Live 2021
86 min
Build React-like apps for internal tooling 10x faster with Retool
Workshop
Most businesses have to build custom software and bespoke interfaces to their data in order to power internal processes like user trial extensions, refunds, inventory management, user administration, etc. These applications have unique requirements and often, solving the problem quickly is more important than appearance. Retool makes it easy for js developers to rapidly build React-like apps for internal tools using prebuilt API and database interfaces as well as reusable UI components. In this workshop, we’ll walk through how some of the fastest growing businesses are doing internal tooling and build out some simple apps to explain how Retool works off of your existing JavaScript and ReactJS knowledge to enable rapid tool building.
Prerequisites:A free Retool.com trial accountSome minimal JavaScript and SQL/NoSQL database experience
Retool useful link: https://docs.retool.com/docs
GraphQL Galaxy 2021GraphQL Galaxy 2021
130 min
Everything You Need to Get Your GQL Server Production Ready
WorkshopFree
There are always a lot of questions and conference talks about bringing GraphQL servers into production, but there aren’t a lot of good concrete steps and actions to follow. In the workshop Uri (The founder of The Guild) will walk you through The Guild’s process of bringing GraphQL Server into production.

We will add:

- Powerful Caching
- Logging, Monitoring and tracing
- Security features like Auth, Error Masking, Persisted Operations, Depth and Rate limit
If you are planning to have your GraphQL server running in production, this is a must have workshop for you!