"editor.codeActionsOnSave": {
  "source.fixAll": "explicit",
   // "source.sortImports": "explicit"
},

I have right now the same issue, I've solved it by commenting the source.sortImports property in my VSCode Open User settings file (Command+P -> >Open User Settings)

I beleive it will help you!

You can use VS Code .vscode/settings.json to organize imports.

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.organizeImports": true
}

In another project I have taken another look into this matter. The only solution is to turn the VSC organize import feature off and let the formatter/linter do the work. As I dont like my linter on autofix and I generally think its the job of the formatter and everyone should have one heres my solution:

• In a TS project I used prettier-plugin-organize-imports. This prettier plugin mimicks the formatting order of the organize imports feature, so its basically the same. Very nice, except it has a TS peer dependency.

Therefore a second solution for JS projects:

• Use the prettier plugin prettier-plugin-import-sort. This plugin needs you to add an order style of your choice with it. But it supports vanilla JS

As mentioned I have also found rules for eslint with an autofix, but I dont like that solution. The above packages fix the problem if you are using prettier.

Try adding a .prettierrc file to the root of your project and add the following to it:

{
  "singleQuote": true
}

I had a similar problem with Angular+Typescript, and it seems to be caused by the singleQuote option in Prettier. The VS Code Prettier extension has an option to set the preferred quote style, but it doesn't seem to respect that in this case.