chore(docs): update ESLint with Prettier, react, jsx-a11y

[josefaidt]

Description

Updates to ESLint documentation to include:

• Prettier integration
  • rules from default starter
• react plugin
  • recommended rule set
  • sample rules
  • link to supported rules
• jsx-a11y plugin
  • recommended rule set
  • sample rule set
  • link to supported rules
• write scripts to lint and fix
• integrate with VS Code
  • includes settings to enable auto-fix

Also updated commands and wording as necessary.

Related Issues

Related to #11778

[josefaidt]

Per #11778 I will be updating this doc again this evening to include script modification and add instructions for integrating ESLint with VSCode

[DSchau]

I think these are excellent improvements. Using ESLint for real code issues and Prettier for stylistic concerns is a great approach--and we do it with our Gatsby monorepo!

I'm pretty comfortable merging this. @marcysutton want to take a look?

[josefaidt]

@marcysutton @petarblazevski

[marcysutton]

Dang-I just saw this PR made substantial changes to the eslint doc file. My apologies for taking so long on this one, as it is pretty outdated now in comparison. Do you want to take another look to see if there are any changes to be made?

[josefaidt]

@marcysutton I don't mind revisiting this, however that PR mentioned changed the entire tone of the doc, and this PR was opened to provide changes that would coincide with what was being discussed in issue #11778

Again, I don't mind revisiting, however I would like to get more information as to how we are wanting to shape the tone of the doc, as well as what is covered (ESLint + Prettier, VSCode integration, etc).

Should I update this doc? Or the new one?

[DSchau]

@josefaidt I almost feel like this is two different docs at this point.

Setting up ESLint is oftentimes (most of the time?) done separately from Prettier, although there are certainly valid use cases in setting them up at the same time to tap into the power of one or the other.

However - since we want our docs to be approachable to all skill levels and focused on just the purpose of the doc (e.g. ESLint), I think the PR that landed the changes in #12998 is a better fit for this functionality because it configures ESLint with a simple, extensible set up that can be built upon easily.

I do certainly see the point of a prettier + eslint set-up doc, just not sure it should be in the ESlint set up doc if that makes sense! What I would propose is something like:

• Create a new prettier doc (docs/prettier.md)
• Focus on the simple case (e.g. adding prettier as a devDep, using an npm script, etc.)
• Provide paths to learning more (e.g. a section on integrating ESLint + Prettier makes perfect sense)

As such - let's close this out and better focus our efforts on the above suggestions.

Sorry about the crossed wires here and for the lengthy delay process! We very much value the work you did in getting this set-up and apologize that it went un-merged this time! 💜

cc @marcysutton