eslint-config-nfq

• eslint-config-nfq
  • Description:
  • Getting started
    • Installation
    • PeerDependencies
  • Usage
  • Custom rules
  • Extending the config
    • Extend settings
    • Extend globals
    • Extend rules
  • Support

Description:

This is the shared ESLint configuration used by .NFQ projects. It targets ESLint flat config, includes JavaScript, TypeScript, React, and Cypress overrides, and ships a small set of custom @nfq/* rules.

Getting started

Installation

npm install -D @nfq/eslint-config

yarn add -D @nfq/eslint-config

pnpm add -D @nfq/eslint-config

PeerDependencies

• eslint >= 9

Usage

Create eslint.config.mjs (flat config) and follow the structure used in this repo:

import {defineConfig} from 'eslint/config';

import {NFQEslintConfig} from '@nfq/eslint-config';

export default defineConfig([
    {
        extends: [NFQEslintConfig],
        ignores: [
            'dist/**/*',
            'types/**/*'
        ]
    }
]);

This config provides:

• JS, TS, and Cypress overrides
• TypeScript parser and project discovery
• Shared plugins and settings
• Defaults for globals and common resolvers

Custom rules

All custom rules live under the @nfq namespace.

| Rule | Description | | --- | --- | | @nfq/component-file-structure | Enforce React component file layout, displayName assignment, and named exports. | | @nfq/component-single-hook | Allow at most one hook call plus guard clauses and returns in component bodies. | | @nfq/cypress-mount-hook | Enforce cy.mountHook(s) usage and required then chaining in Cypress tests. | | @nfq/hexagonal-dependency-direction | Enforce hexagonal dependency direction and boundary-specific imports. | | @nfq/no-empty-lines-in-objects | Disallow empty lines inside object literals. | | @nfq/no-empty-lines-in-types | Disallow empty lines inside TypeScript interface and type literal bodies. | | @nfq/no-magic-numbers | Disallow magic numbers with configurable exceptions. | | @nfq/no-unbound-method | Warn on unbound class methods used as callbacks and forbid constructor binding. | | @nfq/object-property-newline | Enforce object properties on separate lines, with configurable exceptions. | | @nfq/require-getcy | Require cy.getCy instead of cy.get (except aliases). | | @nfq/sort-keys | Require object keys to be sorted. | | @nfq/styled-components-order | Enforce styled component definition order and dependency order. |

Extending the config

You can extend settings, globals, and rules without redeclaring everything by importing the exported helpers.

Extend settings

import {NFQEslintConfig, settings} from '@nfq/eslint-config';

export default [
    ...NFQEslintConfig,
    {
        settings: {
            ...settings.settings,
            '@nfq': {
                ...settings.settings['@nfq'],
                ignoredProperties: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']
            }
        }
    }
];

Extend globals

import {NFQEslintConfig, globals} from '@nfq/eslint-config';

export default [
    ...NFQEslintConfig,
    {
        languageOptions: {
            globals: {
                ...globals,
                MY_GLOBAL: 'readonly'
            }
        }
    }
];

Extend rules

import {NFQEslintConfig} from '@nfq/eslint-config';
import {nfq} from '@nfq/eslint-config/rules/common/plugins';

export default [
    ...NFQEslintConfig,
    {
        rules: {
            '@nfq/no-magic-numbers': [nfq['@nfq/no-magic-numbers'][0], {
                ...nfq['@nfq/no-magic-numbers'][1],
                ignoreFunctions: [...nfq['@nfq/no-magic-numbers'][1].ignoreFunctions, 'myFunction']
            }]
        }
    }
];

Support

Christoph Kruppe - [https://github.com/ckruppe] - [email protected]