Skip to content

Latest commit

 

History

History

eslint-plugin-react-dom

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 
tsup.config.ts
tsup.config.ts
 
 

README.md

eslint-plugin-react-dom

DOM specific rules for React DOM.

Note

This plugin is already included in @eslint-react/eslint-plugin. You don't need to install it separately if you are using @eslint-react/eslint-plugin.

Install

# npm
npm install --save-dev eslint-plugin-react-dom

Setup

Add the plugin to your eslint.config.js:

// @ts-check

import js from "@eslint/js";
import reactDOM from "eslint-plugin-react-dom";

export default [
  js.configs.recommended,
  {
    files: ["**/*.{ts,tsx}"],
    plugins: {
      "react-dom": reactDOM,
    },
    rules: {
      // react-dom recommended rules
      "react-dom/no-children-in-void-dom-elements": "warn",
      "react-dom/no-dangerously-set-innerhtml": "warn",
      "react-dom/no-dangerously-set-innerhtml-with-children": "error",
      "react-dom/no-find-dom-node": "error",
      "react-dom/no-missing-button-type": "warn",
      "react-dom/no-missing-iframe-sandbox": "warn",
      "react-dom/no-namespace": "error",
      "react-dom/no-render-return-value": "error",
      "react-dom/no-script-url": "warn",
      "react-dom/no-unsafe-iframe-sandbox": "warn",
      "react-dom/no-unsafe-target-blank": "warn",
    },
  },
];

Rules

Rule Description 💼 💭
no-children-in-void-dom-elements Prevents the use of children in void DOM elements. ✔️
no-dangerously-set-innerhtml Prevents DOM element using dangerouslySetInnerHTML. 🔒
no-dangerously-set-innerhtml-with-children Prevents DOM element using dangerouslySetInnerHTML and children at the same time. ✔️
no-find-dom-node Prevents usage of findDOMNode. ⛔
no-missing-button-type Enforces explicit type attribute for <button> elements. ✔️
no-missing-iframe-sandbox Enforces explicit sandbox attribute for iframe elements. 🔒
no-namespace Enforces the absence of a namespace in React elements. ✔️
no-render-return-value Prevents usage of the return value of ReactDOM.render. ⛔
no-script-url Prevents usage of javascript: URLs as the value of certain attributes. 🔒
no-unsafe-iframe-sandbox Enforces sandbox attribute for iframe elements is not set to unsafe combinations. 🔒
no-unsafe-target-blank Prevents the use of target="_blank" without rel="noreferrer noopener". 🔒