ESLint Plugins — Part 1

100 ESLint Plugins (over 1,900 rules) for Code Quality, Security, Testing, Performance & More

ESLint

Transitioning from Microsoft technologies like C#, .NET, and Visual Studio to Angular, TypeScript, and JavaScript was a significant shift. In my previous experience, compiler warnings and errors were a natural part of the development process, ensuring that code adhered to Microsoft’s guidelines. The compilation process for production code was rigorous and uniform, enforcing a high standard of code quality across the team.

In contrast, the Angular, TypeScript, and JavaScript ecosystem initially felt unstructured and lenient. Without the same level of compiler enforcement, it was easier to overlook best practices and write inconsistent, hard-to-maintain code. The lack of standardized checks and balances made it feel like the “wild west” of coding.

Our team eventually standardized our collective process streams to include: ESLint, Prettier, Jest, Playwright.

ESLint is an open-source static code analysis tool for JavaScript. It can analyze your code for quality and style with configurable rules. Its architecture includes the ability to insert plugins to enhance the tool’s ability for any number of custom scenarios.

ESLint can be run inside your IDE of choice, and in your CI/CD workflow pipelines. A great backstory article can be found here.

Breaking Changes: Note in April 2024 ESLint version 9.0 was released with many fixes and a new default Flat Configuration file format. Plugins may not have completed updating their product to support the new format, so check their site(s).

Version 9 introduced new architecture to more language-agnostic through the creation of language plugins. Support for Markdown, JSON, and CSS is now available.

November 2023 version 8.53 was released. Though described as a minor update it was notable for deprecating formatting rules. They’ve explained the change here. If you want formatting rules your best bet to begin using Prettier.

Configuring ESLint — Code Styles

How you configure ESLint, and your success implementing, will be driven by you and your team’s agreeing on which rules to enforce. Aside from the default rules ESLint supplies, there are many more you can plugin.

A variety of configurations have be donated to the community. There is a very comprehensive list of ~30 configurations here. Some more notable configurations are:

·Airbnb & Airbnb-typescript based on their style guide.
·ESLint used by the ESLint team.
·Facebook to match their style guide.
·Google
·JavaScript Standard
·Shopify
·XO

ESLint can be found here and 195 rules are here.

Below I’ve gathered a list of ESLint plugins for JavaScript, TypeScript, Angular, HTML and CSS.

1. eslint-plugin-eslint-comments: Enforces rules for ESLint comments. 9 rules here.
2. eslint-plugin-jsdoc: Enforces JSDoc comments and ensures documentation is accurate and consistent.
3. eslint-plugin-prettier: Integrates Prettier with ESLint for consistent code formatting. This plugin helps maintain a uniform style across your project.
4. eslint-plugin-unicorn: Provides additional rules for enforcing best practices and code quality, with over 100 rules. Rules are here.

TypeScript

1. @typescript-eslint/eslint-plugin: Official TypeScript ESLint plugin, providing rules for TypeScript-specific features, such as type checking and interface usage. 130 rules here.
2. @typescript-eslint/parser: This parser is required to use the @typescript-eslint/eslint-plugin.
3. eslint-plugin-etc: Provides additional rules for enforcing best practices and code quality in TypeScript projects. 14 rules here.
4. eslint-plugin-sonarjs: From the same people who created SonarQube. Adds rules to detect code smells and vulnerabilities. Contains:
   · Sonar Rules: 260
   · ESLint Rules: 112
   · Enhanced ESLint Rules: 69
   · Total: 441
5. eslint-plugin-tsdoc: Enforces TSDoc comments and ensures documentation is accurate and consistent.
6. eslint-plugin-typescript-sort-keys: Enforces sorting of object keys in TypeScript. 2 rules.

Code Quality and Best Practices

