eslint-plugin-jsx-id-attribute-enforcement
v1.0.2
Published
A small collection of ESLint rules to improve usage of id attributes in your markup.
Downloads
1,556
Maintainers
Readme
eslint-plugin-jsx-id-attribute-enforcement
This is a small collection of ESLint rules to improve usage of id attributes in your markup. As of v.1.0.2, better identification of unique ids in the event of expressions within template literals has been added.
Table of Contents
Why should I (or my team) use it?
These rules will help you in using id
attributes consistently in your jsx markup. This is helpful for writing unit and end-to-end testing, as having unique identifiers on the dom makes it easier to target elements.
Installation
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install eslint-plugin-jsx-id-attribute-enforcement
:
$ npm install eslint-plugin-jsx-id-attribute-enforcement --save-dev
Note: If you installed ESLint globally (using the -g
flag) then you must also install eslint-plugin-jsx-id-attribute-enforcement
globally.
Usage
Add jsx-id-attribute-enforcement
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": [
"jsx-id-attribute-enforcement"
]
}
Then configure the rules you want to use under the rules section.
{
"rules": {
"jsx-id-attribute-enforcement/missing-ids": 2,
"jsx-id-attribute-enforcement/unique-ids": 2,
}
}
The names "missing-ids"
and "unique-ids"
are the names of rules in ESLint. The first value is the error level of the rule and can be one of these values:
"off"
or0
- turn the rule off"warn"
or1
- turn the rule on as a warning (doesn't affect exit code)"error"
or2
- turn the rule on as an error (exit code will be 1)
If you're using a linter in your CI process, you may want to set the error level to 1
for some time to prevent your pipeline from breaking immediatly.
The second value is an optional object to set options on the rule.
Supported Rules
missing-ids: This rule will trigger when an element is missing an
id
attribute. By default, it will only target form elements, but you can adjust the options to target any element you need (React components included).Why? This ensures that every form element in your layout can be identified easily.
// bad <input type="text" name="username" /> <button type="submit">Submit me!</button> // good <input type="text" name="username" id="usernameTextInput" /> <button type="submit" id="submitButton">Submit me!</button>
Using the auto-fix feature will add an
id
based on the type of element (ie. input, button, select...), and on thetype
andname
attributes if possible.Options for this rule are:
"target"
, an array that take values from this list:all
,form
,material
,none
. Default to['form']
all
: will trigger the rule on EVERY element
form
: will trigger the rule on basic form elements
material
: will trigger the rule on these Material components: "NativeSelect", "Select", "MenuItem", "Button", "IconButton", "Checkbox", "Radio", "Slider", "Switch", "TextField", "Input", "OutlinedInput", "Modal"
none
: will prevent the rule to trigger on any element except those defined in the second option,customTarget
. Be careful, ifnone
is defined in thetarget
array, it will override the rest of the values!
targetCustom
, an array that take any value you want (basic html elements, custom components, etc). Default to[]
suggestionsEnabled
, a boolean. If set to true, the rule will provide a suggestion for anid
and enable the auto-fix feature. This is still experimental!. Default tofalse
priorityOverSpread
, a boolean. If set to false, the rule won't trigger on any element where there is a spread operator. It may be useful in case you're already using{...rest}
to pass ids and don't want eslint to warn you about false-positives. Default totrue
Examples of configuration:
"jsx-id-attribute-enforcement/missing-ids": ['error', { target: ['form', 'material'], targetCustom: ['AddressField', 'CustomCheckbox', 'MoviesListContainer'], priorityOverSpread: false, }],
"jsx-id-attribute-enforcement/missing-ids": ['warning', { target: ['none'], targetCustom: ['ul', 'ol', 'header', 'footer', 'section'], priorityOverSpread: false, }],
unique-ids: This rule will trigger when a form element is using an
id
already set on a previous element.Why? This ensures that every element as an unique id and can't be confused with another element.
// bad <input type="text" name="favoriteCake" id="favorite" /> <select name="favoriteGame" id="favorite"></select> // good <input type="text" name="favoriteCake" id="favoriteCakeTextInput" /> <select name="favoriteGame" id="favoriteGameSelect"></select>
:warning: Currently, this rule will only alert you on literal strings! Using a variable as an
id
will not raise any warning, at least for now.