npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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,407

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

  1. Why should I (or my team) use it?
  2. Installation
  3. Usage
  4. Supported rules

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" or 0 - turn the rule off
  • "warn" or 1 - turn the rule on as a warning (doesn't affect exit code)
  • "error" or 2 - 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 the type and name 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, if none is defined in the target 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 an id and enable the auto-fix feature. This is still experimental!. Default to false
    • 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 to true

    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.