cannot format doubleQuotes to singleQuote in single javascript file #1085

Fenglinwanyue · 2019-11-21T08:48:32Z

version:3.8.0
please ignore my english,and fix this bug

andrewmcdnz · 2019-11-21T09:27:00Z

Wow, this was driving me CRAZY. I had no idea what I had done to cause Prettier to suddenly start changing my single quotes to double quotes every time I format (which is every time I save!)

At least I'm not the only one.

Found a workaround: Roll back to 3.7.0

For what it's worth, the relevant settings from my settings.json:
"typescript.preferences.quoteStyle": "single", "javascript.preferences.quoteStyle": "single", "prettier.singleQuote": true, "editor.defaultFormatter": "esbenp.prettier-vscode"

Fenglinwanyue · 2019-11-21T09:39:16Z

For what it's worth, the relevant settings from my settings.json

how ？roll back to 3.7.0？I do not know what should i do，can you tell me the details？thanks

andrewmcdnz · 2019-11-21T09:46:51Z

how ？roll back to 3.7.0？I do not know what should i do，can you tell me the details？thanks

Sure, you can follow the instructions here: https://stackoverflow.com/a/53755378

bianca-morariu · 2019-11-21T10:32:33Z

hey,
I am having the same issue.
Reverting to 3.7.0 solved my problem.

Fenglinwanyue · 2019-11-21T10:45:44Z

look this file, roll back is so easy.

ntotten · 2019-11-21T14:24:38Z

Please provide repro step and the output log. I cannot spend time on bugs that don’t have all the information. This bug will automatically be closed in 5 days unless more info is provide. Thanks!

Yanal-Yves · 2019-11-21T16:47:39Z

STR:

I am using the last version of VSCode: 1.40.1
I Disabled all extensions except esbenp.prettier-vscode v 3.8.0
In my .vscode/settings.json: "prettier.singleQuote": true
Open a javascript file:
the code used in this STR:

import { PreviewBankModel } from '../models/preview-bank.model';
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-bank-preview',
  styleUrls: ['./bank-preview.component.scss'],
  templateUrl: './bank-preview.component.html'
})
export class BankPreviewComponent {
  @Input() public bank: PreviewBankModel;

  constructor() {}
}

Save the file
=> All single quote are replaced by doubled quote:

Expected behavior: Prettier should keep single quotes

Note 1: with esbenp.prettier-vscode v 3.7.0 we don't have the issue
Note 2: This has been reproduced on my 3 team mates laptops
Note 3: This has also been reproduced with VScode 1.39.2 and 1.38.1

Could you provide instructions so that I can generated the requested output log ?

** UPDATED **

[INFO - 9:53:00 AM] Extension Name: "prettier-vscode".
[INFO - 9:53:00 AM] Extension Version: "3.8.0".
[INFO - 9:53:00 AM] Enabling prettier for languages:
[
  "javascript",
  "mongo",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "json",
  "jsonc",
  "json5",
  "css",
  "postcss",
  "less",
  "scss",
  "graphql",
  "markdown",
  "mdx",
  "html",
  "vue",
  "yaml"
]
[INFO - 9:53:00 AM] Enabling prettier for range supported languages:
[
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "json",
  "graphql"
]
[INFO - 9:53:21 AM] Formatting c:\(...OBFUSCATED...)\ClientApp\src\app\pages\preview\bank-preview\bank-preview.component.ts.
[INFO - 9:53:21 AM] Using bundled version of prettier.
[INFO - 9:53:21 AM] Resolved ignore file to c:\(...OBFUSCATED...)\ClientApp\.prettierignore.
[INFO - 9:53:21 AM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
[INFO - 9:53:22 AM] Prettier Options:
{
  "filepath": "c:\\(...OBFUSCATED...)ClientApp\\src\\app\\pages\\preview\\bank-preview\\bank-preview.component.ts",
  "parser": "typescript",
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 140,
  "endOfLine": "lf"
}
[INFO - 9:53:22 AM] Formatting completed in 225.5417ms.

ntotten · 2019-11-21T16:51:26Z

@Yanal-Yves to provide the output click the "Prettier" button in the toolbar and the logs will be shown. Just copy and past them here.

andrewmcdnz · 2019-11-21T18:24:19Z

I'm also using VSCode 1.40.1
Host env: MacOS Mojave 10.14.6

Initial conditions:

VSCode 1.40.1
Prettier 3.8.0 configured with "prettier.singleQuote": true

Steps:

Open any Angular project folder in VSCode
Open an angular .ts source file using single quotes
Use 'Format Document'
Observe the single quotes are all changed to double

Example code snippet:

import { Injectable, OnInit, Inject } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private afAuth: AngularFireAuth, private router: Router) {}
  
}

