Change the default value for singleQuote to true

[lipis]

From https://github.com/prettier/prettier/issues/3503#issuecomment-359863688

[mvolkmann]

Every JavaScript survey I've ever seen shows that most developers prefer single quotes for literal strings.

[yvele]

Most of popular languages (go, C#, java, C, C++, rust) strictly uses double quotes, why should there be an exception? 🤔 (python uses both)

Other languages

Language	Double quotes	Single quotes
go	Yes
Python	Yes	Yes
C#	Yes
java	Yes
C	Yes
C++	Yes
rust	Yes
Lua	Yes	Yes

Other code formatters

Name	Language	Quotes
Black	Python	Double quotes (discussion)

Document languages

Language	Double quotes	Single quotes
CSS	Yes	Yes
HTML	Yes	Yes

Data related languages

Language	Double quotes	Single quotes
JSON	Yes
YAML	Yes	Yes
GraphQL	Yes
XML	Yes

JavaScript related Guidelines

Guidelines	Quotes
Airbnb	Single quotes
Google	Single quotes
React	Single quotes but Double quotes for JSX properties
TypeScript	Double quotes (for Contributors)
Vues.js	Don't mind
jQuery	Double quotes
Node.js	Single quotes (for Contributors)
Deno	Double quotes

Console

See also how console outputs

Console	Quotes
Chrome	Double quotes
Firefox	Double quotes
Edge/IE	Double quotes
Safari	Double quotes
Node.js	Single quotes
Deno	Double quotes

[j-f1]

Because single quotes are less noisy.

[lipis]

At least 50% less noisy :)

[alo]

This is from the Google JavaScript Style Guide

Use single quotes

