ESLint Flat Config from Digital Element

Shareable ESLint 10 flat config for TypeScript and React projects. Includes accessibility, import ordering, promise safety, stylistic, and security rules out of the box.

Install

# npm
npm i -D eslint @delement/eslint-config-master

# yarn
yarn add -D eslint @delement/eslint-config-master

# pnpm
pnpm add -D eslint @delement/eslint-config-master

Requirements

• Node.js 24+
• ESLint 10+
• Flat config (eslint.config.js|mjs|ts)

Quick Start

// eslint.config.ts
import eslintConfig from "@delement/eslint-config-master";
import type { Linter } from "eslint";

// project local rules
const local: Linter.Config[] = [];

// merged config
const config: Linter.Config[] = [
  ...eslintConfig,
  ...local,
];

export default config;

Code Examples

Example TypeScript code that matches the default rules:

type TUser = {
  name: string;
};

interface IUserService {
  getName: (user: TUser)=> string;
}

const user: TUser = {
  name: "Sam",
};

const userService: IUserService = {
  getName: (currentUser: TUser): string => {
    return currentUser.name;
  },
};

export {
  user,
  userService,
};

Example React TSX code that matches the default rules:

import {
  useEffect,
  useMemo,
  useState,
} from "react";

interface ICounterProps {
  start: number;
}

const Counter = ({ start }: ICounterProps): JSX.Element => {
  const [ value, setValue ] = useState(start);

  useEffect(() => {
    setValue(start + 1);
  }, [ start ]);

  const items = useMemo(() => [ 1, 2, 3 ], []);

  return (
    <div>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
      <div>{value}</div>
    </div>
  );
};

export {
  Counter,
};

What Is Included

• JavaScript and TypeScript linting (.js, .jsx, .mjs, .cjs, .ts, .tsx, .mts, .cts)
• React Hooks and React Refresh rules
• JSX accessibility rules
• Import rules and export sorting
• JSDoc checks
• Promise and security-focused rules
• Naming conventions for TypeScript interfaces and type aliases

Important Defaults

• @ts-ignore is disallowed
• TypeScript enum names must use E prefix (for example, EStatus)
• Empty object types ({}) are disallowed in TypeScript
• Unnecessary type constraints (for example, T extends unknown) are warned
• Anonymous default exports are disallowed
• Functions prefixed with use are allowed even without Hook calls
• useContext is allowed (React 19 use migration is not enforced)
• Anchors with href="#" are allowed (invalid href aspect is relaxed)
• Children.map, Children.toArray, and cloneElement are allowed
• child_process usage is warned by security rules
• Inline ESLint config comments are allowed (noInlineConfig: false)
• Unused eslint-disable comments are treated as errors
• Default ignored folders: node_modules, build, public, assets, dist, .temp, tmp, temp, .cache, cache, .husky

Narrow Runtime Environment (Optional)

The config ships with mixed browser + node globals by default. If you want stricter environment checks in your app, use built-in helpers:

import eslintConfig, {
  withBrowserGlobals,
  withNodeGlobals,
} from "@delement/eslint-config-master";

export default [
  ...eslintConfig,
  withBrowserGlobals(),
  withNodeGlobals(),
];

You can pass your own file patterns:

import eslintConfig, {
  withBrowserGlobals,
  withNodeGlobals,
} from "@delement/eslint-config-master";

export default [
  ...eslintConfig,
  withBrowserGlobals([ "src/client/**" ]),
  withNodeGlobals([ "src/server/**" ]),
];