React.js

[Igorkowalski94]

All questions and answers related to React.js project structure.

[mapopp]

Hello everyone!

Would you tell me please how to check an empty folder using your plugin? I created a structure like this:

    "structure": {
        "children": [
            {
                "extension": "*"
            },
            {
                "children": []
            },
            {
                "name": "src",
                "children": [
                    {
                        "extension": "*"
                    },
                    {
                        "name": "app",
                        "children": []
                    },
                    {
                        "name": "pages",
                        "children": []
                    },
                    {
                        "name": "features",
                        "children": []
                    },
                    {
                        "name": "shared",
                        "children": []
                    }
                ]
            }
        ]
    }
}

I added an extra folder "bbb" to the src folder. The only way I can run eslint is
eslint ./ --ext .js,.jsx,.ts,.tsx.
And this works nice when I have any files in the folder "bbb". But how can I verify the case when this folder is empty? With what command?

This command eslint ./ seems like not working

[Igorkowalski94]

Unfortunately, eslint only looks at files, so a folder must have at least one file to be validated. Git works similarly, if you have an empty folder, git does not push it with the commit.

[Igorkowalski94]

I don't see much of a problem with this because empty folders won't be pushed to your PR. So your structure in the repository will still be correct, but locally you will see an empty folder. So I wouldn't worry about empty folders because git itself ignores them ;p

[mapopp]

Yes, it makes sense. Thank you, Igor!

[mapopp]

Can I ask one more question please?
What if I have the only *.css file in folder. Should I use the eslint with only one rule project-structure/file-structure in the config?

[Igorkowalski94]

https://github.com/Igorkowalski94/eslint-plugin-project-structure#step-1-optional

[mapopp]

Thank you!

[Igorkowalski94]

A small update, now you don't have to use the command, just change in .eslintrc. https://github.com/Igorkowalski94/eslint-plugin-project-structure?tab=readme-ov-file#step-1-optional

[pbockow]

What's about the extension restriction and children? I have a nested folder called "translations". Inside that folder I want to allow only two files: de.json and en.json. This doesnt work...
Does this mean that I cannot lint file extensions in nested folders?

The mentioned script is added.

[pbockow]

I've pinpointed the issue after alot of config debugging:

Here's my .eslintrc.cjs (relevant part):

}
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended-type-checked',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname,
    extraFileExtensions: ['.json'],
  },
  plugins: [
    'project-structure',
  ],
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      node: {
        paths: ['src'],
      },
    },
    'project-structure/config-path': 'project-structure.json',
  },
}

It's the plugin plugin:@typescript-eslint/recommended-type-checked in the "extends" section.

when running the script with this plugin, I get the error:

Oops! Something went wrong! :(

ESLint: 8.57.0

Error: Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Parser: /app/node_modules/eslint-plugin-project-structure/dist/parser.js
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.
Occurred while linting /app/frontend/src/App.tsx
    at throwError (/app/frontend/node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:40:11)
    at getParserServices (/app/frontend/node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:20:9)
    at create (/app/frontend/node_modules/@typescript-eslint/eslint-plugin/dist/rules/await-thenable.js:46:55)
    at Object.create (/app/frontend/node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:38:20)
    at createRuleListeners (/app/frontend/node_modules/eslint/lib/linter/linter.js:895:21)
    at /app/frontend/node_modules/eslint/lib/linter/linter.js:1066:110
    at Array.forEach (<anonymous>)
    at runRules (/app/frontend/node_modules/eslint/lib/linter/linter.js:1003:34)
    at Linter._verifyWithoutProcessors (/app/frontend/node_modules/eslint/lib/linter/linter.js:1355:31)
    at Linter._verifyWithConfigArray (/app/frontend/node_modules/eslint/lib/linter/linter.js:1807:21)

It seems that eslint-plugin-project-structure does not work correctly with @typescript-eslint/recommended-type-checked.

I've tried it with serveral different parserOptions, nothing helped.

I really would like to use both plugins.

Any idea what to adapt?

[Igorkowalski94]

Try this

{
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "project-structure"],
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: "./tsconfig.json",
  },
  extends: ["plugin:@typescript-eslint/recommended"],
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      node: {
        paths: ['src'],
      },
    },
    "project-structure/config-path": "projectStructure.json",
  },
  rules: { "project-structure/file-structure": "error" },
  overrides: [
    {
      files: ["*.ts", "*.tsx"],
      parser: "@typescript-eslint/parser",
      extends: [
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
      ],
    },
    {
      files: [
        "*.js",
        "*.jsx",
        "*.css",
        "*.sass",
        "*.less",
        "*.svg",
        "*.png",
        "*.jpg",
        "*.yml",
        "*.json",
      ],
      parser: "./node_modules/eslint-plugin-project-structure/dist/parser.js",
    },
  ],
};

