@nossbigg/eslint-plugin-clean-code-react

ESLint rules to keep your React components squeaky clean ✨🧼

Rules

Note: All rule names are prefixed with @nossbigg/clean-code-react/:

• eg. To use component-prop-typedef-name, the full rule name is @nossbigg/clean-code-react/component-prop-typedef-name

component:

Rules that apply to both Function and Class React Components

Rule	Description
component-prop-typedef-name	React Component typedef name contains 'Props'.
max-component-lines	React Component declarations do not exceed max lines.
max-component-nested-fn-lines	Nested functions within React Component does not exceed max lines.
max-component-nested-fns	React Component does not exceed max number of nested functions.
no-component-prop-inline-typedef	React Component typedefs do not contain inline typedefs.
no-external-fn-definition-in-large-component-file	No external function definitions exist in the same file when a large component exists.
no-other-component-in-large-component-file	No other components exist in the same file when a large component exists.
no-styled-components-def-in-large-component-file	No styled components are declared in large component file.
no-typedefs-in-large-component-file	Typedefs are not declared in the same file when a large component exists.

jsx:

Rules that apply to JSX Elements

Rule	Description
max-jsx-expression-lines	JSX Expression blocks do not exceed max lines.
max-jsx-lines	JSX Element blocks do not exceed max lines.
max-jsx-prop-value-lines	JSX Element prop value does not exceed max lines.
max-jsx-props	JSX Element does not exceed max number of props.
max-jsx-spread-props	JSX Element does not exceed max number of spread props.
no-jsx-complex-spread-prop	JSX Element does not contain complex spread props.
no-jsx-inline-style-prop	JSX Element does not contain inline style prop.

fn-component:

Rules that apply to Function React Component

Rule	Description
max-fn-component-hooks	React Function Component does not use more than max React Hooks.
no-fn-component-props-inline-destructure	No function component props inline destructure.

class-component:

Rules that apply to Class React Component

Rule	Description
no-unnecessary-class-component	Unnecessary class components are not allowed.

hooks:

Rules that apply to React Hooks

Rule	Description
max-hooks-in-custom-hook	Custom React Hooks do not use more than max hooks.

typedefs:

Rules that apply to typedefs with 'Props'

Rule	Description
max-properties-in-component-prop	Component prop typedef does not exceed max properties.
no-nested-type-literal-in-component-prop	Component prop typedef does not contain nested typedef.

Rule-level settings

This plugin allows for rule-level settings:

// .eslintrc.js
{
  "settings": {
    "@nossbigg/eslint-plugin-clean-code-react": {
      "jsCompatMode": false,
      "largeComponentLength": 50
    }
  }
}

Available settings:

1. jsCompatMode

Purpose: Allows detection of React Function Component by name.

• Example Function Component names: MyComponent, Table
• Useful for non-TypeScript codebases, or codebases without a standardized type annotation convention.

Used by:

All rules in the following categories:

• component
• fn-component

Value: boolean, default: false

Note: May capture false positives (eg. SomeUtilMethod()).

2.largeComponentLength

Purpose: Determines the threshold for a large react component.

Used by:

• no-external-fn-definition-in-large-component-file
• no-other-component-in-large-component-file
• no-styled-components-def-in-large-component-file
• no-typedefs-in-large-component-file

Value: number, default: 50

Note: When largeComponentLength is defined in multiple places, the precedence order is as follows:

• rule config > plugin setting config > default value

Supported Syntax

Supported Syntax:

// Class Component
class MyClassComponent extends React.Component {
  render() {
    return <></>;
  }
}

// === With type definition ===

// Function Component using arrow function
const MyFunctionComponent: React.FunctionComponent = () => <></>;
// Function Component using function expression
const MyFunctionComponent: React.FunctionComponent = function() => <></>;

// === Without type definition ===
// note: requires jsCompatMode = true

// Function Component using arrow function
const MyFunctionComponent = () => <></>;
// Function Component using function expression
const MyFunctionComponent = function() => <></>;
// Function Component using function declaration
function MyFunctionComponent() => <></>;

Supported Function Component types:

• FunctionComponent / FC / React.FunctionComponent / React.FC
• StatelessComponent / SFC / React.StatelessComponent / React.SFC
• VoidFunctionComponent / VFC / React.VoidFunctionComponent / React.VFC

Supported Class Component types:

• Component / React.Component
• PureComponent / React.PureComponent

Unsupported Syntax:

// function component generator
const makeMyFunctionComponent = (): React.FunctionComponent => () => <></>;

Tip: Ensuring all function components are declared using arrow function.

You can use eslint-plugin-react's react/function-component-definition to ensure that all function components are declared using arrow functions.

// .eslintrc.js
{
  "rules": {
    "react/function-component-definition": [
      "error",
      {
        "namedComponents": "arrow-function",
        "unnamedComponents": "arrow-function"
      }
    ]
  }
}

Installation

Prerequisites:

• eslint (see more)
• TypeScript (see more)
• @typescript-eslint/parser (see more)

Steps:

1. Add lib as dev dependency

yarn add -D @nossbigg/eslint-plugin-clean-code-react

2. Use plugin + rules

// .eslintrc.js
{
  // use plugin + recommended rules
  "plugins": ["@nossbigg/clean-code-react"],
  "extends": ["plugin:@nossbigg/clean-code-react/recommended"],

  // define specific rules
  "rules": {
    // without rule config
    "@nossbigg/clean-code-react/max-component-lines": "error",
    // with rule config
    "@nossbigg/clean-code-react/max-jsx-lines": ["error", { "maxJsxLines": 31 }]
  }
}