Learn how to set up a Custom ESLint Rule in your codebase to check for custom patterns.
I’ll show you how to create a simple rule that checks for class names starting with uppercase letters. I will also introduce you to the high-level concepts of AST and show you how to use Eslint Explorer so you can use it to inspect your own codebase and write the rules you need.
[00:00] I scaffolded a simple React application using React Router 7 and also set up this basic ESLint configuration. We will create a simple ESLint rule that will show us an error when a class name starts with an uppercase letter. Inside the root folder of your project, we will create a file with the same name as we will call the rule. So, it's lowercase classNames.js. From this file, return an object as the default export.
[00:29] Inside this object, specify two keys, meta and create. Inside meta, we will specify some metadata for our rule, such as the rule's name, lowercase class names, type, this can be problem, suggestion, or layout depending on how important your rule is to developers, and finally inside description we explain what our rule does. The create function receives a context argument that we can use to report errors, and it returns an object containing visitor methods. They are triggered when ESLint traverses the abstract syntax tree during linting. The abstract syntax tree is a representation of your JavaScript code that ESLint understands.
[01:15] To see what kind of AST is generated for any kind of JavaScript code, open explorer.eslin.org. In the left panel, you can paste your code and the right panel will show you the ASD generated for that code. Here, I'm looking at the output that's generated for the welcome.tsx file, and as you can see I'm inspecting the function declaration that is exported from this component, and I'm looking at the body, where the body is basically a return statement that returns a JSX element. The tree view is great to explore the AST, but we already know what we are looking for, so it's easier to switch over to the JSON view and search for class name. Class name is a JSX identifier.
[02:04] And if we will be only interested in class name, this would be our visitor method. But we also want to look at the value of class name, because that's where we are going to check for the eventual uppercase class names. So we need the JSX attribute visitor method instead. You can copy this value, head back to your custom rule, and inside this empty object that we returned from create, return now a function with one parameter node. Here node would be basically a React prop, and if you look at welcome.tsx you will see some other props as well, such as method on form and html form on label.
[02:42] So we have to make sure we are only checking the values for class name. And when we run into a react prop that is actually a class name, we grab the value of this prop. Now, because this value will have class names separated by empty spaces, first we have to split the string at the empty space character and then check for each of those values in the array if any of them starts with an uppercase letter. If this is the case, then we use context, the parameter of the create function, to report this error to ESLint. Here we specify on which node the error occurred and what kind of message we want to show to the developer.
[03:28] To use the custom rule locally we have to register it as a plugin inside eslint-config. We will do this inside the plugins object that is just a key value pair of plugins you want to use with eslint. So we specify our plugin's name, and inside a rules object we list all the rules that belong to this custom plugin. In this case, we only have one rule, that's lowercase class names. And as the value of the rule, we have to import basically the rule file.
[03:59] So just add import lowercase class names at the end of your imports. And now you are ready to use this custom rule locally. The only thing we have to specify is at which level the message from this custom rule should be reported. I'm going to use error here, but you can use warn or off to turn the rule completely off. If you switch back to welcome.tsx, you would expect this line to show an error because test is with uppercase.
[04:29] Fortunately, In most editors, you can see the output of your ESLint server. So here, the server tells me that I didn't include the file extension when I imported the module. So let's switch back to the config file and fix this mistake. And also, we shouldn't forget to restart the ESLint server. Usually there is some kind of shortcut inside your editor to do this.
[04:52] And after the server is started, we see the error appear for the line where we have a class name that is uppercase. Case.
