NEW! Root Cause - Open Source Project for Puppeteer and Playwright MORE

Writing Your First Custom Stylelint Rule

At Testim.io we care about code quality and UX. For this reason, we use various tools that make development easier and more…

By Omri Lavi,
  1. Declaring and creating the plugin
  2. Adding a rule to the plugin
  3. Implementing the linting function along with auto-fix support
  4. Integrating the plugin with your project’s Stylelint configuration

Background story

Our custom rule in action
In the following paragraphs, we will describe the steps for adding a custom rule of your own. As an abbreviated example, we’ll write a rule which will replace the expression blue with the hex value #0000FF.

Writing the Plugin — First Steps

 

Creating a Plugin

Adding a Rule to the Plugin

Performing the Linting

  1. “Walk” through the AST (the parsed CSS nodes). Use one of the root.walk methods for this task.
  2. Detect invalid nodes.
  3. Report these nodes (or fix them, depending on the “fix” flag).

 

Custom Rule Integration


 

That’s it! You and your team can now enjoy your custom linting errors.

Image for post

Summary

Further reading

Testim's latest articles, right in your inbox.

From our latest feature releases, to the way it impacts the businesses of our clients, follow the evolution of our product

Blog Subscribe