cannot format doubleQuotes to singleQuote in single javascript file

[Fenglinwanyue]

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

[andrewmcdnz]

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]

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]

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]

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

[Fenglinwanyue]

look this file, roll back is so easy.

[ntotten]

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]

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]

@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]

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:

1. Open any Angular project folder in VSCode
2. Open an angular .ts source file using single quotes
3. Use 'Format Document'
4. 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]

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

[knarf94]

Same here...

[Yanal-Yves]

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

[freed00m]

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]

Have the same issue

[znorman-harris]

Same issue.

[andrewmcdnz]

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]

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]

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]

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]

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]

@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]

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]

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]

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]

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]

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]

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]

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]

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

[stoplion]

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