The @mindfiredigital/eslint-plugin-hub aims to help maintain consistent code quality and readability by providing rules for variable names, class names, file names, and function naming conventions.

Table of Contents

• Installation
• Rules
  • General Rules
  • React Rules
  • Angular Rules
• Usage
  • Flat Configuration (eslint.config.js)
    • General
    • Extending Presets in Flat Configuration
      • Extending General Config
      • Extending React Config
      • Extending Angular Config
      • Extending MERN Config
  • Legacy Configuration (.eslintrc.*, package.json)
    • General
    • Extending Presets in Legacy Configuration
      • Extending General Config
      • Extending React Config
      • Extending Angular Config
      • Extending MERN Config
• Documentation
• License

Installation

To install and use this ESLint plugin, make sure you have ESLint already set up in your project Requires ESLint >=8.56.0. Then add the plugin as a development dependency with npm or yarn:

npm install @mindfiredigital/eslint-plugin-hub --save-dev

or

yarn add @mindfiredigital/eslint-plugin-hub --dev

Rules

This plugin provides the following rules:

General Rules

| Rule Name | Description | | -------------------------- | --------------------------------------------------------- | | file-kebabcase | Enforces kebab-case naming convention for filenames. | | max-lines-per-file | Enforces a maximum number of lines per file. | | max-lines-per-function | Enforces a maximum number of lines per function. | | consistent-return | Enforces consistent return statements in functions. | | max-function-params | Enforces a maximum number of parameters in functions. | | no-single-character-vars | Disallows single-character variable names. | | vars-lowercase | Enforces lowercase naming convention for variables. | | folder-lowercase | Enforces lowercase naming convention for folder names. | | file-lowercase | Enforces lowercase naming convention for filenames. | | folder-pascalcase | Enforces PascalCase naming convention for folder names. | | folder-kebabcase | Enforces kebab-case naming convention for folder names. | | folder-camelcase | Enforces camelCase naming convention for folder names. | | file-camelcase | Enforces camelCase naming convention for filenames. | | function-pascalcase | Enforces PascalCase naming convention for function names. | | file-pascalcase | Enforces PascalCase naming convention for filenames. | | vars-snakecase | Enforces snake_case naming convention for variables. | | vars-pascalcase | Enforces PascalCase naming convention for variables. | | class-pascalcase | Enforces PascalCase naming convention for class names. | | function-camelcase | Enforces camelCase naming convention for function names. | | function-descriptive | Enforces descriptive names for functions. | | vars-camelcase | Enforces camelCase naming convention for variables. | | vars-descriptive | Enforces descriptive names for variables. |

React Rules

| Rule Name | Description | | ------------------------------------- | -------------------------------------------------------------------- | | react-component-name-match-filename | Enforces that React component names match their filenames. | | react-filename-pascalcase | Enforces PascalCase naming convention for React component filenames. |

Angular Rules

| Rule Name | Description | | ------------------------------------ | --------------------------------------------------------------- | | angular-no-forbidden-services | Disallows usage of forbidden Angular services. | | angular-no-unused-inputs | Disallows unused inputs in Angular components. | | angular-no-direct-dom-manipulation | Disallows direct DOM manipulation in Angular components. | | angular-limit-input | Enforces a limit on the number of inputs in Angular components. | | angular-filenaming | Enforces consistent naming conventions for Angular files. |

Usage

You can enable the plugin and configure the rules using either flat or legacy configurations.

Flat Configuration (eslint.config.js)

This is for ESLint >=8.56.0 using the new flat config format.

For ES Module

import hub from '@mindfiredigital/eslint-plugin-hub';

export default [
  {
    plugins: {
      hub: hub,
    },
    rules: {
      'hub/vars-camelcase': 'error',
      'hub/class-pascalcase': 'error',
      'hub/file-kebabcase': 'error',
      'hub/function-camelcase': 'error',
      'hub/function-descriptive': 'warn',
    },
  },
];

For CommonJS

const hub = require('@mindfiredigital/eslint-plugin-hub');

module.exports = [
  {
    plugins: {
      hub: hub,
    },
    rules: {
      'hub/vars-camelcase': 'error',
      'hub/class-pascalcase': 'error',
      'hub/file-kebabcase': 'error',
      'hub/function-camelcase': 'error',
      'hub/function-descriptive': 'warn',
    },
  },
];

Legacy Configuration (.eslintrc.* or package.json)

If you're using the legacy ESLint configuration format, here’s how to use the plugin.

General

