3

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?

jtucker7
  • 41
  • 4

1 Answers1

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.

jtucker7
  • 41
  • 4
  • 1
    This is at the editor's scope level. Whats great about autofix is that you can set it on project level and no one should install or configure anything in their editors. – Sagiv b.g Mar 27 '20 at 20:04
  • Just an FYI, having both Prettier and ESLint is not recommended, they are fundamentally different and they will inevitably create issues when used together. – William Dec 05 '20 at 23:15
  • @wil93 Prettier is completely able to run alongside linters such as ESLint. It does require some slight configuration, but once this is done they work seamlessly together - and using both is recommended. https://prettier.io/docs/en/integrating-with-linters.html – glenrothes Dec 22 '20 at 14:46
  • @glenrothes In my experience I found Prettier and ESlint to be stepping on each others' toes, and I had to learn the hard way that they weren't meant to be used together (at least not in my use case, and I suspect not in 99% of the use cases). The page you linked basically recommends disabling all the ESlint rules which conflict with Prettier, but that is not a solution sometimes (see [this example](https://stackoverflow.com/q/61952529), which shows an issue which I also faced, personally). In my use case (and probably also for other people) it made sense to enable ESlint autofixing in my IDE. – William Dec 22 '20 at 17:35
  • I have the inverted experience and find they are perfect to use together in 99% of cases - and it makes life so much nicer using them both! We use them together by default for all of our repositories, using a shared eslint and prettier config, makes it very simple. I can highly recommend. From what I can tell this is the default at Airbnb too, whose eslint config is the most commonly adopted open source one. – glenrothes Dec 22 '20 at 21:55
  • https://medium.com/airbnb-engineering/ts-migrate-a-tool-for-migrating-to-typescript-at-scale-cd23bfeb5cc > Our frontend codebase relies on a prettier-eslint setup — Prettier is used to autoformat code and ESLint ensures that the code follows best practices. – glenrothes Dec 22 '20 at 21:55
  • If you don't like using them together that is of course totally fine, but I would contest that it is 'not recommended' to run them together :) https://github.com/eslint/eslint#does-prettier-replace-eslint > You can use ESLint for everything, or you can combine both using Prettier to format your code and ESLint to catch possible errors. – glenrothes Dec 22 '20 at 21:58