✨ [Feature request]: Configure ESLint and Prettier

[joshi-kaushal]

Is your feature request related to a problem? Please describe. It will be nice to have standardized rules for coding.

Describe the solution you'd like We can configure ESLint and Prettier in our project. Then if we set it up with Husky pre-push hook, the code will already be formatted and prettified before git push command is executed.

Describe alternatives you've considered

• Ignoring code formatting.
• Manually reading/reviewing every code for better formating.

Additional context I am happy to work on this issue.

[MOHAMED-EHAB-DEV]

Hey @atapas can you please go to my issues and pull requests to merge and close them

[atapas]

Hey @atapas can you please go to my issues and pull requests to merge and close them

Kindly comment on the relevant issue. I'm not sure which issue are you talking about?

[joshi-kaushal]

1. Should I enforce a code style or keep it only for syntax and problems.
2. If style guide, then which one? Airbnb, Standard or Google?
3. Just making sure, we are using TypeScript right?
4. Any prettier/linting rule you explicitly want to add/avoid? (Others can also help here)

[atapas]

Hey @atapas can you please go to my issues and pull requests to merge and close them

Kindly comment on the relevant issue. I'm not sure which issue are you talking about?

@Programming-School-Pro-Coding Do not link the issues unnecessarily. When you post an issue and PR with # they get linked. All the issues and PR you had mentioned in this issue are not related. Please comment on those issues directly. Also, most of them are "Review Requested". Thanks.

[atapas]

1. Should I enforce a code style or keep it only for syntax and problems.
2. If style guide, then which one? Airbnb, Standard or Google?
3. Just making sure, we are using TypeScript right?
4. Any prettier/linting rule you explicitly want to add/avoid? (Others can also help here)

Here is what I think:

-1. We should call out the restrictions we are planning to put as part of the linter. This can be done in a discussion. Also we need to make sure, all contributors are using the same linting styles when coding in their editor. -2. Airbnb -3. We use both JS and TS -4. Like the number 1 point, we should take it for discussion and conclude.

[joshi-kaushal]

Also we need to make sure, all contributors are using the same linting styles when coding in their editor.

1. We will have npm run lint and npm run lint:fix scripts in our project. By executing this contributors can manually lint their changes with lining rules specified in the project scope.
2. We can add husky pre-push, which will run the above scripts automatically before every push.

Correct me if I am wrong.

[atapas]

Also we need to make sure, all contributors are using the same linting styles when coding in their editor.

1. We will have npm run lint and npm run lint:fix scripts in our project. By executing this contributors can manually lint their changes with lining rules specified in the project scope.
2. We can add husky pre-push, which will run the above scripts automatically before every push.

Correct me if I am wrong.

You are right.

[atapas]

Also we need to make sure, all contributors are using the same linting styles when coding in their editor.

1. We will have npm run lint and npm run lint:fix scripts in our project. By executing this contributors can manually lint their changes with lining rules specified in the project scope.
2. We can add husky pre-push, which will run the above scripts automatically before every push.

Correct me if I am wrong.

You are right.

How about the existing code? It has to be linted as well right?

[joshi-kaushal]

Yes, it will be linted after running npm run lint:fix command for the first time.

I can test that in my local machine first.

[atapas]

I see a bunch of warnings in the console which dev should Ideally taken care of. We need to make sure, warnings are not getting in as well.

[joshi-kaushal]

useEffect missing dependency warnings must be resolved manually

[joshi-kaushal]

Are you creating a new discussion for the fourth point of https://github.com/reactplay/react-play/issues/263#issuecomment-1144349678? The list of all the possible settings can be found here.

About the first point in the same thread: By enforcing code style, we choose one of the two popular styles - google or Airbnb or create one ourselves. And since you said Airbnb I don't think we need to have another discussion about that.

[atapas]

Are you creating a new discussion for the fourth point of #263 (comment)? The list of all the possible settings can be found here.

About the first point in the same thread: By enforcing code style, we choose one of the two popular styles - google or Airbnb or create one ourselves. And since you said Airbnb I don't think we need to have another discussion about that.

As you are driving it, I would suggest you open the discussion. But start the work towards it. We can settle on things while doing the review as well.

About rest of the points, I agree.

[joshi-kaushal]

I am done with configuring ESLint and Prettier in our project. The only things that are remaining are lintng the code and configuring husky.

Linting without setting rules would give us thousands of errors and warnings. Hence I suggest having a set of rules first.

Other points I wanted to mention are:

1. This will not solve every warning/error automatically. We will have to fix a few things manually.
2. Sometimes Husky declines push if linting is not done properly. But we can bypass it if we want.

[atapas]

@joshi-kaushal Can we roll it out?

[joshi-kaushal]

I'll try to make a PR by EOD

[github-actions[bot]]

There hasn't been any activity on this issue recently, and in order to prioritize active issues, it will be marked as stale. Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by leaving a 👍 Because this issue is marked as stale, it will be closed and locked in 7 days if no further activity occurs. Thank you for your contributions!

[joshi-kaushal]

@atapas what happened boss? I see you also reopened 5 more PRs

[github-actions[bot]]

There hasn't been any activity on this issue recently, and in order to prioritize active issues, it will be marked as stale. Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by leaving a 👍 Because this issue is marked as stale, it will be closed and locked in 7 days if no further activity occurs. Thank you for your contributions!