Skip to content

infernojs/eslint-plugin-inferno

 
 

Repository files navigation

eslint-plugin-inferno

Note: This is a fork of the great eslint-plugin-react.

Inferno specific linting rules for ESLint. Linting logic has been optimized for InfernoJS library. Some of the rules has been removed because they don't work in context of InfernoJS. Please see [not supported rules] section.

This plugins support NodeJS v14+ and eslint v6+ Legacy versions of nodejs and eslint are not supported to reduce code complexity

Installation

Install eslint either locally or globally. (Note that locally, per project, is strongly preferred)

$ npm install eslint@7 --save-dev

It is also possible to install ESLint globally rather than locally (using npm install -g eslint). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.

Configuration (legacy: .eslintrc*)

Use our preset to get reasonable defaults:

  "extends": [
    "eslint:recommended",
    "plugin:inferno/recommended"
  ]

You should also specify settings that will be shared across all the plugin rules. (More about eslint shared settings)

{
  "settings": {
    "inferno": {
      "createClass": "createClass", // Regex for Component Factory to use,  default to "createClass"
      "pragma": "Inferno",  // Pragma to use, default to "Inferno"
      "fragment": "Fragment",  // Fragment to use (may be a property of <pragma>), default to "Fragment"
    },
    "propWrapperFunctions": [
        // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
        "forbidExtraProps",
        {"property": "freeze", "object": "Object"},
        {"property": "myFavoriteWrapper"},
        // for rules that check exact prop wrappers
        {"property": "forbidExtraProps", "exact": true}
    ],
    "componentWrapperFunctions": [
        // The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
        "observer", // `property`
        {"property": "styled"}, // `object` is optional
        {"property": "observer", "object": "Mobx"},
        {"property": "observer", "object": "<pragma>"} // sets `object` to whatever value `settings.react.pragma` is set to
    ],
    "formComponents": [
      // Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } />
      "CustomForm",
      {"name": "SimpleForm", "formAttribute": "endpoint"},
      {"name": "Form", "formAttribute": ["registerEndpoint", "loginEndpoint"]}, // allows specifying multiple properties if necessary
    ],
    "linkComponents": [
      // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
      "Hyperlink",
      {"name": "MyLink", "linkAttribute": "to"},
      {"name": "Link", "linkAttribute": ["to", "href"]}, // allows specifying multiple properties if necessary
    ]
  }
}

If you do not use a preset you will need to specify individual rules and add extra configuration.

Add "inferno" to the plugins section.

{
  "plugins": [
    "inferno"
  ]
}

Enable JSX support.

With eslint 2+

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Enable the rules that you would like to use.

  "rules": {
    "inferno/jsx-uses-inferno": "error",
    "inferno/jsx-uses-vars": "error",
  }

Shareable configs

These rules have been removed because they don't make sense in context of InfernoJS. InfernoJS does not have prop-types or UNSAFE_ -lifecycle methods.

  • react/boolean-prop-naming
  • react/default-props-match-prop-types
  • react/display-name
  • react/forbid-foreign-prop-types
  • react/forbid-prop-types
  • react/no-deprecated
  • react/no-unsafe
  • react/no-unused-prop-types
  • react/prop-types
  • react/sort-prop-types
  • react/require-default-props
  • react/prefer-read-only-props
  • react/style-prop-object
  • react/hook-use-state
  • react/prefer-read-only-props
  • react/prefer-exact-props

Other useful plugins

Recommended

This plugin exports a recommended configuration that enforces Inferno good practices.

To enable this configuration use the extends property in your .eslintrc config file:

{
  "extends": ["eslint:recommended", "plugin:inferno/recommended"]
}

See eslint documentation for more information about extending configuration files.

All

This plugin also exports an all configuration that includes every available rule. This pairs well with the eslint:all rule.

{
  "plugins": [
    "inferno"
  ],
  "extends": ["eslint:all", "plugin:inferno/all"]
}

Note: These configurations will import eslint-plugin-inferno and enable JSX in parser options.

Configuration (new: eslint.config.js)

From v8.21.0, eslint announced a new config system. In the new system, .eslintrc* is no longer used. eslint.config.js would be the default config file name. In eslint v8, the legacy system (.eslintrc*) would still be supported, while in eslint v9, only the new system would be supported.

And from v8.23.0, eslint CLI starts to look up eslint.config.js. So, if your eslint is >=8.23.0, you're 100% ready to use the new config system.