1. eslint-config-clean-typescript: Enforce classic JavaScript features in TypeScript codebase by banning excessive keywords.
2. eslint-plugin-array-func: Enforces best practices for array functions. 8 rules. 8 rules here.
3. eslint-plugin-boundaries: Checks architecture boundaries between elements. 7 rules here.
4. eslint-plugin-compat: Enforces compatibility with different browsers and environments.
5. eslint-plugin-depend: This is an ESLint plugin to help suggest alternatives to various dependencies. Primarily, it will help detect dependency tree bloat and redundant polyfills.
6. eslint-plugin-deprecate: Helps identify deprecated features in your code. 3 rules.
7. eslint-plugin-exception-handling: This plugin only checks for functions that might throw exceptions. 3 rules here.
8. eslint-plugin-fp: Adds functional programming rules to your ESLint configuration. 17 rules here.
9. eslint-plugin-functional: Will disable mutation and promote functional programming in JavaScript and TypeScript. 20 rules here.
10. eslint-plugin-immutable: Disable all mutation in JavaScript.
11. eslint-plugin-import: Supports ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. 45 rules here.
12. eslint-plugin-import-x: A fork of `eslint-plugin-import` that aims to provide a more performant and more lightweight version of the original plugin. 45 rules here.
13. eslint-import-resolver-typscript: Adds TypeScript support to eslint-plugin-import (Or eslint-plugin-x for faster speed).
14. eslint-plugin-new-with-error: Require `throw new Error()` and not `throw Error()`.
15. eslint-plugin-no-loops: Disallow use of loops (for, for-in, while, do-while, for-of). There are better, cleaner/clearer options.
16. eslint-plugin-no-use-extend-native: Prevent use of extended native objects.
17. eslint-plugin-node: Provides rules for Node.js-specific features. 26 rules.
18. eslint-plugin-prefer-optional-chaining: Enforces correct usage of optional chaining operator (?.).
19. eslint-plugin-prefer-object-spread: Encourages the use of the object spread syntax ({…obj}) over Object.assign() for combining objects. This can lead to more concise and readable code.
20. eslint-plugin-promise: This plugin has a rule called promise/catch-or-return that enforces handling promise rejections either by calling .catch() or returning the promise. 17 rules here.
21. eslint-plugin-proper-arrows: The proper-arrows ESLint plugin provides rules that control the definitions of => arrow functions, restricting them to a narrower and more proper/readable form. 5 rules.
22. eslint-plugin-pure: Enforce rules to make your code purely functional by disallowing some language constructs.
23. eslint-plugin-regexp: Finds RegExp mistakes and RegExp style guide violations. 82 rules here.
24. eslint-plugin-require-path-exists: Ensures require() paths exist. 3 rules here.
25. eslint-plugin-toplevel: Disallow side effect at module toplevel. 3 rules here.
26. eslint-plugin-unused-imports: Find and remove unused es6 module imports. Supports 2 rules; no-unused-imports and no-unused-vars.

Security and Vulnerability Detection

1. eslint-plugin-no-secrets: Helps detect and prevent secrets in your code. Very configurable.
2. eslint-plugin-pii: Personally identifiable information (PII) is information that, when used alone or with other relevant data, can identify an individual. The plugin reviews comments and string literals enforcing 4 rules:
   · no-email — no email
   · no-dob — no birth date
   · no-ip — no IP address
   · no-phone-number — no phone numbers
3. eslint-plugin-security: Provides rules for detecting security vulnerabilities in HTML, JavaScript, and CSS. 14 rules here.
4. @types/eslint-plugin-security: This package contains TypeScript type definitions for eslint-plugin-security.
5. eslint-plugin-security-node: ESLint plugin containing Node.js security rules to identify potential threats and prevent attacks. 22 rules here.
6. eslint-plugin-sql: Detects potential SQL injection vulnerabilities. 6 rules here.
7. eslint-plugin-sql-injection: Detects potential SQL injection vulnerabilities, by looking for string concatenation.
8. eslint-plugin-xss: Detects potential cross-site scripting (XSS) vulnerabilities. 2 rules.

