eslint-plugin-react-id-generator

Auto generated id values for jsx-expression. This plugin is very useful for writing auto-tests.

Table of contents

• Quick start
• Status
• Usage

Quick start

npm install eslint --save-dev
./node-modules/.bin/eslint --init
npm install eslint-plugin-react-id-generator --save-dev

Status

Usage

Basic configuration of .eslintrc looks like this

{
  "plugins": {
    "react-id-generator"
  },
  "rules": {
    "react-id-generator/jsx-id": "error"
  }
}

Now all you have to do is add qa-id attribute to required jsx-expression without filling it.

<MyComponent numVal={1} strVal="Michael" qa-id />

Now run ./node_modules/.bin/eslint --fix 'file_or_folder' and you'll get

<MyComponent numVal={1} strVal="Michael" qa-id="qa-id_f5d485d2995609cee081753ec9372b0e" />

The output hash value depends on tag name, attributes names and values and the type of the tag itself (whether it's self-closing or not).

Rule might be customized.

{
  "rules": {
    "jsx-id": [
        "error", 
        {
          "attribute": "my-id",
          "prefix": "pf",
          "divider": "@@@",
          "hashMaxLength": 7
        }
    ]
  }
}

The fix with such configuration will be different.

<MyComponent numVal={1} strVal="Michael" my-id />

After fix.

<MyComponent numVal={1} strVal="Michael" my-id="pf@@@d791bee" />

All of listed parameters can be omitted.