@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

jsx:

Rules that apply to JSX Elements

fn-component:

Rules that apply to Function React Component

class-component:

Rules that apply to Class React Component

hooks:

Rules that apply to React Hooks

typedefs:

Rules that apply to typedefs with 'Props'

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