You might want to check out the official blog posts,

and the official docs.

Plugin

The default export of eslint-plugin-react is a plugin object.

const react = require('eslint-plugin-react');
const globals = require('globals');

module.exports = [
  
  {
    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
    plugins: {
      react,
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      globals: {
        ...globals.browser,
      },
    },
    rules: {
      // ... any rules you want
      'react/jsx-uses-react': 'error',
      'react/jsx-uses-vars': 'error',
     },
    // ... others are omitted for brevity
  },
  
];

Configuring shared settings

Refer to the official docs.

The schema of the settings.react object would be identical to that of what's already described above in the legacy config section.

Shareable configs

There're also 3 shareable configs.

  • eslint-plugin-react/configs/all
  • eslint-plugin-react/configs/recommended
  • eslint-plugin-react/configs/jsx-runtime

If your eslint.config.js is ESM, include the .js extension (e.g. eslint-plugin-react/recommended.js). Note that the next semver-major will require omitting the extension for these imports.

Note: These configurations will import eslint-plugin-react and enable JSX in languageOptions.parserOptions.

In the new config system, plugin: protocol(e.g. plugin:react/recommended) is no longer valid. As eslint does not automatically import the preset config (shareable config), you explicitly do it by yourself.

const reactRecommended = require('eslint-plugin-react/configs/recommended');

module.exports = [
  
  reactRecommended, // This is not a plugin object, but a shareable config object
  
];

You can of course add/override some properties.

Note: Our shareable configs does not preconfigure files or languageOptions.globals. For most of the cases, you probably want to configure some properties by yourself.

const reactRecommended = require('eslint-plugin-react/configs/recommended');
const globals = require('globals');

