eslint-plugin-jsx-max-lines

An ESLint plugin that enforces a maximum line limit for JSX blocks to improve code readability and maintainability.

What it does

This plugin checks JSX elements and fragments returned from functions and reports an error if they exceed the specified line limit. It helps maintain readable and maintainable JSX code by encouraging developers to break down large JSX blocks into smaller, more manageable components.

Example

// ❌ This will trigger an error if it exceeds the max line limit
function MyComponent() {
  return (
    <div>
      <h1>Title</h1>
      <p>Very long content...</p>
      {/* ... many more lines ... */}
    </div>
  );
}

// ✅ This is better - break it into smaller components
function MyComponent() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}

Installation

npm install eslint-plugin-jsx-max-lines --save-dev

Note: This plugin is compatible with ESLint v8.0.0+ and v9.0.0+.

Usage

ESLint 8 (eslintrc format)

Add jsx-max-lines to the plugins section of your .eslintrc configuration file:

{
  "plugins": ["jsx-max-lines"]
}

Then configure the rule under the rules section:

{
  "rules": {
    "jsx-max-lines/jsx-max-lines": "error"
  }
}

ESLint 9 (flat config format)

In your eslint.config.js file, import and configure the plugin:

import jsxMaxLines from "eslint-plugin-jsx-max-lines";

export default [
  // ... your other configs
  {
    plugins: {
      "jsx-max-lines": jsxMaxLines,
    },
    rules: {
      "jsx-max-lines/jsx-max-lines": "error",
    },
  },
];

Or if you're using CommonJS:

const jsxMaxLines = require("eslint-plugin-jsx-max-lines");

module.exports = [
  // ... your other configs
  {
    plugins: {
      "jsx-max-lines": jsxMaxLines,
    },
    rules: {
      "jsx-max-lines/jsx-max-lines": "error",
    },
  },
];

Configuration

The rule accepts an optional configuration object with the following properties:

• max (number): Maximum number of lines allowed for JSX blocks (default: 40)

Examples

ESLint 8 (eslintrc format)

{
  "rules": {
    "jsx-max-lines/jsx-max-lines": ["error", { "max": 30 }]
  }
}

ESLint 9 (flat config format)

import jsxMaxLines from "eslint-plugin-jsx-max-lines";

export default [
  {
    plugins: {
      "jsx-max-lines": jsxMaxLines,
    },
    rules: {
      "jsx-max-lines/jsx-max-lines": ["error", { max: 30 }],
    },
  },
];

Development

This plugin was developed using:

• Node.js v20.12.0
• ESLint v8.0.0+ and v9.0.0+ (both versions are supported)

Testing

The plugin includes comprehensive tests using ESLint's RuleTester utility. To run the tests:

npm test

Testing with npm link

To test this plugin in another repository before publishing:

1. In this plugin directory, create the link:

   npm link

2. In your target repository, link to the plugin:

   npm link eslint-plugin-jsx-max-lines

3. Add the plugin to your ESLint configuration:

   For ESLint 8 (eslintrc format):

   {
     "plugins": ["jsx-max-lines"],
     "rules": {
       "jsx-max-lines/jsx-max-lines": "error"
     }
   }

   For ESLint 9 (flat config format):

   import jsxMaxLines from "eslint-plugin-jsx-max-lines";
   
   export default [
     {
       plugins: {
         "jsx-max-lines": jsxMaxLines,
       },
       rules: {
         "jsx-max-lines/jsx-max-lines": "error",
       },
     },
   ];

   Note: The rule name format is plugin-name/rule-name. Since your plugin is named eslint-plugin-jsx-max-lines, the rule is accessed as jsx-max-lines/jsx-max-lines.

4. Test your code with ESLint:

   npx eslint your-file.jsx

5. When done testing, unlink from the target repository:

   npm unlink eslint-plugin-jsx-max-lines

6. Remove the link from this plugin directory:

   npm unlink

Publishing to npm

To publish this package to npm, follow these steps:

Prerequisites

1. npm account: Make sure you have an npm account and are logged in:

   npm login

2. Package name availability: Ensure the package name eslint-plugin-jsx-max-lines is available on npm. You can check this by visiting https://www.npmjs.com/package/eslint-plugin-jsx-max-lines

Pre-publishing Checklist

1. Update version: Update the version in package.json:

   npm version patch  # for bug fixes
   npm version minor  # for new features
   npm version major  # for breaking changes

2. Run tests: Ensure all tests pass:

   npm test

3. Check package contents: Verify what will be published:

   npm pack --dry-run

Publishing

1. Publish to npm:

   npm publish

2. For scoped packages (if using an organization scope):

   npm publish --access public

Post-publishing

1. Verify publication: Check that your package appears on npm:

   npm view eslint-plugin-jsx-max-lines

2. Create a release tag (optional but recommended):

   git tag v1.0.0
   git push origin --tags

Updating the Package

To update the package after making changes:

1. Make your changes and commit them
2. Update the version: npm version patch|minor|major
3. Run tests: npm test
4. Publish: npm publish
5. Push tags: git push origin --tags

Troubleshooting

• Package name already taken: If the package name is already taken, you'll need to choose a different name or use a scope (e.g., @yourusername/eslint-plugin-jsx-max-lines)
• Authentication issues: Make sure you're logged in with npm login
• Permission errors: Ensure you have the necessary permissions to publish under the package name

License

MIT