JsPrettier in Sublime 3 does not single quote className

Question

I´m using Sublime Text 3 with JSPrettier to format Javascript and JSX code.

I have the following set in my JSPrettier configuration:

// If true, will use single instead of double quotes
"singleQuote": true

Even with that, when formatting the code JSPrettier still insists on putting double quote on className and other JSX properties, like:

<div className="uxm-details-header-buttons">

or

<Icon name="refresh" />

I really expected everything with single quote, keeping double ones for special cases.

Any hint on how to solve that ?

Answer 1

This is currently not possible using just prettier. Quotes in JSX will always be double and prettier will ignore this setting .

If you want to understand the motivation behind this decision, you can read this GitHub thread . The gist of the argument for keeping JSX quotes as double is to enforce a style across the community and the fewer config options the better.

Any hint on how to solve that ?

You can run your code through prettier-eslint . This formats your code via prettier, and then passes the result of that to eslint --fix . This way you can get the benefits of prettier's superior formatting capabilities, but also benefit from the configuration capabilities of eslint.

Answer 2

In Sublime Text 3 this can be achieved by modifying the user preferences section of the package. ( Preferences > Package Settings > JSPrettier)

{
"prettier_options": 
  {
  "singleQuote": true
  }
}