@ladamczyk/qoq-eslint-v9-ts-react-structure

Rationale

A folder/file structure preset 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. Check out all our @ladamczyk/qoq-eslint-v9-* packages.

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.

Install

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

Usage

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); override structureRoot to fit a single package inside a monorepo.

Package exports both CommonJS and ESM code, just import it in Your eslint config file.

For CommonJS

const { baseConfig } = require('@ladamczyk/qoq-eslint-v9-ts-react-structure');

module.exports = [
  {
    ...baseConfig,
    files: ['**/*.{ts,tsx}'],
  },
];

For ESM

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

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

Single package in a monorepo

createFolderStructure is exported separately so you can scope the same structure to one package. It defaults to structureRoot: 'src'; override it to point the rule at the package folder:

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' }),
      ],
    },
  },
];

Rules preview with ESLint Config Inspector

To preview all rules defined by this config simply run:

npx -y @ladamczyk/qoq-eslint-v9-ts-react-structure

Last but not least

Feel free to join us, please read General Contributing Guidelines

CLI technical documentation can be found here