{
  "plugins": ["@mindfiredigital/eslint-plugin-hub"],
  "rules": {
    "@mindfiredigital/hub/vars-camelcase": "error",
    "@mindfiredigital/hub/class-pascalcase": "error",
    "@mindfiredigital/hub/file-kebabcase": "error",
    "@mindfiredigital/hub/function-camelcase": "error",
    "@mindfiredigital/hub/function-descriptive": "warn"
  }
}

For ESLint versions >=8.56.0, using flat configuration, you can extend from predefined config presets such as general, react, angular, and mern.

Extending Presets in Flat Configuration (eslint.config.js)

You can extend the hub.configs presets directly into your flat ESLint configuration.

Example: Extending General Config

import hub from '@mindfiredigital/eslint-plugin-hub';

export default [
  // Extends the general config preset from the plugin
  hub.configs['flat/general'],
  {
    rules: {
      'hub/vars-camelcase': 'error',
      'hub/class-pascalcase': 'error',
      'hub/file-kebabcase': 'error',
      'hub/function-camelcase': 'error',
      'hub/function-descriptive': 'warn',
    },
  },
];

Example: Extending React Config

import hub from '@mindfiredigital/eslint-plugin-hub';

export default [
  // Extends the react config preset from the plugin
  hub.configs['flat/react'],
  {
    rules: {
      'hub/react-component-name-match-filename': 'error',
      'hub/react-filename-pascalcase': 'error',
    },
  },
];

Example: Extending Angular Config

import hub from '@mindfiredigital/eslint-plugin-hub';

export default [
  // Extends the angular config preset from the plugin
  hub.configs['flat/angular'],
  {
    rules: {
      'hub/angular-no-forbidden-services': 'error',
      'hub/angular-no-unused-inputs': 'warn',
      'hub/angular-no-direct-dom-manipulation': 'error',
      'hub/angular-limit-input': 'warn',
      'hub/angular-filenaming': 'error',
    },
  },
];

Example: Extending MERN Config

import hub from '@mindfiredigital/eslint-plugin-hub';

export default [
  // Extends the mern config preset from the plugin
  hub.configs['flat/mern'],
  {
    rules: {
      'hub/file-kebabcase': 'error',
      'hub/vars-camelcase': 'error',
      'hub/class-pascalcase': 'error',
      'hub/function-camelcase': 'error',
      'hub/function-descriptive': 'warn',
    },
  },
];

For older versions of ESLint, or if you're using the legacy configuration format, you can extend the same configs with the extends field. This will inherit the rules from the plugin presets.

Extending Presets in Legacy Configuration (.eslintrc.*,.eslintrc.js or package.json)

You can extend any of the provided presets directly into your .eslintrc.json, .eslintrc.js, or package.json ESLint configuration.

Example: Extending General Config

{
  "extends": ["@mindfiredigital/hub/general"],
  "rules": {
    "@mindfiredigital/hub/vars-camelcase": "error",
    "@mindfiredigital/hub/class-pascalcase": "error",
    "@mindfiredigital/hub/file-kebabcase": "error",
    "@mindfiredigital/hub/function-camelcase": "error",
    "@mindfiredigital/hub/function-descriptive": "warn"
  }
}

Example: Extending React Config

{
  "extends": ["@mindfiredigital/hub/react"],
  "rules": {
    "@mindfiredigital/hub/react-component-name-match-filename": "error",
    "@mindfiredigital/hub/react-filename-pascalcase": "error"
  }
}

Example: Extending Angular Config

{
  "extends": ["@mindfiredigital/hub/angular"],
  "rules": {
    "@mindfiredigital/hub/angular-no-forbidden-services": "error",
    "@mindfiredigital/hub/angular-no-unused-inputs": "warn",
    "@mindfiredigital/hub/angular-no-direct-dom-manipulation": "error",
    "@mindfiredigital/hub/angular-limit-input": "warn",
    "@mindfiredigital/hub/angular-filenaming": "error"
  }
}

Example: Extending MERN Config

{
  "extends": ["@mindfiredigital/hub/mern"],
  "rules": {
    "@mindfiredigital/hub/file-kebabcase": "error",
    "@mindfiredigital/hub/vars-camelcase": "error",
    "@mindfiredigital/hub/class-pascalcase": "error",
    "@mindfiredigital/hub/function-camelcase": "error",
    "@mindfiredigital/hub/function-descriptive": "warn"
  }
}

Documentation

The documentation for each rule is available at our official documentation site. You can find detailed usage instructions, examples, and best practices for each rule.

If you're contributing to the documentation, please follow the instructions in the CONTRIBUTING.md file for how to structure and update the documentation in the docs/docusaurus branch.

License

ESLint Plugin Hub is licensed under the MIT License. See the LICENSE file for more details.