Repository files navigation

An ESLint plugin for adding 'data-attribute' to React components. The purpose of this plugin is to automatically make css selectors. Here is an example:

const MyComponent = () => (  <div />);

This plugin will autofix and add thedata-component prop to the div:

const MyComponent = () => (  <div data-component="MyComponent" />);

This plugin is intended to not be too opinionated. In general the approach is to suggest to the developer to add 'data-component' when there is an obvious approach, but in questionable cases, the plugin will tend towards being quiet. Click to learn more about thecovered cases.

Note: This plugin cannot guarantee that thedata-component prop will actually make it to the DOM node if the top level element is another React component. For it to work effectively, make sure you are properlyforwarding props with the JSX spread syntax.

You'll first need to installESLint:

npm i eslint --save-dev

Next, install@fullstory/eslint-plugin-annotate-react:

npm install @fullstory/eslint-plugin-annotate-react --save-dev

Add@fullstory/eslint-plugin-annotate-react to the plugins section of your.eslintrc configuration file. You can omit theeslint-plugin- prefix:

{"plugins": ["@fullstory/annotate-react"]}

Then configure the rules you want to use under the rules section.

{"rules": {"@fullstory/annotate-react/data-component":"error"  }}

Tests can be ran using

npm run test

...

Run this command to bump the version, push the tag, and create the release on GitHub:

npx np<patch| minor| major> --no-publish --no-tests