conflict about semicolon inside interface

[milad2golnia]

Consider following code:

interface createReviewType {
  createReviewData: {
    serviceID: string;
    rating: string;
    comment: string;
    photos: {
      file: number;
    }[];
  };
}

In above code, ESlint complains about semicolon at end of lines and suggest to convert them to comma:

Replace `;` with `,`eslint (prettier/prettier)

If I click on Quick Fix > Fix all auto-fixable problems, ESlint modify code to below style:

interface createReviewType {
  createReviewData: {
    serviceID: string,
    rating: string,
    comment: string,
    photos: {
      file: number,
    }[],
  };
}

But if I press Ctrl + S to save the file, prettier again modify files and restore the first style:

interface createReviewType {
  createReviewData: {
    serviceID: string;
    rating: string;
    comment: string;
    photos: {
      file: number;
    }[];
  };
}

Configurations:

1. I don't have any .prettierrc
2. Content of .eslintrc.json:

   {
   "env": {
   "browser": true,
   "es2021": true
   },
   "extends": ["google", "prettier"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
   "ecmaVersion": "latest",
   "sourceType": "module"
   },
   "plugins": ["@typescript-eslint", "prettier"],
   "rules": {
   "prettier/prettier": [
     "error",
     {
       "singleQuote": true,
       "parser": "flow"
     }
   ]
   }
   }

3. Content of .settings.json:

   {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "prettier.singleQuote": true,
   "prettier.printWidth": 80,
   "[javascript]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[json]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "eslint.alwaysShowStatus": true,
   "eslint.codeAction.showDocumentation": {
   "enable": true
   },
   "editor.codeActionsOnSave": {
   "source.fixAll.eslint": true
   },
   "eslint.validate": ["javascript", "typescript"]
   }

Versions

$ npx prettier --version
2.7.1
$ npx eslint --version
v8.22.0

Reporduce

A repository with minimal setup is provided: https://github.com/milad2golnia/eslintConfigPrettier/

There are two branches:

master: Without any VSCode configuration.
vscode With VSCode configuration to use realted extension to ESlint and Prettier.

[lydell]

Hi! Can you make a repo that I can clone to reproduce the issue, using only CLI tools (no VSCode)?

Right now I’m missing your Prettier and ESLint versions, and when having VSCode involved that adds so many other parameters that could go wrong.

[JounQin]

https://antfu.me/posts/why-reproductions-are-required

[milad2golnia]

@lydell When I run npx eslint-config-prettier ./src/test.ts it doesn't detect any issue so I think the problem is associated with VSCode and ignoring it, is not a good option.

Versions

I have installed all of modules locally and most of them are up to date:

$ npx prettier --version
2.7.1
$ npx eslint --version
v8.22.0

Also I'll create the requested repo and comment it here subsequently.

[milad2golnia]

The requested repository is ready with minimal setup:
https://github.com/milad2golnia/eslintConfigPrettier/

There are two branches:

1. master: Without any VSCode configuration.
2. vscode With VSCode configuration to use realted extension to ESlint and Prettier.

NOTE: I Edit main Issue and add this new information.

[lydell]

Awesome! I’m missing one thing from your repo though: The steps to reproduce. I need the exact commands to run, a description of what happens and a description of what you want to happen.

[milad2golnia]

@lydell Thank you for spending time on my issue.

I think I found my problem: I was trying to format code separately with Prettier and I expected ESlint to don't complain about it because it should be compatible with it.
BUT It seems there is no way to run Prettier separately from ESlint. After adding Prettier as dependency of ESlint I'm allowed to just run ESlint.
So I decided to inactivate Auto Save for Prettier in .vscode/settings.json and just enable Auto Save for ESlint

If my suggestion is wrong, tell me to open this issue again.