In my experience, the best combination is all 3, and here's why:

EditorConfig: This helps your editor produce code that looks like your style guide as you go. While this isn't strictly necessary in order to achieve your goals, it's nice if you're always looking at code that follows the same coding styles. Otherwise if you don't have EditorConfig, as you're typing your editor will auto-format differently to the rest of the code base, which is confusing. Of course if you've set up prettier it'll fix it before it goes into your code base, but still, why would you want to look at it in one format while you're writing it and then have it switch when you go to commit? Might as well be consistent.

Prettier: Automatically formats your code. I like to set it up to do this when I stage my files for a commit, so that it's physically impossible for me to commit code that doesn't match my style guide.

ESLint: So why would you want a linter too? Because ESLint does more than just style. It picks up when you declare variables you don't use, or reference things that aren't defined, amongst a few other niceties. So while its role diminishes somewhat compared to the days before prettier, it's still useful to have in a project to catch the other errors.

Let's see why we are getting this error.

1. If you have installed the prettier extension in your VSCode then the default values are set as mentioned here which can be seen by searching prettier in the settings of VSCode as well.

2. Now if you have enabled formatOnSave in your VSCode the prettier formats your code based on configs from the VSCode.

3. This error would occur when the configs from the VSCode conflicts from the configs mentioned in .prettierrc.json or .eslintrc.json.

   

Ex: Let's say your project is using a printWidth of 100 but the default printWidth is 80. ( Search prettier printwidth in VSCode settings )

In general the spacing errors will be autoCleared ( autoFormatted ) on save by prettier. But in this case that won't work.

Reason: Prettier is sticking to the config ( printWidth: 80 ) which is an error according to Repo's eslintrc/ prettierrc ( printWidth: 100 )

Fix here

1. Change default VSCode Prettier configs. -> This would be a bad idea as it will effect all your projects opened in VSCode.

2. Better way to fix this issue is by adding a .vscode/settings.json in the root directory of the repo.

3. Add these lines in the settings.json

   {
     "editor.codeActionsOnSave": { "source.fixAll": true },
     "editor.formatOnSave": false,
   } 
   

4. Now go to files with errors and save the files to format. Files will be formatted according to the configs mentioned in project's eslintrc/ prettierrc

5. Instead of going to each file you can fix all autofixable problems from the command line as below.

6. Go to package.json and add this line to your scripts.

   "lint-fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",

7. Now in the terminal run npm run lint-fix.