Performance and Optimization

1. eslint-plugin-optimize-regex: Optimizes regular expressions for performance.

Testing and Code Coverage

1. eslint-plugin-ava: Enforces best practices for AVA tests. 27 rules here.
2. eslint-plugin-cypress: Enforces best practices for Cypress tests. 10 rules here.
3. eslint-plugin-istanbul: Enforces code coverage best practices. 2 rules here.
4. eslint-plugin-jest: Enforces best practices for Jest tests. 60+ Rules are here.
5. eslint-plugin-jest-dom: Provides rules for testing DOM-related code with Jest. 12 rules.
6. eslint-plugin-jest-extended: Provides additional rules for Jest tests. 5 rules here.
7. eslint-plugin-jest-formatting: Provides ESLint rules for jest formatting (auto-fixable where possible) to ensure consistency and readability in jest test suites. 8 rules.
8. eslint-plugin-mocha: Enforces best practices for Mocha tests. 25 rules here. 24 rules here.
9. eslint-plugin-playwright: Provides rules to help you write better tests with Playwright. 48 rules here.
10. eslint-plugin-testing: Provides general rules for testing, applicable to both Jest and Playwright.
11. eslint-plugin-testing-library: Provides rules for testing React components with Jest and React Testing Library. 26 rules.

Accessibility and Best Practices

1. eslint-plugin-jsx-a11y: Enforces accessibility guidelines (WCAG) within your JSX code, making your applications more inclusive for users with disabilities. 39 rules.

Miscellaneous

1. eslint-formatter-azure-devops: An ESLint formatter for Visual Studio Team Services and Team Foundation Server
2. eslint-plugin-babel: Provides rules for Babel-specific features. 7 rules here.
3. eslint-plugin-compat: This plugin helps you ensure your code is compatible with older browsers or environments by checking for the use of features that might not be supported.
4. eslint-plugin-diff: Run ESLint on your changes only.
5. eslint-plugin-filenames: This plugin allows you to enforce specific naming conventions for your files, which can improve code organization and readability. 2 rules here.
6. eslint-plugin-header: Enforces consistent file headers.
7. eslint-plugin-json: This plugin allows ESLint to lint JSON files natively, providing rules and documentation specific to JSON linting. 19 rules.
8. eslint-plugin-license-header: Enforces consistent license headers.
9. eslint-plugin-markdown: this plugin enables linting of Markdown files and includes Markdown-specific rules.
10. eslint-plugin-mdx: Provides rules for enforcing Markdown and MDX best practices. Rules here.
11. eslint-plugin-node: Adds rules for Node.js projects. 26 rules.
12. eslint-plugin-react: Provides linting rules specifically for React components, such as prop type validation and JSX usage. 102 rules.
13. eslint-plugin-react-hooks: Enforces best practices for React hooks.
14. eslint-plugin-react-native: Enforces best practices for React Native. 7 rules.
15. eslint-plugin-requirejs: Adds rules for RequireJS projects. 22 rules.
16. eslint-plugin-styled-components: (If using styled-components) Enforces rules for styled-components, ensuring consistent styling and avoiding common pitfalls.
17. eslint-plugin-styled-components-a11y: Adds the ability to lint styled components according to the rules outlined in eslint-plugin-jsx-a11y.
18. eslint-plugin-vue: Provides rules for Vue-specific syntax and best practices.
19. eslint-plugin-yml: Enforces best practices for YAML files. 28 rules.

Angular

Code Quality and Best Practices

1. angular-eslint: Monorepo for all the tooling related to using ESLint with Angular. Includes the following:
   • @angular-eslint/builder
   • @angular-eslint/eslint-plugin
   • @angular-eslint/eslint-plugin-template
   • @angular-eslint/schematics
   • @angular-eslint/template-parser
   • @angular-eslint/test-utils
   • @angular-eslint/utils
