Your First ESLint Rule Applied To Create-React-App
Following along with some "Hello, World!" examples for ESLint has been surprisingly more difficult than I would like to admit. Whether it is the nature of the Abstract Syntax Tree (AST traversal), or setting up the actual rule in a project from start-to-finish, the "Hello, World!" of the ESLint world has not been the most pleasant experience for me.
That being said, light bulbs look to go off on how it works once all of it comes together and the documentation has a moment of clarity for me during this. This project is going to run a small example to demonstrate the clarity I came in hope that following along with it with do the same for you.
You do not need to know React to follow along. I've chosen to use Create React App to demonstrate a working example of getting your first rule up and going. Let's begin!
We are going to create a CRA app and another folder to host our ESLint rules that we will install.
Now that we have our two sub-directories set up (one to house the React app, the other for the rules), let's take a quick jump over the AST Explorer website in order to quickly put together our rule.
I've gone into ASTs before, so I won't cover that topic again, but the long and short of the AST Explorer website is that it will parse code and turn it into an AST based the parser that you choose.
It also has the option to run a transformation. This is amazing for testing codemods or, more appropriately today, ESLint rules.
babel-eslint as the parser, turn on
Transform and select
ESLint from the dropdown as the transformer.
In the top-left box, add the following code:
You will see on the top-right that a tree will be generated. What is even cooler - if you click on a particular word or part of the code, it will highlight the current selection.
We are going to make a rule that does not allow you to use the Lodash package. I have opted to go with this rule as it seems like it will be an easy way to illustrate a rule that everyone can understand.
There are two ways to require the package that we will cover: importing and requiring the lodash package.
We won't go in-depth for locking every lodash module - just the main package.
If you click on the
import part of
import _ from 'lodash', you will see it highlights the
ImportDeclaration block. We can use this knowledge to write our rule.
On the bottom-left box, add the following code:
What we are saying here is to accept a
context param from whatever calls this function, then return an object that follows the visitor pattern. Again, I won't bamboozle you with terms, but essentially this object takes functions that align to the name of the AST node, and once it comes across this node, it will run a function that we can use to apply our rules.
As you saw, the
ImportDeclaration node type from the top-right box is the name of the function from the object we are returning on the bottom-left. In this function, we are telling it to take the node, find the
source.value from it (which you can also read through on the top-right explorer box) and basically "fix" it by replacing it with nothing.
Currently on the bottom right, you should get this back:
fix function is only applying to the
import right now. If we remove the
fix function altogether, the bottom-right will show the following:
Awesome! We can clarify it is working. I am not going to go too deep into replace the
CallExpression, but I've taken a different approach here to replace the matching node's grandparent and that code is as follows:
As an example: here is my screen after adding all of the above:
AST Explorer for ESLint
Now that we have code to replace both the
require statement, let's head back to our code and see it in action!
Adding the rule
Back in our
rules folder, let's run the following:
Right now we are just adding some files to follow conventions.
lib/rules/no-lodash.js, we can alter the code we had in AST explorer to be the following:
function we had before now goes under the exported
create property. There is also a
meta property that I won't go into, but as you can see it provides meta data if you wish.
index.js we can now add the following:
Here we are following more conventions, but the exported object from our
index.js file is that we can add our rules under the
As a last part, ensure that you're
package.json file has the following:
We are now ready to apply this in our React App!
Setting up the new rule in our React App
Let's change into our
demo-app folder and install our package:
This will install our new rule locally.
App.js to simply add
import _ from 'lodash'.
Note: there is no need to install Lodash first. We are simply testing the rule.
To finalise our setup, we need to make some changes to React app's
package.json so that the
eslintConfig key has the following:
We add the
no-lodash from the
eslint-plugin-no-lodash name and then we import the rule
no-lodash that we stated in the
Once that is done, we can now start our app! From the Create React App docs on extending ESLint Config, it states that we need the environment variable
EXTEND_ESLINT to be true, so we can start our app like so:
Once the app starts up, you will see that our rule has successfully been added!
It has been a little bit of a whirlwind to getting this ESLint rule in, but hopefully it can take you from A to Z in a working fashion.
Have a play around afterwards to get a feel, but use tools like AST Explorer to your benefit and, if you are like me, returning to the ESLint docs after getting the working example in will lighten up how it all works and how to apply it all.
Resources and Further Reading
Image credit: Blake Connally
See how you can dynamically create UIs based on React State using dynamic imports, Next.js 10 and React State
Have you ever wanted to build a UI Component Library with TypeScript and React? This blog post will take you through a straightforward set up that uses the bare minimum to get a working component library that you can re-use across your different React projects.
This post will go through a simple example of setting up simple authentication with a user and password to your Next.js website.
This blog post will explore the new internationalised routing in Next.js 10 and how you can use this to your advantage with react-intl for React.js
1,200+ PEOPLE ALREADY JOINED ❤️️
Get fresh posts + news direct to your inbox.
No spam. We only send you relevant content.