Prettier single quote setting not respected in .tsx files (VS Code)

This was an odd one, but luckily fairly straightforward to fix. It is one of those problems I’ve fixed multiple times but never wrote down the solution for next time I run into it.

Problem

I am trying to using single quotes setting in Prettier, however, the formatted keeps double quotes. What the heck is going on?!

I have created the .prettierrc file with this single setting:

{
  "singleQuote": true
}

When I format the documents (.tsx files) Prettier runs without issues. You can double-check that’s the case by looking at the Output window in VSCode and selecting “Prettier” from the dropdown on the right:

No errors when running Prettier

Even though the output clearly shows the singleQuote setting is set to true, I am still seeing double quotes in my files when formatting the files.

I’ve also double-checked all other singleQuote settings in the VS Code configuration, just in case, and all of them were set to true.

Solution

In addition to the singleQuote setting, there’s also a setting called jsxSingleQuote. And, of course, the default value for that is false.

The solution is to set the jsxSingleQuote setting to true as well. This will change all double quotes in your .tsx files to single quote.

Note that you’d want to keep the singleQuote setting around as well, if you want the single quotes in your .ts file. For single quotes in the .tsx files, just set the jsxSingleQuote setting to true.

Here’s the ‘full’ .prettierrc :

{
  "singleQuote": true,
  "jsxSingleQuote": true
}