Single quote in tsx file with prettier

Question

For 2-3 weeks, while I didn't change anything in prettier file, VSC started changing single quotes to double quotes, while it was always single quotes. I tried many options but it keeps changing it. Heres my .prettierrc

{
  "trailingComma": "es5",
  "printWidth": 200,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "tabWidth": 2,
  "quoteProps": "as-needed"
}

EDIT: I think, that it is a matter of .tsx files, as prettier has just option for .jsx files but still didn't find a solution.

Not really a solution. I was using prettier in the beginning but found it had a lot of quirks with VSCode. I switched to eslint, which works much better. — The Fool, Nov 28 '19 at 07:12
I have tslint in my project (as it is written in typescript) but when I want to format according to tslint config it doesn't follow those rules from there. — heisenberg7584, Nov 28 '19 at 07:14
I think this is your problem. You have more than one tool trying to apply rules. I think you should remove one of them, preferable prettier. And then try to configure the remaining properly. — The Fool, Nov 28 '19 at 07:15
But tslint will just show error in terminal, just prettier formats files and for now there is just problem with quoting in components files (.tsx) — heisenberg7584, Nov 28 '19 at 07:55
I can see you have "jsxSingleQuote": true, . this should solve the problem as long as you are using the latest prettier. I had the same problem but after adding that all the double quotes in my jsx files were turned to double single quotes — Dijiflex, Nov 10 '20 at 16:31

score 35 · Answer 1 · answered Dec 28 '20 at 22:41

35

In .prettierrc, add:

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

answered Dec 28 '20 at 22:41

Edmar Miyake

12,047
3
37
38

4

This works in `.tsx` too. Thanks! – Shreshth Jan 14 '22 at 12:06
`jsxSingleQuote` did it for me as with `singleQuote` only it didn't work. Thank you. – Vladimir Todorov Mar 23 '22 at 14:03

score 2 · Answer 2 · answered Jun 29 '20 at 12:54

2

create a .prettierrc file on your root folder and add:

{
  "singleQuote": true
}

answered Jun 29 '20 at 12:54

Rip3rs

1,284
12
21

Blazej Lalowicz · Answer 3 · 2019-11-29T17:10:04.573

1

I have the same issue for a few days. I checked all the settings and they seem to be fine.

At the moment THE ONLY thing that helps is downgrading down to the previous version of Prettier in my case it was version 2.3.0 (I didn't check all the versions between this and the latest but few of them had the same issue)

edited Nov 29 '19 at 17:10

answered Nov 28 '19 at 15:07

Blazej Lalowicz

11
2

you mean version of Prettier? – heisenberg7584 Nov 28 '19 at 16:51
Yes, the version of Prettier – Blazej Lalowicz Nov 29 '19 at 17:09

score 0 · Answer 4 · answered Nov 28 '19 at 08:10

0

On your User Settings make sure you have the following line:

"prettier.singleQuote": true

You can access the user settings by CTRL+, on windows or CMD+, on mac.

If you're using the settings GUI just search for single quote and check/uncheck the Prettier: Jsx Single quote and Prettier: Single quote

answered Nov 28 '19 at 08:10

I am L

4,288
6
32
49

I have it all set like you mentioned but is still changes it to double quotes in my .tsx files – heisenberg7584 Nov 28 '19 at 09:02

score 0 · Answer 5 · answered Oct 01 '21 at 00:53

Best place to read up on this configuration is the website. https://prettier.io/docs/en/configuration.html

If you are using a package.json, create a new key if you dont have a "prettier" key.

"prettier":{
    "singleQuote": true
}

Or you could create a .prettierrc file written in JSON and add the same key pair value.

score 0 · Answer 6 · answered Feb 18 '22 at 07:11

0

add tsxSingleQuote: true, in prettierrc.js file

answered Feb 18 '22 at 07:11

Sushan Yadav

111
2
4

Single quote in tsx file with prettier

6 Answers6