8 ESLint rules you want to turn on in your project! 📚

In this article, I will introduce some useful ESLint rules that can extend your current configuration and provide better and more secure code.

8 ESLint rules you want to turn on in your project! 📚
Photo by Emile Perron / Unsplash

Introduction

Setting up ESLint can be difficult due to the many rules and packages available in the market. Many of them provide a pre-configured configuration file that can speed up the process.

In this article, I will introduce some useful ESLint rules and packages that can extend your current configuration and provide better and more secure code.

Security

In this section, I will highlight the ESLint rules related to security and vulnerabilities in your codebase. Finding and fixing vulnerable areas in your code will improve quality and, more importantly, reduce most popular software attacks.

eslint-plugin-security
Source: https://github.com/nodesecurity/eslint-plugin-security#readme
Description: This rule identifies potential security hotspots, such as a dangerous regular expression, square bracket notation, or child process instances.

eslint-plugin-sonarjs
Source: https://github.com/SonarSource/eslint-plugin-sonarjs
Description: This is SonarJS rules for ESLint that detect bugs and suspicious patterns.

eslint-plugin-xss
Source: https://github.com/Rantanen/eslint-plugin-xss
Description: This rule tries to find the XSS problems in your codebase that are the most common attacks.

eslint-plugin-no-unsanitized
Source: https://github.com/mozilla/eslint-plugin-no-unsanitized
Description: This rule will find dangerous HTML assignment without sanitization.

💡
For sanitization HTML, I recommend great NPM package DOMPurify.

Code quality

In this section, I will cover some rules and packages that can be useful for writing good quality code.

eslint-config-airbnb
Source: https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
Description: This is a pre-configured package that provides Airbnb's .eslintrc. It is also one of the famous configuration with a lot of stars on GitHub.

eslint-plugin-unicorn
Source: https://github.com/sindresorhus/eslint-plugin-unicorn
Description: Another package that provides more than 100 powerful ESLint rules.

eslint-plugin-compat
Source: https://github.com/amilajack/eslint-plugin-compat
Description: If you are concerned about browser support, this package will be of help.

eslint-plugin-jsx-a11y
Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
Description: This package will be helpful during working on accessibility.


Thanks for reading ♥️♥️

If this article was helpful, please leave a comment or 👍