TypeScript + React Structure

The @ladamczyk/qoq-eslint-v9-ts-react-structure preset — a folder/file structure config for TypeScript + React projects, built on eslint-plugin-project-structure. It encodes a feature-sliced layout (components, features, helpers, config, store, services) with sensible casing conventions, so structure review is automated rather than manual.

The preset is opinionated yet intentionally permissive — it validates the folder taxonomy and naming without forcing strict folder-name inheritance, so it can be adopted on an existing codebase without a wall of errors, then tightened over time.

npm install -D @ladamczyk/qoq-eslint-v9-ts-react-structure

This is a standalone config block — apply it separately from your linting template, because it uses the project-structure parser instead of the TypeScript parser. The structure is rooted at src/ by default; files outside src/ are left untouched.

import { baseConfig } from '@ladamczyk/qoq-eslint-v9-ts-react-structure';

export default [
  {
    ...baseConfig,
    files: ['**/*.{ts,tsx}'],
  },
];

To scope the same structure to a single package in a monorepo, import createFolderStructure and override its structureRoot:

import { createFolderStructure } from '@ladamczyk/qoq-eslint-v9-ts-react-structure';
import { projectStructureParser, projectStructurePlugin } from 'eslint-plugin-project-structure';

export default [
  {
    files: ['packages/ui/**/*.{ts,tsx}'],
    plugins: { 'project-structure': projectStructurePlugin },
    languageOptions: { parser: projectStructureParser },
    rules: {
      'project-structure/folder-structure': [
        2,
        createFolderStructure({ structureRoot: 'packages/ui/src' }),
      ],
    },
  },
];

Browse every enabled rule, plugin, and file match below — or open the inspector in its own tab.

@ladamczyk/qoq-eslint-v9-ts-react-structureOpen full view ↗