21

I work with EsLint and Prettier in visual code. Everything work well without singlequote and doublequote.

This is my .eslintrc file: { "parser": "babel-eslint", "plugins": ["prettier"], "rules": { "prettier/prettier": [ "error", { "singleQuote": true } ] } } When I use ctr+ shift+P and type "format Document". the double quote didn't change to single quote. If I use autofix, it changes but when I save it, the single quote turn into double quote.

How can I fix that problem.

nguyễn khánh công
  • 321
  • 1
  • 2
  • 7
  • 1
    I am also experincing this issue, I've added an issue to the project : https://github.com/esbenp/prettier-vscode/issues/187 – the_5imian Jul 30 '17 at 22:47

3 Answers3

11

As you already have singleQuote: true set in your prettier config, I suspect that you're seeing your single quotes converted to double quotes specifically inside your JSX tags. This is because Prettier has a separate rule for JSX:

"jsxSingleQuote": true

Without this, even with "singleQuote": true, Prettier will still convert single quotes within JSX to double.

According to Prettier, double quotes in JSX is the default because it's descended from HTML, where double quotes are more common.

Set "jsxSingleQuote": true wherever you have your Prettier config, and that should do the trick.

Andrew
  • 3,825
  • 4
  • 30
  • 44
9

This only happens if you have ' in your string e.g. ('it\'s a thing'). Prettier has this issue and there is apparently no solution to this.

My workaround is, using `` (string template syntax) for such strings and single quote for all other strings.

`it's a thing`

You don't have to escape this.

Nitin Jadhav
  • 6,495
  • 1
  • 46
  • 48
-4

just add the prettier configuration to your settings.json of visual code.

"prettier.singleQuote": true,
Matheus
  • 13
  • 1