module.exports = [
  
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...reactRecommended,
    languageOptions: {
      ...reactRecommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  
];

The above example is same as the example below, as the new config system is based on chaining.

const reactRecommended = require('eslint-plugin-react/configs/recommended');
const globals = require('globals');

module.exports = [
  
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...reactRecommended,
  },
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    languageOptions: {
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  
];

List of supported rules

💼 Configurations enabled in.
🚫 Configurations disabled in.
🏃 Set in the jsx-runtime configuration.
☑️ Set in the recommended configuration.
🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.
❌ Deprecated.

Name                                  Description 💼 🚫 🔧 💡
button-has-type Disallow usage of button elements without an explicit type attribute
checked-requires-onchange-or-readonly Enforce using onChange or readonly attribute when checked is used
destructuring-assignment Enforce consistent usage of destructuring assignment of props, state, and context 🔧
forbid-component-props Disallow certain props on Components
forbid-dom-props Disallow certain props on DOM Nodes
forbid-elements Disallow certain elements
function-component-definition Enforce a specific function type for function components 🔧
iframe-missing-sandbox Enforce sandbox attribute on iframe elements
inferno-in-jsx-scope Disallow missing Inferno when using JSX 🏃
jsx-boolean-value Enforce boolean attributes notation in JSX 🔧
jsx-child-element-spacing Enforce or disallow spaces inside of curly braces in JSX attributes and expressions
jsx-closing-bracket-location Enforce closing bracket location in JSX 🔧
jsx-closing-tag-location Enforce closing tag location for multiline JSX 🔧
jsx-curly-brace-presence Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes 🔧
jsx-curly-newline Enforce consistent linebreaks in curly braces in JSX attributes and expressions 🔧
jsx-curly-spacing Enforce or disallow spaces inside of curly braces in JSX attributes and expressions 🔧
jsx-equals-spacing Enforce or disallow spaces around equal signs in JSX attributes 🔧
jsx-filename-extension Disallow file extensions that may contain JSX
jsx-first-prop-new-line Enforce proper position of the first property in JSX 🔧
jsx-fragments Enforce shorthand or standard form for Inferno fragments 🔧
jsx-handler-names Enforce event handler naming conventions in JSX
jsx-indent Enforce JSX indentation 🔧
jsx-indent-props Enforce props indentation in JSX 🔧
jsx-key Disallow missing key props in iterators/collection literals ☑️
jsx-max-depth Enforce JSX maximum depth
jsx-max-props-per-line Enforce maximum of props on a single line in JSX 🔧
jsx-newline Require or prevent a new line after jsx elements and expressions. 🔧
jsx-no-bind Disallow .bind() or arrow functions in JSX props
jsx-no-comment-textnodes Disallow comments from being inserted as text nodes ☑️
jsx-no-constructed-context-values Disallows JSX context provider values from taking values that will cause needless rerenders
jsx-no-duplicate-props Disallow duplicate properties in JSX ☑️
jsx-no-leaked-render Disallow problematic leaked values from being rendered 🔧
jsx-no-literals Disallow usage of string literals in JSX
jsx-no-script-url Disallow usage of javascript: URLs
jsx-no-target-blank Disallow target="_blank" attribute without rel="noreferrer" ☑️ 🔧
jsx-no-undef Disallow undeclared variables in JSX ☑️
jsx-no-useless-fragment Disallow unnecessary fragments 🔧
jsx-one-expression-per-line Require one JSX element per line 🔧
jsx-pascal-case Enforce PascalCase for user-defined JSX components
jsx-props-class-name Enforce 'class' or 'className' attributes 🔧
jsx-props-no-multi-spaces Disallow multiple spaces between inline JSX props 🔧
jsx-props-no-spreading Disallow JSX prop spreading
jsx-sort-default-props Enforce defaultProps declarations alphabetical sorting
jsx-sort-props Enforce props alphabetical sorting 🔧
jsx-space-before-closing Enforce spacing before closing bracket in JSX 🔧
jsx-tag-spacing Enforce whitespace in and around the JSX opening and closing brackets 🔧
jsx-uses-inferno Disallow Inferno to be incorrectly marked as unused 🏃
jsx-uses-vars Disallow variables used in JSX to be incorrectly marked as unused ☑️
jsx-wrap-multilines Disallow missing parentheses around multiline JSX 🔧
no-access-state-in-setstate Disallow when this.state is accessed within setState
no-adjacent-inline-elements Disallow adjacent inline elements not separated by whitespace.
no-array-index-key Disallow usage of Array index in keys
no-arrow-function-lifecycle Lifecycle methods should be methods on the prototype, not class fields 🔧
no-children-prop Disallow passing of children as props ☑️
no-danger Disallow usage of dangerous JSX properties
no-danger-with-children Disallow when a DOM element is using both children and dangerouslySetInnerHTML ☑️
no-did-mount-set-state Disallow usage of setState in componentDidMount
no-did-update-set-state Disallow usage of setState in componentDidUpdate
no-direct-mutation-state Disallow direct mutation of this.state ☑️
no-find-dom-node Disallow usage of findDOMNode ☑️
no-invalid-html-attribute Disallow usage of invalid attributes 💡
no-is-mounted Disallow usage of isMounted ☑️
no-multi-comp Disallow multiple component definition per file
no-namespace Enforce that namespaces are not used in Inferno elements
no-object-type-as-default-prop Disallow usage of referential-type variables as default param in functional component
no-redundant-should-component-update Disallow usage of shouldComponentUpdate when extending Inferno.PureComponent
no-render-return-value Disallow usage of the return value of Inferno.render ☑️
no-set-state Disallow usage of setState
no-string-refs Disallow using string references ☑️
no-this-in-sfc Disallow this from being used in stateless functional components
no-typos Disallow common typos
no-unescaped-entities Disallow unescaped HTML entities from appearing in markup ☑️
no-unknown-property Disallow usage of unknown DOM property ☑️ 🔧
no-unstable-nested-components Disallow creating unstable components inside components
no-unused-class-component-methods Disallow declaring unused methods of component class
no-unused-state Disallow definitions of unused state
no-will-update-set-state Disallow usage of setState in componentWillUpdate
prefer-es6-class Enforce ES5 or ES6 class for Inferno Components
prefer-stateless-function Enforce stateless components to be written as a pure function
require-optimization Enforce Inferno components to have a shouldComponentUpdate method
require-render-return Enforce ES5 or ES6 class for returning value in render function ☑️
self-closing-comp Disallow extra closing tags for components without children 🔧
sort-comp Enforce component methods order
sort-default-props Enforce defaultProps declarations alphabetical sorting
state-in-constructor Enforce class component state initialization style
static-property-placement Enforces where Inferno component static properties should be positioned.
style-prop-object Enforce style prop value is an object
void-dom-elements-no-children Disallow void DOM elements (e.g. <img />, <br />) from receiving children

License

eslint-plugin-inferno is licensed under the MIT License.

About

Inferno specific linting rules for ESLint

Resources

License

Security policy

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%