@blumintinc/eslint-plugin-blumint NPM

@blumintinc/eslint-plugin-blumint

Custom eslint rules for use at BluMint

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install @blumintinc/eslint-plugin-blumint:

npm install @blumintinc/eslint-plugin-blumint --save-dev

Usage

Add @blumintinc/blumint to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "@blumintinc/blumint"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "blumint/rule-name": "error"
    }
}

Or use the recommended config:

{
    "extends": ["some-other-plugin", "plugin:@blumintinc/blumint/recommended"]
}

Rules

💼 Configurations enabled in.\ ⚠️ Configurations set to warn in.\ ✅ Set in the recommended configuration.\ 🔧 Automatically fixable by the --fix CLI option.\ 💭 Requires type information.

Name	Description	💼	⚠️	🔧	💭
array-methods-this-context	Prevent misuse of Array methods in OOP	✅
avoid-utils-directory	Enforce using util/ instead of utils/ directory	✅		🔧
class-methods-read-top-to-bottom	Ensures classes read linearly from top to bottom.	✅		🔧
consistent-callback-naming	Enforce consistent naming conventions for callback props and functions	✅		🔧
dynamic-https-errors	Dynamic error details should only be in the third argument of the HttpsError constructor. The second argument is hashed to produce a unique id.	✅
enforce-assert-throws	Enforce that functions with assert- prefix must throw an error or call process.exit(1)	✅
enforce-assertSafe-object-key	Enforce the use of assertSafe(id) when accessing object properties with computed keys that involve string interpolation or explicit string conversion.	✅		🔧
enforce-callable-types	Enforce Props and Response type exports in callable functions	✅
enforce-callback-memo	Enforce useCallback for inline functions and useMemo for objects/arrays containing functions in JSX props to prevent unnecessary re-renders. This improves React component performance by ensuring stable function references across renders and memoizing complex objects.	✅
enforce-centralized-mock-firestore	Enforce usage of centralized mockFirestore from predefined location	✅		🔧
enforce-css-media-queries	Enforce CSS media queries over JS breakpoints	✅
enforce-dynamic-file-naming	Enforce .dynamic.ts(x) file naming when @blumintinc/blumint/enforce-dynamic-imports or @blumintinc/blumint/require-dynamic-firebase-imports rule is disabled	✅
enforce-dynamic-firebase-imports	Enforce dynamic importing for modules within the firebaseCloud directory to optimize initial bundle size. This ensures Firebase-related code is only loaded when needed, improving application startup time and reducing the main bundle size.	✅
enforce-dynamic-imports	Enforce dynamic imports for specified libraries to optimize bundle size	✅
enforce-exported-function-types	Enforce exporting types for function props and return values	✅
enforce-firestore-doc-ref-generic	Enforce generic argument for Firestore DocumentReference, CollectionReference and CollectionGroup	✅			💭
enforce-firestore-facade	Enforce usage of Firestore facades instead of direct Firestore methods	✅
enforce-firestore-path-utils	Enforce usage of utility functions for Firestore paths to ensure type safety, maintainability, and consistent path construction. This prevents errors from manual string concatenation and makes path changes easier to manage.	✅
enforce-firestore-set-merge	Enforce using set() with { merge: true } instead of update() for Firestore operations to ensure consistent behavior. The update() method fails if the document does not exist, while set() with { merge: true } creates the document if needed and safely merges fields, making it more reliable and predictable.	✅		🔧
enforce-id-capitalization	Enforce the use of "ID" instead of "id" in user-facing text	✅		🔧
enforce-identifiable-firestore-type	Enforce that Firestore type definitions extend Identifiable and match their folder name	✅
enforce-memoize-async	Enforce @Memoize() decorator on async methods with 0-1 parameters to cache results and prevent redundant API calls or expensive computations. This improves performance by reusing previous results when the same parameters are provided, particularly useful for data fetching methods.	✅		🔧
enforce-microdiff	Enforce using microdiff for object and array comparison operations	✅		🔧
enforce-mock-firestore	Enforce using the standardized mockFirestore utility instead of manual Firestore mocking or third-party mocks. This ensures consistent test behavior across the codebase, reduces boilerplate, and provides type-safe mocking of Firestore operations.	✅
enforce-mui-rounded-icons	Enforce the use of -Rounded variant for MUI icons	✅		🔧
enforce-object-literal-as-const	Enforce that object literals returned from functions should be marked with `as const` to ensure type safety and immutability.	✅		🔧
enforce-positive-naming	Enforce positive naming for boolean variables and avoid negations	✅
enforce-props-argument-name	Enforce using "Props" suffix in type names for parameter objects	✅		🔧
enforce-react-type-naming	Enforce naming conventions for React types	✅		🔧
enforce-realtimedb-path-utils	Enforce usage of utility functions for Realtime Database paths	✅
enforce-render-hits-memoization	Enforce proper memoization and usage of useRenderHits and renderHits	✅
enforce-safe-stringify	Enforce using safe-stable-stringify instead of JSON.stringify to handle circular references and ensure deterministic output. JSON.stringify can throw errors on circular references and produce inconsistent output for objects with the same properties in different orders. safe-stable-stringify handles these cases safely.	✅		🔧
enforce-serializable-params	Enforce serializable parameters in Firebase Callable/HTTPS Cloud Functions to prevent runtime errors. Firebase Functions can only pass JSON-serializable data, so using non-serializable types like Date, DocumentReference, or Map will cause failures. Use primitive types, plain objects, and arrays instead, converting complex types to their serializable representations (e.g., Date to ISO string).	✅
enforce-singular-type-names	Enforce TypeScript type names to be singular	✅
enforce-timestamp-now	Enforce the use of Timestamp.now() for getting the current timestamp in backend code. This rule prevents using alternatives like Timestamp.fromDate(new Date()) or other date creation patterns that could lead to inconsistency.	✅		🔧
enforce-verb-noun-naming	Enforce verb phrases for functions and methods	✅
ensure-pointer-events-none	Ensure pointer-events: none is added to non-interactive pseudo-elements	✅		🔧
export-if-in-doubt	All top-level const definitions, type definitions, and functions should be exported
extract-global-constants	Extract static constants and functions to the global scope when possible, and enforce type narrowing with as const for numeric literals in loops	✅
generic-starts-with-t	Enforce TypeScript generic types to start with T	✅
global-const-style	Enforce UPPER_SNAKE_CASE and as const for global static constants	✅		🔧
key-only-outermost-element	Enforce that only the outermost element in list rendering has a key prop	✅		🔧
no-always-true-false-conditions	Detect conditions that are always truthy or always falsy	✅
no-async-array-filter	Disallow async callbacks in Array.filter() as they lead to incorrect filtering. Since async functions return Promises which are always truthy, the filter will keep all elements regardless of the async check's result. Use Promise.all() with map() first, then filter based on the resolved results.	✅
no-async-foreach	Disallow Array.forEach with an async callback function as it does not wait for promises to resolve. This can lead to race conditions and unexpected behavior. Use a standard for...of loop for sequential execution or Promise.all with map for concurrent execution.	✅
no-class-instance-destructuring	Disallow destructuring of class instances to prevent loss of `this` context	✅		🔧
no-complex-cloud-params	Disallow passing complex objects to cloud functions	✅
no-compositing-layer-props	Warn when using CSS properties that trigger compositing layers, which can impact performance. Properties like transform, opacity, filter, and will-change create new GPU layers. While sometimes beneficial for animations, excessive layer creation can increase memory usage and hurt performance. Consider alternatives or explicitly document intentional layer promotion.	✅
no-conditional-literals-in-jsx	Disallow use of conditional literals in JSX code	✅
no-entire-object-hook-deps	Avoid using entire objects in React hook dependency arrays when only specific fields are used, as this can cause unnecessary re-renders. When a hook only uses obj.name but obj is in the deps array, any change to obj.age will trigger the hook. Use individual fields (obj.name) instead of the entire object. Requires TypeScript and `parserOptions.project` to be configured.	✅		🔧	💭
no-explicit-return-type	Disallow explicit return type annotations on functions when TypeScript can infer them. This reduces code verbosity and maintenance burden while leveraging TypeScript's powerful type inference. Exceptions are made for type guard functions (using the `is` keyword), recursive functions, overloaded functions, interface methods, and abstract methods where explicit types improve clarity.	✅		🔧
no-filter-without-return	Disallow Array.filter callbacks without an explicit return (if part of a block statement)	✅
no-firestore-jest-mock	Prevent importing firestore-jest-mock in test files	✅		🔧
no-firestore-object-arrays	Disallow arrays of objects in Firestore type definitions to optimize performance and avoid unnecessary fetches		✅
no-hungarian	Disallow Hungarian notation in locally declared variables, types, and classes	✅
no-jsx-in-hooks	Prevent hooks from returning JSX	✅
no-jsx-whitespace-literal	Disallow the use of {" "} elements in JSX code	✅
no-margin-properties	Discourage using margin properties (margin, marginLeft, marginRight, marginTop, marginBottom, mx, my, etc.) for spacing in MUI components. Instead, prefer defining spacing with padding, gap, or the spacing prop for more predictable layouts.	✅
no-memoize-on-static	Prevent using @Memoize() decorator on static methods	✅
no-misused-switch-case	Prevent misuse of logical OR (\|\|) in switch case statements, which can lead to confusing and error-prone code. Instead of using OR operators in case expressions, use multiple case statements in sequence to handle multiple values. This improves code readability and follows the standard switch-case pattern.	✅
no-mixed-firestore-transactions	Prevent mixing transactional and non-transactional Firestore operations within a transaction	✅
no-mock-firebase-admin	Prevent mocking of functions/src/config/firebaseAdmin	✅
no-object-values-on-strings	Disallow Object.values() on strings as it treats strings as arrays of characters, which is likely unintended behavior.	✅
no-redundant-param-types	Disallow redundant parameter type annotations	✅		🔧
no-type-assertion-returns	Enforce typing variables before returning them, rather than using type assertions or explicit return types	✅		🔧
no-unnecessary-destructuring	Avoid unnecessary object destructuring when there is only one property inside the destructured object	✅		🔧
no-unnecessary-verb-suffix	Prevent unnecessary verb suffixes in function and method names	✅		🔧
no-unpinned-dependencies	Enforces pinned dependencies	✅		🔧
no-unsafe-firestore-spread	Prevent unsafe object/array spreads in Firestore updates	✅		🔧
no-unused-props	Detect unused props in React component type definitions	✅		🔧
no-unused-usestate	Disallow unused useState hooks	✅		🔧
no-useless-fragment	Prevent unnecessary use of React fragments			🔧
no-uuidv4-base62-as-key	Disallow using uuidv4Base62() to generate keys for elements in a list or loop	✅
omit-index-html	Disallow the use of "index.html" in URLs	✅		🔧
prefer-batch-operations	Enforce using setAll() and overwriteAll() instead of multiple set() or overwrite() calls	✅		🔧
prefer-clone-deep	Prefer using cloneDeep over nested spread copying	✅		🔧
prefer-destructuring-no-class	Enforce destructuring when accessing object properties, except for class instances	✅		🔧
prefer-fragment-component	Enforce using Fragment imported from react over shorthand fragments and React.Fragment	✅		🔧
prefer-fragment-shorthand	Prefer <> shorthand for <React.Fragment>			🔧
prefer-global-router-state-key	Enforce using global constants or type-safe functions for useRouterState key parameter	✅
prefer-settings-object	Enforce using a settings object for functions with multiple parameters	✅		🔧
prefer-type-over-interface	Prefer using type alias over interface	✅		🔧
prefer-usecallback-over-usememo-for-functions	Enforce using useCallback instead of useMemo for memoizing functions	✅		🔧
prefer-usememo-over-useeffect-usestate	Prefer useMemo over useEffect + useState for pure computations. Using useEffect to update state with a pure computation causes unnecessary re-renders.	✅
prefer-utility-function-over-private-static	Enforce abstraction of private static methods into utility functions	✅
react-usememo-should-be-component	Enforce that useMemo hooks explicitly returning JSX should be abstracted into separate React components	✅
require-dynamic-firebase-imports	Enforce dynamic imports for Firebase dependencies	✅		🔧
require-hooks-default-params	Enforce React hooks with optional parameters to default to an empty object	✅		🔧
require-https-error	Enforce using proprietary HttpsError instead of throw new Error or firebase-admin HttpsError in functions/src	✅
require-image-optimized	Enforce using ImageOptimized component instead of next/image or img tags	✅		🔧
require-memo	React components must be memoized	✅		🔧
require-usememo-object-literals	Enforce using useMemo for inline object/array literals passed as props to JSX components to prevent unnecessary re-renders. When object/array literals are defined inline in JSX, they create new references on every render, causing child components to re-render even if the values haven't changed. Wrap them in useMemo to maintain referential equality.	✅
semantic-function-prefixes	Enforce semantic function prefixes over generic ones like "get" and "update"	✅
sync-onwrite-name-func	Ensure that the name field matches the func field in onWrite handlers	✅		🔧
use-custom-link	Enforce using src/components/Link instead of next/link	✅		🔧
use-custom-memo	Enforce using src/util/memo instead of React memo	✅		🔧
use-custom-router	Enforce using src/hooks/routing/useRouter instead of next/router	✅		🔧