and

eslint .

[pbockow]

Thanks! It is almost perfect :D I've adapted the eslintrc file as provided:

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: './tsconfig.json',
  },
  plugins: [
    'project-structure',
    '@typescript-eslint',
  ],
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      node: {
        paths: ['src'],
      },
    },
    'project-structure/config-path': 'project-structure.json',
  },
  rules: {
    // this rule enforces a consistent file and folder structure, specified in project-structure.json
    'project-structure/file-structure': 'error',
    '@typescript-eslint/naming-convention': [
      'error',
      {
        selector: 'variable',
        format: ['camelCase'],
        leadingUnderscore: 'allow',
      },
      {
        selector: 'variable',
        types: ['boolean'],
        format: ['PascalCase'],
        prefix: ['is', 'has', 'can', 'should', 'will', 'did'],
      },
    ],
  },
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      parser: '@typescript-eslint/parser',
      extends: ['plugin:@typescript-eslint/recommended-requiring-type-checking'],
    },
    {
      files: ['*.js', '*.jsx', '*.css', '*.sass', '*.less', '*.svg', '*.png', '*.jpg', '*.yml', '*.json'],
      parser: './node_modules/eslint-plugin-project-structure/dist/parser.js',
    },
  ],
};

As you can see, there is one particular rule regarding naming-convention. With only this rule, I still get the error:

Error: Error while loading rule '@typescript-eslint/naming-convention': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Parser: /apfrontend/node_modules/eslint-plugin-project-structure/dist/parser.js
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.

I've tried it with a minimal setup in a new react project via vite with the config you provided and this error still appears (only if that rule is present).
Maybe my tsconfig file helps, it is also in root, like .eslintrc.cjs:

{
  "compilerOptions": {
    /* Base options */
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "target": "ESNext",
    "verbatimModuleSyntax": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],

    /* Strictness */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,

    /* Typescript transpilation */
    "moduleResolution": "Node",
    "module": "ESNext",
    "isolatedModules": true,
    "jsx": "react-jsx",

    /* src alias recognition */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },

    /* proper type recognition for vite and vitest */
    "types": ["vite/client", "vitest", "vitest/globals"]
  },
  "include": ["src", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "vite.config.ts", "src/**/*.json"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

[Igorkowalski94]

You need to move all rules that use @typescript-eslint/parser to overrides

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: './tsconfig.json',
  },
  plugins: [
    'project-structure',
    '@typescript-eslint',
  ],
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      node: {
        paths: ['src'],
      },
    },
    'project-structure/config-path': 'project-structure.json',
  },
  rules: {
    // this rule enforces a consistent file and folder structure, specified in project-structure.json
    'project-structure/file-structure': 'error',
  },
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      parser: '@typescript-eslint/parser',
      extends: ['plugin:@typescript-eslint/recommended-requiring-type-checking'],
      rules: {

       '@typescript-eslint/naming-convention': [
            'error',
            {
              selector: 'variable',
              format: ['camelCase'],
              leadingUnderscore: 'allow',
            },
            {
              selector: 'variable',
              types: ['boolean'],
              format: ['PascalCase'],
              prefix: ['is', 'has', 'can', 'should', 'will', 'did'],
            },
        ],
      }
    },
    {
      files: ['*.js', '*.jsx', '*.css', '*.sass', '*.less', '*.svg', '*.png', '*.jpg', '*.yml', '*.json'],
      parser: './node_modules/eslint-plugin-project-structure/dist/parser.js',
    },
  ],
};

[pbockow]

Thanks man for your quick answers!
In the meanwhile I was investigating the problem a bit more and figured it finally out.
It was my mistake not providing more of the error message, sorry for that.

The error message also included:

Occurred while linting /app/frontend/src/components/AccessTokenActionsComponent/translations/en2.json

The linter tries to apply the naming-convention rule in json files. I suppose, it does so, because I've added .json files in the include array of the tsconfig.json because I need itfor other custom linting rules.

"include": ["src", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "vite.config.ts", "src/**/*.json"],

The solution was to exclude json files from the linting rule in the overrides:

    {
      files: ['**/*.json'],
      rules: {
        '@typescript-eslint/naming-convention': 'off',
      },
    },

@Igorkowalski94 thank you so much for creating this plugin and your quick help!
Keep up the good work!