React.js #4
Replies: 4 comments 17 replies
-
|
Hello everyone! Would you tell me please how to check an empty folder using your plugin? I created a structure like this: I added an extra folder "bbb" to the src folder. The only way I can run eslint is This command |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
Yes, it makes sense. Thank you, Igor! |
Beta Was this translation helpful? Give feedback.
-
|
Can I ask one more question please? |
Beta Was this translation helpful? Give feedback.
-
|
https://github.com/Igorkowalski94/eslint-plugin-project-structure#step-1-optional |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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... The mentioned script is added. |
Beta Was this translation helpful? Give feedback.
-
|
I've pinpointed the issue after alot of config debugging: Here's my .eslintrc.cjs (relevant part): 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: 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? |
Beta Was this translation helpful? Give feedback.
-
|
Try this and
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks! It is almost perfect :D I've adapted the eslintrc file as provided: 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. 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). |
Beta Was this translation helpful? Give feedback.
-
|
You need to move all rules that use @typescript-eslint/parser to overrides |
Beta Was this translation helpful? Give feedback.
-
|
Thanks man for your quick answers! 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. The solution was to exclude json files from the linting rule in the overrides: @Igorkowalski94 thank you so much for creating this plugin and your quick help! |
Beta Was this translation helpful? Give feedback.
-
Unexpected Folder Structure Errors in eslint-plugin-project-structureHello, I'm encountering unexpected errors while using eslint-plugin-project-structure. I believe my folder structure follows the defined rules, but the plugin is flagging many files and folders as incorrect. My folder structure definition is as follows: export const folderStructureConfig = createFolderStructure({
structure: {
children: [
{ name: "*" },
{
name: "src",
children: [
{ name: "App.tsx" },
{ name: "main.tsx" },
{ name: "vite-env.d.ts" },
{
name: "@commons",
children: [
{ name: "components", ruleId: "componentRule" },
{ name: "constants", ruleId: "tsRule" },
{ name: "hooks", ruleId: "hooksRule" },
{ name: "layouts", ruleId: "componentRule" },
{ name: "routes", ruleId: "componentRule" },
{ name: "services", ruleId: "tsRule" },
{ name: "stores", ruleId: "tsRule" },
{ name: "types", ruleId: "tsRule" },
{ name: "utilities", ruleId: "tsRule" },
],
},
{ name: "assets", children: [{ name: "*" }] },
{ name: "domains", ruleId: "domainRule" },
{
name: "styles",
children: [
{ name: "*.styles.ts" },
{ name: "Theme", children: [{ name: "*.theme.ts" }] },
],
},
],
},
],
},
rules: {
hooksRule: {
children: [
{ name: ".gitkeep" },
{ name: "use{PascalCase}.ts" },
{
name: "use{PascalCase}",
children: [
{ name: ".gitkeep" },
{ name: "use{PascalCase}.ts" },
{ name: "use{PascalCase}", ruleId: "hooksRule" },
],
},
],
},
componentRule: {
children: [
{ name: ".gitkeep" },
{ name: "{PascalCase}(.styled)?.tsx" },
{
name: "{PascalCase}",
children: [
{ name: ".gitkeep" },
{ name: "{PascalCase}(.styled)?.tsx" },
{ name: "{PascalCase}", ruleId: "componentRule" },
],
},
],
},
tsRule: {
children: [
{ name: ".gitkeep" },
{ name: "{camelCase}(.*)?.ts" },
{
name: "{camelCase}",
children: [
{ name: ".gitkeep" },
{ name: "{camelCase}(.*)?.ts" },
{ name: "{camelCase}", ruleId: "tsRule" },
],
},
],
},
domainRule: {
children: [
{
name: "{kebab-case}",
children: [
{ name: "apis", ruleId: "tsRule" },
{ name: "components", ruleId: "componentRule" },
{ name: "hooks", ruleId: "hooksRule" },
{ name: "layouts", ruleId: "componentRule" },
{ name: "pages", ruleId: "componentRule" },
{ name: "types", ruleId: "tsRule" },
],
},
{ name: "{kebab-case}", ruleId: "domainRule" },
],
},
},
});However, I'm getting the following errors: These errors seem inconsistent with the rules I've defined. Specifically:
How can I resolve these issues? I'm wondering if I've defined the rules incorrectly or if the plugin is misinterpreting the rules. eslint-plugin-project-structure version: [2.1.12] Thank you for your help. |
Beta Was this translation helpful? Give feedback.
-
|
At first glance, the errors seem correct; from what I can see, there is a mistake in the configuration. You are describing the folders incorrectly; it should be done this way: {
"structure": [
{ "name": "*" },
{
"name": "src",
"children": [
// You can write it this way with an additional rule (domains_folder).
{ "ruleId": "domains_folder" },
// Or this way, without an additional rule (domains_folder).
{
"name": "domains",
"children": [{ "ruleId": "domain_folder" }],
},
],
},
],
"rules": {
// domains/domain-folder/... All files and folders of the domain_folder rule.
"domains_folder": {
"name": "domains",
"children": [{ "ruleId": "domain_folder" }], // In folder `domains`, there can only be folders that meet rule `domain_folder`.
},
// domain-folder/components/... All files and folders of the components_folder rule.
// domain-folder/layouts/... All files and folders of the components_folder rule.
// domain-folder/pages/... All files and folders of the components_folder rule.
"domain_folder": {
"name": "{kebab-case}",
"children": [
{ "ruleId": "components_folder" }, // The entire rule will be used.
{ "name": "layouts", "ruleId": "components_folder" }, // "name": "layouts" will overwrite "name": "components"
{ "name": "pages", "ruleId": "components_folder" }, // "name": "pages" will overwrite "name": "components"
],
},
// components/ComponentName/... All files and folders of the component_folder rule.
"components_folder": {
"name": "components",
"children": [{ "ruleId": "component_folder" }], // In folder `components`, there can only be folders that meet rule `component_folder`.
},
// ComponentName/.gitkeep
// ComponentName/ComponentName.styled.tsx
// ComponentName/ComponentName.tsx
// ComponentName/components/... All files and folders of the components_folder rule.
"component_folder": {
"name": "{PascalCase}",
"children": [
{ "name": ".gitkeep" },
// Probably here you want the file to have the same name as the folder, so it should be "{ParentName}(.styled)?.tsx".
{ "name": "{PascalCase}(.styled)?.tsx" },
{ "ruleId": "components_folder" },
],
},
},
}As for: You don’t have the specified You need to adjust the rest of the configuration based on this example. If it’s still unclear or you encounter any issues, feel free to ask for help. |
Beta Was this translation helpful? Give feedback.
-
|
I’ve added some additional comments. |
Beta Was this translation helpful? Give feedback.
-
|
Also upgrade to 2.2.10 |
Beta Was this translation helpful? Give feedback.
-
|
In this case, the two rules contradicted each other, and the plugin didn't know which one to follow. With the fix in version 2.2.10, it will now remove the duplicate and consider the first rule. {
domainRule: {
children: [
{
// In the domain folder, there should be folders that follow the kebab-case
name: "{kebab-case}",
children: [
{ name: "apis", ruleId: "tsRule" },
{ name: "components", ruleId: "componentRule" },
{ name: "hooks", ruleId: "hooksRule" },
{ name: "layouts", ruleId: "componentRule" },
{ name: "pages", ruleId: "componentRule" },
{ name: "types", ruleId: "tsRule" },
],
},
// In the domain folder, there should be folders that follow the kebab-case (Duplication)
{ name: "{kebab-case}", ruleId: "domainRule" },
],
},
}This will make the error message clearer and better direct you to the problem. |
Beta Was this translation helpful? Give feedback.
-
All questions and answers related to React.js project structure.
Beta Was this translation helpful? Give feedback.
All reactions