@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 }]
  }
}