Result after formatting:

import { Injectable, OnInit, Inject } from "@angular/core";
import { CanActivate, Router } from "@angular/router";
import { AngularFireAuth } from "@angular/fire/auth";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private afAuth: AngularFireAuth, private router: Router) {}
}

Output:

[INFO - 7:09:55 AM] Formatting /Users/andrew/<Removed for privacy>/src/guards/auth.guard.ts.
[INFO - 7:09:55 AM] Using bundled version of prettier.
[INFO - 7:09:55 AM] Resolved ignore file to /Users/andrew/Dev/<Removed for privacy>/.prettierignore.
[INFO - 7:09:55 AM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
[INFO - 7:09:55 AM] Prettier Options:
{
  "filepath": "/Users/andrew/Dev/<Removed for privacy>/src/guards/auth.guard.ts",
  "parser": "typescript",
  "useTabs": false,
  "tabWidth": 2
}
[INFO - 7:09:55 AM] Formatting completed in 20.586183ms.

Finally for completeness, here is the output from 3.7.0:

[INFO - 7:27:06 AM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
[INFO - 7:27:06 AM] Prettier Options:
{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/andrew/Dev/<Removed for privacy>/guards/auth.guard.ts",
  "parser": "typescript"
}
[INFO - 7:27:06 AM] Formatting completed in 28.64042ms.

It seems the root cause is likely related to propagation of options.

Austaras · 2019-11-22T06:25:04Z

Same here. For me extra semicolon is added even semi is set to false. Seems like this plugin totally ignore all prettier config

knarf94 · 2019-11-22T08:57:42Z

Same here...

Yanal-Yves · 2019-11-22T08:58:41Z

@ntotten, I have updated my comment with the requested output log.

freed00m · 2019-11-22T15:09:40Z

Hello, might be that the .editorconfig files exists in your projects?

That is the recent changes that was introduced without nobody noticing. :)

If you have .editorconfig ALL your settings for prettier are ignored by design. #1079

Stantmn · 2019-11-22T17:51:45Z

Have the same issue

znorman-harris · 2019-11-22T18:41:46Z

Same issue.

andrewmcdnz · 2019-11-22T21:49:32Z

Hello, might be that the .editorconfig files exists in your projects?

That is the recent changes that was introduced without nobody noticing. :)

If you have .editorconfig ALL your settings for prettier are ignored by design. #1079

Indeed, it seems this 'by design' behaviour came in with #1074

Definitely seems to be a polarising change. I can see where Nathan is coming from, but it is very confusing when all of the GUI presented settings say one thing and the plugin is doing another based on a file that may contain an incomplete configuration (such as the .editorconfig created as part of Angular's boilerplate). I would personally prefer a settings hierarchy than for settings to revert to defaults in this situation, but there may be reasons that this isn't practical.

ntotten · 2019-11-23T18:26:29Z

but there may be reasons that this isn't practical.

The problem with doing this is that every .prettierrc file would then have to set every possible setting to override the VS Code settings. This isn't how most projects are setup and really doesn't makes sense to have a config file that sets all settings anyway.

My standpoint is that every project should always have a .prettierrc (or at least an .editorconfig file) so that formatting happens the same regardless of how you are invoking prettier - through this extension, through the CLI, or using any other IDE's extension. The only real use for the VS Code settings is to have fallbacks when you are working on a file that isn't part of a project, but still want to do formatting.

Yanal-Yves · 2019-11-24T01:41:11Z

Hello, might be that the .editorconfig files exists in your projects?

That is the recent changes that was introduced without nobody noticing. :)

If you have .editorconfig ALL your settings for prettier are ignored by design. #1079

I tried to add quote_type = single in my .editorconfig and prettier is now using single quote instead of double quote. Configuring .editorconfig is a good work around.

I am saying a work around because I can go to the Prettier settings and untick Prettier:Single Quote and Prettier will still use single quote (because it's configured as single quote in .editorconfig). I feel this is wired to see this setting saying "Prettier uses double quote" that is ignored without any clear indication that its overridden because .editorconfig is configured.
In that case I think that I would expect to see the setting inactive with a clear message saying (overridden by .editorconfig). That said, I have no idea if VS Code allow extensions to do that :-)

Austaras · 2019-11-24T06:33:31Z

The problem with doing this is that every .prettierrc file would then have to set every possible setting to override the VS Code settings. This isn't how most projects are setup and really doesn't makes sense to have a config file that sets all settings anyway.

