eslint-plugin-hub

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

React Rules

Angular Rules

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:

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.