Giters

square / eslint-plugin-square

An ESLint plugin containing custom JavaScript, Ember, React, TypeScript rules and configurations tailored to Square's needs.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Discuss React conventions for future releases

rachid-block opened this issue · comments

commented

Description

I wanted to discuss the filename rules for the React config. React does not have strong opinions on how to structure a project. The current eslint-plugin-square config rules change the filename conventions for files in src/components. This has two effects:

  1. it causes the project to use a mix of kebab and pascal case filenames
  2. it implies that components should go in src/components

For the first point, is there a good reason not to stick to the base kebab case throughout the project?

For the second point, I think there are a couple of paths to consider. On one hand I see the value of eslint-plugin-square enforcing a convention. On the other hand, my team has struggled with a large project that is organized by file type. This is exacerbated by the fact that our project is worked on by multiple independent teams. However that use case may not be indicative of the problems a normal React project faces at Block.

I personally lean towards one of React's suggested options: grouping by features or routes. This lets you group functions specific to a component near the component without having too much code in the component file. eslint-plugin-square would not be able to enforce this, because each project would have it's own features. This flexibility would allow teams of various sizes to decide how their independent projects should be organized.

Additional Notes

  1. I was curious about the use case for this rule override in the React config. It targets src/setupTests.* which seems overly specific. Should that have a comment explaining its use?

  2. Have we discussed using eslint-plugin-react-hooks?

commented

CC: @ghaagsma @maxbeatty who have both worked on the react config and may have insights into why it's setup the way it is and whether it needs to be generalized further (or removed if too prescriptive or not needed anymore).

commented

I did previously mention removing the config, but I noticed that it's pulling in eslint-plug-react here, so we don't want to get rid of that part.

commented

Update on this issue. We have another issue (#824) that looks like it has better traction for getting the eslint-plugin-react-hooks into the eslint-plugin-square rules. As for the file management ideas, our team is going to experiment with a different set of rules than what is in eslint-plugin-square, and we'll report our experience to see if this should be adopted by other teams starting new React projects. Given this, @bmish , should we close this issue for now?

commented

Fine to close this. Open to considering improvements related to file management at a later point.

commented

Will reopen later after we have experimented with alternate conventions (hopefully with some suggested eslint rules to enforce those conventions 😁 )