This is reasonable for ignore vscode setting when there is a .prettierrc, but that doesn't mean it's also true for .editorconfig. In many cases people don't use prettier as a format standard but as a nice to have tool so they won't call prettier from CLI anyway. It will be a break change for their(and my) workflow.

JoySurfer · 2019-11-24T11:44:01Z

The .editorconfig actually has no setting for quote_type.
See https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties

Then why does Prettier use this setting and set it to double by default?

ntotten · 2019-11-25T01:46:36Z

@Austaras the detection of configuration happens in the core prettier library. The logic used in this extension is if prettier returns config, we use that, otherwise the extension falls back to VSCode settings.

I’m going to close this issue as we’re not going to change this behavior. The recommendation is to use a prettier config file in each project or set a prettier config file in your home folder.

Crypt0Graphic · 2019-12-14T15:28:03Z

I downgraded to 3.7.0 from 3.13.0 (latest) as easy solution but i didn't like this. Then i changed name of .editorConfig to .editorConfigHatesPrettier. Now it's ok.

JoySurfer · 2019-12-14T15:45:24Z

I downgraded to 3.7.0 from 3.13.0 (latest) as easy solution but i didn't like this. Then i changed name of .editorConfig to .editorConfigHatesPrettier. Now it's ok.

You don't have to.
Since 3.7.10 you can configure VS Code Prettier settings to prettier.useEditorConfig: false - and you're done.

Crypt0Graphic · 2019-12-14T15:48:34Z

I downgraded to 3.7.0 from 3.13.0 (latest) as easy solution but i didn't like this. Then i changed name of .editorConfig to .editorConfigHatesPrettier. Now it's ok.

You don't have to.
Since 3.7.10 you can configure VS Code Prettier settings to prettier.useEditorConfig: false - and you're done.

Thanks. This is better solution.

aammfe · 2020-01-15T18:14:36Z

I downgraded to 3.7.0 from 3.13.0 (latest) as easy solution but i didn't like this. Then i changed name of .editorConfig to .editorConfigHatesPrettier. Now it's ok.

You don't have to.
Since 3.7.10 you can configure VS Code Prettier settings to prettier.useEditorConfig: false - and you're done.

it may introduce more warning then just single quote.
I m usingprettier 3.18.0
I m using angular so in project root create .editorconfig file (in my case it was already there)
append these lines

[*.ts]
quote_type = single

my full .editorconfig file(u may have different).

# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

[*.ts]
quote_type = single

acarlstein · 2020-01-16T17:19:58Z

I am not using prettier and VSCode still ignoring my .editorconfig settings when indicating to use single quote as shown below:

[*.{js,jsx,ts,tsx,vue}]
quote_type = single
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

Therefore, I can't use the option Fprmat Document because it causes troubles with eslint since eslint is expecting single quotes in the parts that JavaScript are applied. :(

Note: I did install globally editorconfig using npm install -g editorconfig

So, I am not sure if the issue is prettier or VSCode

Liam-Newell · 2020-02-27T17:16:29Z

Hello, might be that the .editorconfig files exists in your projects?
That is the recent changes that was introduced without nobody noticing. :)
If you have .editorconfig ALL your settings for prettier are ignored by design. #1079

I tried to add quote_type = single in my .editorconfig and prettier is now using single quote instead of double quote. Configuring .editorconfig is a good work around.

I am saying a work around because I can go to the Prettier settings and untick Prettier:Single Quote and Prettier will still use single quote (because it's configured as single quote in .editorconfig). I feel this is wired to see this setting saying "Prettier uses double quote" that is ignored without any clear indication that its overridden because .editorconfig is configured.
In that case I think that I would expect to see the setting inactive with a clear message saying (overridden by .editorconfig). That said, I have no idea if VS Code allow extensions to do that :-)

Amazing. Its weird how there is a disconnect between prettier and the editor config on quotes, seeing as how you can use quote_type in the editorconfig while it not being an actual supported parameter. However, you can find quote_type in their purposed section at https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties

vshy108 · 2020-04-26T05:30:23Z

I put below rule into .eslintrc which is suggested by options of eslint-plugin-prettier then prettier won't replace single quote to double quote in my case

"prettier/prettier": ["error", { "singleQuote": true, "parser": "flow" }]

JezynkaMJ · 2020-05-16T17:29:44Z

In my case i uncheck "Use Editor Config" in settings and it helped

stoplion · 2020-06-17T20:08:13Z

This is driving me nuts. I've lost countless hours trying to find the source of this...

