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)
    • For ES Module
    • For CommonJS
  • Legacy Configuration (.eslintrc.*, package.json)
    • For .eslintrc.json
    • For ES Module .eslintrc.js
    • For CommonJS .eslintrc.cjs
  • MERN Recommended Rules
    • Example: Extending MERN Config
      • For eslint.config.mjs
      • For .eslintrc.cjs
      • For .eslintrc.json
  • Extending Presets in Flat Configuration (eslint.config.mjs)
    • Example: Extending General Config
    • Example: Extending React Config
    • Example: Extending Angular Config
  • Extending Presets in Legacy Configuration (.eslintrc.*, .eslintrc.js or package.json)
    • Example: Extending General Config
    • Example: Extending React Config
    • Example: Extending Angular 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 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.mjs)

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

For ES Module

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

export default [
  {
    languageOptions: {
      globals: globals.builtin,
      parserOptions: {
        ecmaVersion: 2022,
        sourceType: 'module',
      },
    },
    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');
const globals = require('globals');

module.exports = [
  {
    languageOptions: {
      globals: globals.builtin,
      parserOptions: {
        ecmaVersion: 2022,
        sourceType: 'module',
      },
    },
    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 eslintrc.json)

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

For .eslintrc.json:

{
  "env": {
    "es2024": true
  },
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@mindfiredigital/eslint-plugin-hub"],
  "rules": {
    "@mindfiredigital/hub/file-kebabcase": "error",
    "@mindfiredigital/hub/function-camelcase": "error",
    "@mindfiredigital/hub/vars-camelcase": "error"
  }
}

For ES Module .eslintrc.js:

export default [
  {
  env: {
    browser: true,
    es2024: true,
  },
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  rules: {
    "@mindfiredigital/hub/file-kebabcase": "error",
    "@mindfiredigital/hub/function-camelcase": "error",
    "@mindfiredigital/hub/vars-camelcase": "error",
  },
};
];

For CommonJS .eslintrc.cjs:

module.exports = {
  env: {
    browser: true,
    es2024: true,
  },
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    '@mindfiredigital/hub/file-kebabcase': 'error',
    '@mindfiredigital/hub/function-camelcase': 'error',
    '@mindfiredigital/hub/vars-camelcase': 'error',
  },
};

MERN Recommended Rules

The MERN configuration includes a set of recommended rules optimized for MongoDB, Express, React, and Node.js stack projects. Below is a table showing the recommended rules for both legacy and flat configurations:

| Rule Description | Legacy Configuration | Flat Configuration | Severity | | ------------------------------------------------------ | ---------------------------------------------------------- | ----------------------------------------- | -------- | | Enforce kebab-case for filenames | @mindfiredigital/hub/file-kebabcase | hub/file-kebabcase | error | | Enforce camelCase for variables | @mindfiredigital/hub/vars-camelcase | hub/vars-camelcase | error | | Enforce PascalCase for class names | @mindfiredigital/hub/class-pascalcase | hub/class-pascalcase | error | | Enforce camelCase for function names | @mindfiredigital/hub/function-camelcase | hub/function-camelcase | error | | Enforce descriptive function names | @mindfiredigital/hub/function-descriptive | hub/function-descriptive | warn | | Enforce React component names to match their filenames | @mindfiredigital/hub/react-component-name-match-filename | hub/react-component-name-match-filename | error | | Enforce PascalCase for React component filenames | @mindfiredigital/hub/react-filename-pascalcase | hub/react-filename-pascalcase | error |

These rules are automatically included when you extend the MERN configuration in your ESLint setup.

Example: Extending MERN Config

For eslint.config.mjs:

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

export default [
  // Extends the mern config preset from the plugin
  hub.configs['flat/mern'],
  {
    languageOptions: {
      globals: globals.builtin,
      parserOptions: {
        ecmaVersion: 2022,
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    // Add any additional rules or overrides here
  },
];

For .eslintrc.cjs:

module.exports = {
  env: {
    browser: true,
    es2024: true,
  },
  extends: ['plugin:@mindfiredigital/hub/mern'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    '@mindfiredigital/hub/file-kebabcase': 'error',
    '@mindfiredigital/hub/function-camelcase': 'error',
    '@mindfiredigital/hub/vars-camelcase': 'error',
  },
};

For .eslintrc.json:

{
  "env": {
    "es2024": true
  },
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": ["plugin:@mindfiredigital/hub/mern"]
  // Add any additional rules or overrides here
}

The MERN config includes the recommended rules listed in the table above. When extending this configuration, all these rules will be automatically applied to your project. You can override or add additional rules as needed in your specific configuration file.

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

You can extend the hub.configs presets directly into your flat ESLint configuration. When extending these presets, all rules in the respective category will be automatically added with their default configurations.

Example: Extending General Config

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

export default [
  // Extends the general config preset from the plugin
  hub.configs['flat/general'],
  {
    languageOptions: {
      globals: globals.builtin,
      parserOptions: {
        ecmaVersion: 2022,
        sourceType: 'module',
      },
    },
    // Add any additional rules or overrides here
  },
];

Example: Extending React Config

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

export default [
  // Extends the react config preset from the plugin
  hub.configs['flat/react'],
  {
    languageOptions: {
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 2022,
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    // Add any additional rules or overrides here
  },
];

Example: Extending Angular Config

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

export default [
  // Extends the angular config preset from the plugin
  hub.configs['flat/angular'],
  {
    languageOptions: {
      globals: globals.builtin,
      parserOptions: {
        ecmaVersion: 2022,
        sourceType: 'module',
      },
    },
    // Add any additional rules or overrides here
  },
];

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

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 all the rules from the plugin presets for the respective category.

Example: Extending General Config

{
  "env": {
    "es2024": true
  },
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "extends": ["plugin:@mindfiredigital/hub/general"]
  // Add any additional rules or overrides here
}

Example: Extending React Config

{
  "env": {
    "es2024": true
  },
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": ["plugin:@mindfiredigital/hub/react"]
  // Add any additional rules or overrides here
}

Example: Extending Angular Config

{
  "env": {
    "es2024": true
  },
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "extends": ["plugin:@mindfiredigital/hub/angular"]
  // Add any additional rules or overrides here
}

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.