2. @angular/compiler-cli: Angular’s compiler options and utilities for Angular projects.
3. @angular-eslint/builder: Provides an Angular CLI builder for Angular projects.
4. @angular-eslint/eslint-plugin: Official Angular ESLint plugin, providing rules for Angular-specific features. 37 rules here.
5. @angular-eslint/eslint-plugin-template: Provides rules for Angular template files. 29 rules here.
6. @angular-eslint/template-parser: A custom parser for ESLint which allows you to write lint rules and run linting using ESLint on Angular templates.
7. @angular-eslint/test-utils: A set of testing utility functions and types which are used across the @angular-eslint packages and are helpful when testing your own custom ESLint rules for Angular workspaces.
8. @angular-eslint/utils: Is a set of utility functions and types which are used across the @angular-eslint packages.
9. eslint-plugin-angular: Provides additional rules for enforcing best practices and code quality in Angular projects. 55 rules here.
10. eslint-plugin-ngx-eslint: Provides additional rules for Angular development. Includes rule destroy-service-provider.

Testing and Code Coverage

1. eslint-plugin-jasmine: Provides rules for testing Angular applications with Jasmine. 23 rules here.
2. eslint-plugin-protractor: Provides rules for end-to-end testing Angular applications with Protractor. 38 rules here.

HTML

Code Quality and Best Practices

1. @html-eslint/eslint-plugin: A comprehensive plugin for linting HTML files, providing rules for better code quality and consistency. 45 rules here.
2. eslint-plugin-html: Lint and fix inline scripts contained in HTML files. 7 rules.

Security and Vulnerability Detection

1. eslint-plugin-no-unsanitized: Developed by Mozilla, this plugin disallows unsafe innerHTML, outerHTML, insertAdjacentHTML, and similar methods without proper sanitization. It ensures that any HTML content is properly escaped to prevent XSS attacks2.

CSS

Code Quality and Best Practices

1. Eslint-css: Plugin lint CSS files using ESLint. 4 rules here.
2. eslint-plugin-css: This plugin provides rules to verify CSS definition objects and supports Vue and JSX (React). It helps catch wrong usage of CSS definition objects and provides hints for corrections. 13 rules.
3. eslint-plugin-css-modules: The plugin lets you know if you are using a non-existent css/scss/less class in js or if you forgot to use some classes which you declared in css/scss/less. 2 rules.
4. typescript-plugin-css-modules: Provides type information to IDEs and any other tools that work with TypeScript language service plugins.

Useful URLs

TypeScript: https://www.typescriptlang.org/
Angular: https://angular.dev/
CSS: https://www.w3.org/Style/CSS/Overview.en.html
ESlint: https://eslint.org/
Prettier: https://prettier.io/
Awesome ESLint: https://github.com/dustinspecker/awesome-eslint

https://github.com/EvgenyOrekhov/eslint-config-hardcore The most strict (yet practical) ESLint config. 53 plugins. 1342 rules. React, Vue, Node, and pure JS/TS.

Conclusion

I hope you find this list helpful. Please let me know…did I miss a favorite plugin of yours? Did you find any plugin particually usefull? Or conversely useless? Let me know.

Other Plugin Articles
2 — Prettier, Jest & Playwright: 110 Plugins for JavaScript/TypeScript Testing (end-to-end and unit), Code Formatting.
3 — Visual Studio Code: 36+ AI Assistant Extensions plus 85+ Extensions for JavaScript/TypeScript/Angular and more.
4 — Stylelint: Lints CSS and CSS-like languages like SCSS, Sass, Less Sass, and more.
5 — Chrome Extensions: Web Development, Debugging, Layout, Testing, and Accessibility Tools.
6 — Azure DevOps Extensions: 40+ Extensions for your Boards, Repos, and Pipelines.

I share lessons from decades in software delivery — from CI/CD to architecture governance. If you’re tackling similar challenges and want a seasoned perspective, I’m available for consulting