create-react-app now comes with eslint, how are folks running autofix now? - create-react-app

Question

I used to build React apps starting with create-react-app, then I would install eslint with plugins and a custom config, run an eslint init, and add some custom scripts to run eslint and eslint auto fix easily and automatically on certain actions like a build. Create-react-app now comes with eslint already installed and "ready to go." In VS Code, I see the linter running in my "problems" tab. How do I now run eslint autofix? That is the main benefit of a linter in my opinion.
I use VS Code. I have spent some hours trying different ways to set up linters in create-react-app. I believe that the inclusion of eslint has changed the state of this quite a bit and made most of those posts simply outdated. I had a setup working for about a year using Prettier to avoid ejecting eslint, but an unresolved issue has caused that to stop working. So I have taken a step back to try to understand the state of the create-react-app dev environment now. Are folks using VS Code with create-react-app? If so, do you have autofix working?

Answer 1

I found one way to get an autofix on save in a create-react-app in VS Code. I don't know if it's the best one. It's simpler than I thought.
After running:
create-react-app my-app
Run:
npm install --save-dev prettier
Add to root directory:
.prettierrc
{
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
Install VS Code prettier extension.
Find VS Code user settings json. Mine is:
{
"typescript.check.npmIsInstalled": false,
"window.zoomLevel": 0,
"editor.minimap.enabled": false,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"eslint.alwaysShowStatus": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"files.autoSave": "onFocusChange",
"prettier.semi": false,
"prettier.tabWidth": 4
}
Now, if I save, I will get autofixes.
Most of the tutorials online assume that eslint is not already installed with create-react-app and/or that eslint and prettier must be integrated with plugins and an eslintrc file. My fix may be missing something, as it may not be making use of eslint or there may be conflicts between the two linters at some stage.