ESLint Plugin Hub

A collection of custom ESLint rules to enforce coding standards and best practices in your projects.

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.