Eslint jsx plugin to bring more idiomatic control over jsx

Downloads in past


751.1.07 years ago7 years agoMinified + gzip package size for eslint-plugin-idiomatic-jsx in KB



<img src="" alt="build status" />
<img src="" alt="npm version" />
<img src="" alt="license" />
<img src='' alt='Coverage Status' />

ESLint jsx plugin to bring more idiomatic control over JSX elements.
These rules allow you to create idiomatic styling over JSX in your projects. For instance, enforcing or preventing certain attributes on JSX elements. The goal is to extend the rule sets provided by eslint-plugin-react and eslint-plugin-jsx-a11y to give you more control over how JSX is used.
Some Possible Use Cases
  • Require id tags on components like a and input for easier automated tests
  • Prevent onClick being used on div or span components
  • Prevent use of button components in favor of a custom Button components


You'll first need to install ESLint:
# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev
Next, install eslint-plugin-idiomatic-jsx:
# npm
npm install eslint-plugin-idiomatic-jsx --save-dev

# yarn
yarn add eslint-plugin-idiomatic-jsx --dev

Note: If you installed ESLint globally then you must also install eslint-plugin-idiomatic-jsx globally.


Add idiomatic-jsx to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix
  "plugins": [

Configure the rules you want to use under the rules section.
  "rules": {
    "idiomatic-jsx/rule-name": [ 2, {
      // options
    } ]

List of Supported Rules


eslint-plugin-idiomatic-jsx is licensed under the MIT License.