html-eslint v0.56.0

Getting Started

@html-eslint/eslint-plugin-react is an ESLint plugin that validates HTML attribute values and baseline browser compatibility directly in your React/JSX code. It extends the core @html-eslint functionality to work seamlessly with React components,

Contents

  1. Installation
  2. Configuration

Installation

  1. npm
Terminal 
npm install --save-dev eslint @html-eslint/eslint-plugin-react
  1. yarn
Terminal 
yarn add -D eslint @html-eslint/eslint-plugin-react

Configuration

Update your ESLint configuration file:

Manual Configuration 

// eslint.config.js (flat config)
import htmlReact from "@html-eslint/eslint-plugin-react";

export default [
  {
    files: ["**/*.jsx", "**/*.tsx"],
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    plugins: {
      "@html-eslint/react": htmlReact,
    },
    rules: {
      "@html-eslint/react/no-invalid-attr-value": "error",
      "@html-eslint/react/use-baseline": "error",
    },
  },
];

Using Preset Configurations

The plugin provides two preset configurations:

  1. recommended - Enables all available rules with error severity
  2. all - Enables all available rules with error severity (currently identical to recommended)
// eslint.config.js
import htmlReact from "@html-eslint/eslint-plugin-react";

export default [
  {
    files: ["**/*.jsx", "**/*.tsx"],
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    ...htmlReact.configs.recommended,
  },
];

Using the All Configuration 

// eslint.config.js
import htmlReact from "@html-eslint/eslint-plugin-react";

export default [
  {
    files: ["**/*.jsx", "**/*.tsx"],
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    ...htmlReact.configs.all,
  },
];