For my React TypeScript project, the ESLint specifies using single-quotes in general, but double-quotes in JSX/TSX tags. Here’s a mini version of the “.eslintrc.json” file:

{
    "extends": "next/core-web-vitals",
    "rules": {
        "quotes": [ "error", "single" ],
        "jsx-quotes": [ "error", "prefer-double" ],
        // etc.
    }
}

VSCode correctly identifies quotes based on these settings, and will show an error if the quotes are incorrect. What I’m hoping to do is configure VSCode’s auto-complete to function the same way. When I’m in a “.tsx” file, auto-completing in the main code, such as file imports, should use single-quotes:

import React from 'react';

And auto-completes in the TSX, such as attribute values, should use double-quotes:

return <div className=""></div>;

VSCode correctly identifies the quotes in respect to the “.eslintrc.json” file, i.e. if I changed the quotes in either of the examples then it would label it as an error. But I can’t figure out how to get the auto-complete to function the same way.

By default, it uses other examples in the file to determine which type of quotes to use for auto-complete, but it’s either “all single-quotes” or “all double-quotes”.

If I add one of these to my “setting.json”, then it uses one type of quotes in all cases:

    "typescript.preferences.quoteStyle": "single"
    "typescript.preferences.quoteStyle": "double"

This setting seems to have no effect (and setting it to "braces" or "none" isn’t what I want):

    "typescript.preferences.jsxAttributeCompletionStyle": "auto"

I also tried using the Prettier extension, but I couldn’t get it to work in VSCode, so a solution that doesn’t use that would be ideal.

Is there a way to get the specific combination that I want?