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.
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:
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:
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.
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’