jsx-eslint / jsx-eslint/eslint-plugin-react

Enforcing small render methods (limiting jsx content)

Open
#656 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

new rule question
Dominant language
JavaScript
Stars
9.3k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

I'm struggling to find a rule (in either eslint or eslint-plugin-react) to limit the length of render methods (including the jsx part). Normally this would be handled by max-statements but unfortunately this doesn't seem to count/apply to jsx (or it seems to count the entire return as a single statement).

So in the below example I want to limit the length of the function. Overall I would like the function to be a sensible size but if there is nothing to help me to that I'll settle for limiting the JSX size.

render() {
  return (
    <div>
      ..... far too many lines of jsx
   </div>
  )
}

Is there a rule I am missing or another plugin that might help?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing ESLint's max-statements behavior and the existing eslint-plugin-react rules to determine whether render methods or JSX length are already covered. Done would be a clear decision about an existing rule, another plugin, or the scope of a new rule that measures render-method or JSX size.

Written by the indexing model from the issue text.

Assessment

Tech stack
eslint, javascript, react
Domain
tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.