Ordinary string literals are delimited with single quotes ('), rather than double quotes (").

[a118n]

Both Airbnb and Google style guides use single quotes. Switching this to default would be quite sensible, since a lot of companies/devs use their guides.

[craigmorrison]

A large reason for single quotes being common in JS compared to other langauges is that it reads well when quoting HTML and some selectors.

For example:

document.querySelector('[data-foo="bar"]')

The alternatives are to:

• escape the quotes, which is harder to read
• use single quotes with HTML, which is stranger to most people than using them in JS
• use template strings but there is still a lot of ES5 being written

[yvele]

@a118n alright I've updated my post with those informations 😉

[TakahiRoyte]

In addition to @craigmorrison 's comment, big JavaScript frameworks, such as Angular and Vue, often contains JavaScript implementation inside HTLM attributes.

// Vue example
<button @click="submit('string value')">Submit</button>

// Angular example
<button (click)="service.submit('string value')">Submit</button>

For such a case single quotes must be used in order to avoid interference with HTML's double quotation. The important part is how JavaScript is used, not what other languages use.

I strongly recommend single quotes to be used.

[kachkaev]

Prettier supports plugins for python, php, swift, elm, java, pg, ruby, etc. Most of the languages use double quotes (see comment above), so won't a switch cause more harm and ambiguity than benefits?

I agree that single quotes are 50% less noisy and was preferring them for a couple of years after looking at the airbnb style guide. I now use double quotes in JS and TS files again simply because that's Prettier's default and can't say it's terrible. On a positive side, the quotes are the same in JS and JSON, which simplifies string search (e.g. package names).

Airbnb and Google style guides are JavaScript-only, while Prettier is slowly becoming a cross-language tool. IMO this needs to be taken into account when making the final decision for 2.0. And, of course, the diffs that zero-config users would have is also something worth thinking about.

[brocoli]

There's also the "avoidEscape" setting in eslint, which is pretty useful for readability, be it with single or double quotes.

[j-f1]

That’s already what we do @brocoli and I agree that it’s helpful.

[lydell]

The new Python formatter "black" uses double quotes: https://github.com/ambv/black/#strings. Discussion: https://github.com/ambv/black/issues/118

[j-f1]

@iamclaytonray Don’t worry — we’d never intentionality break your code. If the language only supports double quotes, we’ll print double quotes. Since Prettier isn’t a general formatter (we need to manually add support for each new language), there shouldn’t be issues with quotes being changed illegally.

[dandonahoe]

So is there a way to override the double quote default? I'm tearing my hair out trying to get this working. It totally breaks all of our style rules.

[mvolkmann]

Yes. See https://prettier.io/docs/en/options.html#quotes.

[dandonahoe]

@mvolkmann Thanks for the quick response. I've been toying with that but I'm not seeing it work. Here's my setup, with the ugly red circles being points of configuration. All packages are up to date and listed at the bottom. If you could take a look, I'd really appreciate it. Anything look funky here?

"eslint-config-prettier": "^4.1.0",
"eslint-plugin-prettier": "^3.0.1",
"prettier": "1.14.3",
"tslint-config-prettier": "^1.18.0"

[hawkrives]

@dandonahoe Could you open a new issue for your problem? Ideally with a reproduction on the playground (https://prettier.io)

[mvolkmann]

@dandonahoe I've never seen the approach you are using where reading your .prettierrc file inside your .eslintrc file. I thought it was enough for the .prettierrc file to be present.

I have a pretty detailed description of the way I configure ESLint and Prettier at https://github.com/mvolkmann/talks/blob/master/eslint-prettier-2019.key.pdf. Maybe that will help.

[dandonahoe]

@mvolkmann That approach is meant to solve two use cases.

1 - Allow the IDE to read the .prettierrc 2 - I have a pre-commit git hook that lints staged files, but that only reads the .eslintrc.js, so sucking in the .prettierrc means I only have to add prettier rules in one spot.

Not my idea, but based off this boilerplate: https://github.com/react-boilerplate/react-boilerplate

[mvolkmann]

I wonder why the IDE can't get the Prettier settings from .prettierrc. I use VS Code and it does that.

On Thu, Mar 7, 2019 at 8:14 AM Dan Donahoe notifications@github.com wrote:

@mvolkmann https://github.com/mvolkmann That approach is meant to solve two use cases.

1 - Allow the IDE to read the .prettierrc 2 - I have a pre-commit git hook that lints staged files, but that only reads the .eslintrc.js, so sucking in the .prettierrc means I only have to add prettier rules in one spot.

Not my idea, but based off this boilerplate: https://github.com/react-boilerplate/react-boilerplate

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/prettier/prettier/issues/4102#issuecomment-470540813, or mute the thread https://github.com/notifications/unsubscribe-auth/AAE10MqdDBf63hSqBtq7ovPS84Xljqa9ks5vUR6ugaJpZM4ScMrl .

-- R. Mark Volkmann Object Computing, Inc.

[dandonahoe]

@mvolkmann I use VS Code as well, but as you mentioned, I'll open a separate issue so I don't pollute this one. Thanks again.

[tkrotoff]

https://github.com/airbnb/javascript/issues/269#issuecomment-107319162:

Holding down the shift key every time you want a string kinda stinks. Your carpal tunnel will thank you for using single quotes.

[lydell]

@tkrotoff That’s not a good argument in the context of Prettier. Because with Prettier you can type either " or ', whichever you want, and then when you run Prettier the quotes are automatically changed.

[karlhorky]

I guess this is not a candidate for inclusion in 2.0 (#6888), right?

[kachkaev]

@karlhorky looking at the comments, there seems to be no consensus on this one. Guess it would not be wise to get such a massive change through in the last minute before 2.0 is out.

[karlhorky]

it would not be wise to get such a massive change through in the last minute before 2.0 is out

Hmm, there are still a number of open PRs that will land before 2.0 (which are also big changes to defaults), so I'm unsure that this argument holds water.

there seems to be no consensus on this one

This is more of an issue, surely, although there are a lot of positive signs already:

1. The votes show the clearest picture so far (👍 106 👎 17)
2. A few of the Prettier team have voiced their opinions so far:

👍 @j-f1 👍 @lipis

3. The reason that the default was double quotes is because @jlongster used them at the time of creation of Prettier. The team decided that this was not a good default afterwards. (@vjeux "we want to switch the default" in https://github.com/prettier/prettier/issues/1105#issuecomment-290594825)

Maybe more of the Prettier team can chime in on changing the default on this one. cc @suchipi @thorn0 @evilebottnawi @lydell @prettier/core

[alexander-akait]

:+1: on single by default

[ExE-Boss]

I’d prefer if all programming languages converged on double‑quotes, including JavaScript.

[karlhorky]

I would personally prefer consistency across languages too, but that's a bigger fish to fry - JavaScript (including the ecosystem) is different in many ways to other languages, and a JavaScript tool needs to embrace that.

[karlhorky]

I've opened a PR at #7466, just in case this will get the approvals that it needs.

[lydell]

• trailingComma es5: Makes code easier to edit and produces better git diff.
• arrowParens always: Makes code easier to edit. Especially good for TypeScript.
• eol lf: Helps collaboration across OS:es.
• singleQuote: 100% bike shedding.

So I’d say we follow black’s lead and stick with the double quotes. Personally, I program a lot in Elm and F# these days which do not allow single quotes for strings, so I’m really used to double quotes now. Before I learned JS I learned HTML and CSS where double quotes is really common.

[Shinigami92]

• trailingComma es5: Makes code easier to edit and produces better git diff.
• arrowParens always: Makes code easier to edit. Especially good for TypeScript.
• eol lf: Helps collaboration across OS:es.
• singleQuote: 100% bike shedding.

So I’d say we follow black’s lead and stick with the double quotes. Personally, I program a lot in Elm and F# these days which do not allow single quotes for strings, so I’m really used to double quotes now. Before I learned JS I learned HTML and CSS where double quotes is really common.

Always keep in mind that this changes the default setting and does not force you to change it in the configuration file

[lydell]

How would you motivate the change in the 2.0 blog post?

[karlhorky]

How would you motivate the change in the 2.0 blog post?

@lydell I've started a bit of the "motivation" explanation in the unreleased changelog file in the PR here:

The JavaScript ecosystem has largely standardized on single quotes, with it being the most popular style seen in the wild.

https://github.com/prettier/prettier/pull/7466/files#diff-6afbd7a88bf7df26bba2e36de87663ffR16

I also further expanded on this in the answer to you in the PR:

https://github.com/prettier/prettier/pull/7466#issuecomment-579875882

If this should be fleshed out more for the 2.0 blog post, maybe some others could help out? I could also do some further writing here.

[karlhorky]

Ok, so maybe the supporters here can pull together and help me with some statistics:

@lydell has asked for some justification of the "most common" statement in the other pull request, so let's pull together and get some examples!

Here are my ideas for some examples of sources:

• Popular JavaScript projects on GitHub
• public documentation of large JavaScript projects
• public blog posts (dev.to, Sitepoint, developer blogs, etc.)
• public forums (Stack Overflow)
• developer surveys (@mvolkmann here: https://github.com/prettier/prettier/issues/4102#issuecomment-370476135)
• style guides (a bunch in #4102)

I will also take a look this evening.

[karlhorky]

Popular JavaScript Projects (combined with "GitHub Usage")

1. Byte Archer

Project	Dominant quote style
async	' - 76% of quotes
express	' - 92% of quotes
lodash	' - 73% of quotes
request	' - 97% of quotes
underscore	' - 78% of quotes
angular.js	' - 58% of quotes
react	' - 52% of quotes

Double

• TypeScript

Public Library Documentation

I went to the documentation websites of many popular JavaScript libraries to see what kinds of quotes that I would find in the examples.

I included both older, popular libraries as well as newer ones.

Single

• Express
• React
• Request
• Jest
• Hapi
• webpack
• Cheerio
• Lodash
• Vue.js
• Mocha
• Vorpal
• Commander.js
• Socket.io
• Async
• Axios
• Next.js
• Postgres.js
• node-postgres
• winston
• Angular
• lit-html
• Passport
• Pug

• chalk: single
• bootstrap: single
• vue: single
• knex: single
• seneca: single
• svelte: single
• redux: single
• Node.js: single

Show Screenshots


Mixed (backticks, double quotes, single quotes)

• Gatsby

• moment: mixed

Show Screenshots

  

Double

• TypeScript

Public Service Documentation

TODO

Public Blog Posts

TODO

Public Forums

TODO

Developer Surveys

TODO

Style Guides

Single

• npm style guide
• Google Style Guide
• Airbnb Style Guide
• facebook
• grunt
• gulp
• node
• wikimedia
• wordpress
• yandex

Double

• crockford
• d3 (though not defined in .eslintrc)
• jquery

[mvolkmann]

I tried to find survey results on this and struck out. The closest I could find is this: https://2ality.com/2012/09/javascript-quotes.html

---

R. Mark Volkmann Object Computing, Inc.

[kachkaev]

@mvolkmann that's 2012, which is nearly a decade ago. Using references of this quality, we can also 'prove' that no-semicolons is better than semicolons. That's what standard.js does in their docs:

↓

• http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding
• http://inimino.org/%7Einimino/blog/javascript_semicolons
• https://www.youtube.com/watch?v=gsfbh17Ax9I

🙂

[mvolkmann]

Maybe Prettier should run its own 2020 poll on this and any other topics being considered.

[Shinigami92]

Maybe Prettier should run its own 2020 poll on this and any other topics being considered.

[karlhorky]

I tried to find survey results on this and struck out.

@mvolkmann All good, we might find something if we keep looking.

If not, there are enough other sources to be overwhelmingly convincing.

[lydell]

Some more documentation sites:

• chalk: single
• moment: mixed
• bootstrap: single
• vue: single
• knex: single
• seneca: single
• svelte: single
• redux: single
• Node.js: single

[karlhorky]

@lydell Thanks, added.

[kachkaev]

@Shinigami92 I don’t think that referring to the reactions for this issue is the right way to decide if the change should be done in v2.0.

• The poll is nearly two years old and some opinions could have changed
• People may be generally pro single quotes, but think that the right time for a change is v3.0 and not v2.0. At the time of writing this comment, the milestone for this issue is v3.0.

[kachkaev]

In general, I don’t think that Prettier should pick defaults just based on what’s currently popular. It’s mission is not to follow some fashion, but rather to decide what’s fashionable. None of the other default value options were changed based on stats. Instead, the guiding principle was a better developer experience, aiming for fewer ugly edge cases. Arrow function parentheses, semicolons and new lines are great examples here.

I don’t see how changing default quotes to single would improve DX (except for resulting less ‘ink’, which is good, but not enough to qualify). Objectively, it’s probably the opposite:

• inconsistency between js and other languages like json, jsx, html, css and those supported by Prettier plugins
• Difficulties searching for something in your codebase (a need to search twice or write a regexp, which covers both " and ').

If you are a completely new developer who just starts coding, would you really appreciate the ‘cleanness’ of single quotes? Or would it just give you an extra headache while learning?

If the entire community is doing something for many years, it does not mean that this cannot be challenged or that it does not need to change. This can apply to Prettier’s defaults, but can also mean questioning widely seen code styling preferences.

To sum up, I’d suggest postponing the decision and call for a proper research, which would not just involve votes by JS ‘veterans’ (who are experienced enough to discover the github issue or start their own open-source repo l). This is still quite a small proportion of the entire community of devs.

[Shinigami92]

jsxSingleQuotes is its own attribute! And it should stick to default false!!!

const greeting = 'Hello, world!';
const element = (
  <h1 className="greeting">
    {greeting}
  </h1>
);

[Shinigami92]

@Shinigami92 I don’t think that referring to the reactions for this issue is the right way to decide if the change should be done in v2.0.

• The poll is nearly two years old and some opinions could have changed
• People may be generally pro single quotes, but think that the right time for a change is v3.0 and not v2.0. At the time of writing this comment, the milestone for this issue is v3.0.

Sorry, that was actually a bit trolly

But I think we have now found some statistics and repositories that use single quotes

[kachkaev]

@Shinigami92 imagine I’m a new developer, today is my first lesson on JSX. I feel pretty overwhelmed because even JavaScript alone feels too much for me. I also heard of JSON, but I’m not sure what that is yet.

Could you please explain why you have a mix of quotes in your above example? Which ones are right where? Note that the simplicity and clarity of your answer may affect my whole career. I’m still not sure if I’m ‘smart enough’ to do programming.

[Shinigami92]

If we are targeting v3.0 I would prefer something like

{
  "quoteStyle": {
    "single": ["js", "ts", ...],
    "double": ["html", "pug", "jsx", "tsx", ...]
  }
}