ntotten added the need-more-info label Nov 21, 2019

freed00m mentioned this issue Nov 22, 2019

Regression: Semicolons setting is ignored #1088

Closed

6 tasks

ntotten closed this as completed Nov 25, 2019

ntotten added wontfix and removed need-more-info labels Nov 25, 2019

JasonHoku mentioned this issue May 28, 2020

Updates to Install and Rules pages EdenServer/eden-web#47

Closed

zemse mentioned this issue Jun 7, 2020

add a note in vscode section prettier-solidity/prettier-plugin-solidity#290

Merged

prettier locked as off-topic and limited conversation to collaborators Jun 19, 2020

ntotten added the locked Please open a new issue and fill out the template instead of commenting. label Jun 24, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

cannot format doubleQuotes to singleQuote in single javascript file #1085

cannot format doubleQuotes to singleQuote in single javascript file #1085

Fenglinwanyue commented Nov 21, 2019

andrewmcdnz commented Nov 21, 2019

Fenglinwanyue commented Nov 21, 2019

andrewmcdnz commented Nov 21, 2019 •

edited

Loading

bianca-morariu commented Nov 21, 2019

Fenglinwanyue commented Nov 21, 2019

ntotten commented Nov 21, 2019

Yanal-Yves commented Nov 21, 2019 •

edited

Loading

ntotten commented Nov 21, 2019

andrewmcdnz commented Nov 21, 2019 •

edited

Loading

Austaras commented Nov 22, 2019

knarf94 commented Nov 22, 2019

Yanal-Yves commented Nov 22, 2019

freed00m commented Nov 22, 2019 •

edited

Loading

Stantmn commented Nov 22, 2019

znorman-harris commented Nov 22, 2019

andrewmcdnz commented Nov 22, 2019

ntotten commented Nov 23, 2019

Yanal-Yves commented Nov 24, 2019

Austaras commented Nov 24, 2019

JoySurfer commented Nov 24, 2019

ntotten commented Nov 25, 2019 •

edited

Loading

Crypt0Graphic commented Dec 14, 2019 •

edited

Loading

JoySurfer commented Dec 14, 2019

Crypt0Graphic commented Dec 14, 2019

aammfe commented Jan 15, 2020

acarlstein commented Jan 16, 2020

Liam-Newell commented Feb 27, 2020

vshy108 commented Apr 26, 2020

JezynkaMJ commented May 16, 2020

stoplion commented Jun 17, 2020

cannot format doubleQuotes to singleQuote in single javascript file #1085

cannot format doubleQuotes to singleQuote in single javascript file #1085

Comments

Fenglinwanyue commented Nov 21, 2019

andrewmcdnz commented Nov 21, 2019

Fenglinwanyue commented Nov 21, 2019

andrewmcdnz commented Nov 21, 2019 • edited Loading

bianca-morariu commented Nov 21, 2019

Fenglinwanyue commented Nov 21, 2019

ntotten commented Nov 21, 2019

Yanal-Yves commented Nov 21, 2019 • edited Loading

ntotten commented Nov 21, 2019

andrewmcdnz commented Nov 21, 2019 • edited Loading

Austaras commented Nov 22, 2019

knarf94 commented Nov 22, 2019

Yanal-Yves commented Nov 22, 2019

freed00m commented Nov 22, 2019 • edited Loading

Stantmn commented Nov 22, 2019

znorman-harris commented Nov 22, 2019

andrewmcdnz commented Nov 22, 2019

ntotten commented Nov 23, 2019

Yanal-Yves commented Nov 24, 2019

Austaras commented Nov 24, 2019

JoySurfer commented Nov 24, 2019

ntotten commented Nov 25, 2019 • edited Loading

Crypt0Graphic commented Dec 14, 2019 • edited Loading

JoySurfer commented Dec 14, 2019

Crypt0Graphic commented Dec 14, 2019

aammfe commented Jan 15, 2020

acarlstein commented Jan 16, 2020

Liam-Newell commented Feb 27, 2020

vshy108 commented Apr 26, 2020

JezynkaMJ commented May 16, 2020

stoplion commented Jun 17, 2020

andrewmcdnz commented Nov 21, 2019 •

edited

Loading

Yanal-Yves commented Nov 21, 2019 •

edited

Loading

andrewmcdnz commented Nov 21, 2019 •

edited

Loading

freed00m commented Nov 22, 2019 •

edited

Loading

ntotten commented Nov 25, 2019 •

edited

Loading

Crypt0Graphic commented Dec 14, 2019 •

edited

Loading