Add new setting to control JSX quote style

[ianstormtaylor]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.68.0
• OS Version: macOS 12.4

Steps to Reproduce:

1. Starting typing a new JSX string attribute (eg. className) then hit Tab to accept an auto-completion.
2. There will be quotes added (eg. className='|') that are single quotes instead of double quotes. (This didn't used to happen in earlier versions of VSCode.)

This has been brought up in multiple issues:

• https://github.com/microsoft/vscode/issues/139864
• https://github.com/microsoft/vscode/issues/143164
• https://github.com/microsoft/vscode/issues/149752

But each time closed because it seems like the desired behavior and cause of the issue isn't clear.

The issue is that the most common JSX coding style uses double quotes (") regardless of whether the surrounding JavaScript/TypeScript code uses single or double quotes. So right now the auto-completion is inferring quote style from the surrounding non-JSX code and getting the quote style wrong.

There are three different quote-related settings:

I believe it could be solved a number of ways:

1. Use the HTML-specific setting for JSX code instead of the JS/TS-specific ones.
2. Or, add a new JSX-specific quote setting.
3. Or, augment the auto behavior to check nearby JSX code instead of nearby JS/TS code. (Might not catch first instance.)

Thanks for reading!

[vscodenpa]

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.68.1. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

[RyanCavanaugh]

Our best guess is that approximately everyone wants to use double-quotes here and we can just hardcode it. Does anyone disagree?

[ab18556]

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.68.1. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

I am using the latest version and the issue is still there. It's not a big deal, but it is still annoying to not be able to control javascript and jsx quotes separately. I like single for my js strings and double for my jsx tag attributes and I think a lot of people like it this way.

I don't think it should be hardcoded tho, some people might prefer the new behaviour.

[reorx]

Currently I use the following settings to fix this behavior:

    "[typescriptreact]": {
        "typescript.preferences.quoteStyle": "double",
    },

That is to override typescript.preferences.quoteStyle only for tsx files, so that single quote is still the prefered quote style for ts files.

I agree with a comment that says:

JSX should always default to double quotes because that's the preferred style for React. VSCode shouldn't be trying to infer anything from javascript because javascript strings are not the same as jsx attributes.

So I think hardcode double quote for JSX/TSX is the first step that should be take, the new settings to control that quote style is something that can be done later.

[onlyil]

This is a very confusing question indeed, and it remains open after two years, so i add "typescript.preferences.jsxAttributeCompletionStyle": "none" to settings.json