Prettier "prettier.singleQuote" not working in 1.40 vs code

[sreekumarp]

Summary

Prettier "prettier.singleQuote" not working in 1.40 vs code

Github Repository to Reproduce Issue

Steps To Reproduce:

1. Install VS Code 1.40.1 (user step-up)
2. Install Prettier add-on to VS Code
3. Set below settings in VS Code
   "prettier.singleQuote": true,
   "editor.formatOnSave": true,
4. Create/Edit a file with below content - file-name.ts

import { Injectable } from '@angular/core';
import { HttpService } from '@app/core/http.service';

@Injectable({
  providedIn: 'root'
})
export class ElementBrowserService {
  constructor(private httpService: HttpService) {}

  public getGroupDetails(supportedType: number) {
    return this.httpService.get<dcGroupDetails[]>(
      `V1/Element/Groups/Type/${supportedType}`,
      null,
      'GetGroupDetails'
    );
  }
}

5. Save file.

Expected result:
File should format with "singleQuotes"

Actual result

File is formatted with double quotes

Additional information

VS Code Version:
Version: 1.40.1 (user setup)
Commit: 8795a9889db74563ddd43eb0a897a2384129a619
Date: 2019-11-13T16:49:35.976Z
Electron: 6.1.2
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 6.1.7601

OS and version:

Windows 7 Enterprise
Version 6.1(Build 7601: Service Pack 1)

Prettier Log Output

[INFO - 10:09:39 AM] Extension Name: "prettier-vscode".
[INFO - 10:09:39 AM] Extension Version: "3.9.0".
[INFO - 10:09:39 AM] Enabling prettier for languages:
[
"javascript",
"mongo",
"javascriptreact",
"typescript",
"typescriptreact",
"json",
"jsonc",
"json5",
"css",
"postcss",
"less",
"scss",
"graphql",
"markdown",
"mdx",
"html",
"vue",
"yaml"
]
[INFO - 10:09:40 AM] Enabling prettier for range supported languages:
[
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"json",
"graphql"
]
[INFO - 10:10:17 AM] Formatting d:\AzureDevOps\Dev\Dev1.0\Web\src\app\widgets\common\element-browser\element-browser.service.ts.
[INFO - 10:10:17 AM] Using bundled version of prettier.
[INFO - 10:10:17 AM] Resolved ignore file to d:\AzureDevOps\Dev\Dev1.0\Web.prettierignore.
[INFO - 10:10:17 AM] File Info:
{
"ignored": false,
"inferredParser": "typescript"
}
[INFO - 10:10:18 AM] Prettier Options:
{
"filepath": "d:\AzureDevOps\Dev\Dev1.0\Web\src\app\widgets\common\element-browser\element-browser.service.ts",
"parser": "typescript",
"useTabs": false,
"tabWidth": 2
}
[INFO - 10:10:18 AM] Formatting completed in 561.919748ms.
[INFO - 10:10:26 AM] Formatting d:\AzureDevOps\Dev\Dev1.0\Web\src\app\widgets\common\element-browser\element-browser.service.ts.
[INFO - 10:10:26 AM] Using bundled version of prettier.
[INFO - 10:10:26 AM] Resolved ignore file to d:\AzureDevOps\Dev\Dev1.0\Web.prettierignore.
[INFO - 10:10:26 AM] File Info:
{
"ignored": false,
"inferredParser": "typescript"
}
[INFO - 10:10:26 AM] Prettier Options:
{
"filepath": "d:\AzureDevOps\Dev\Dev1.0\Web\src\app\widgets\common\element-browser\element-browser.service.ts",
"parser": "typescript",
"useTabs": false,
"tabWidth": 2
}
[INFO - 10:10:26 AM] Formatting completed in 42.85524ms.

[jpzwarte]

I just "fixed" this by adding quote = single to my .editorconfig file in my angular project. Apparently prettier is using .editorconfig over the vscode settings. And the lack of a quote property is causing it to default to the double quote.

[ntotten]

This is by design. VSCode settings are fallback in case no config is present. See: https://github.com/prettier/prettier-vscode#configuration

[jpzwarte]

@ntotten This is a bug. The fallback behavior is no longer working properly: i did not have quote or max_line_length specified in .editorconfig, but i did have those settings specified in vscode. When it did not encounter those settings in .editorconfig, it did not fallback to my vscode settings. Instead it used the default prettier settings (double quotes). My workaround was to add quote = single to my .editorconfig to get prettier working properly again.

[balintbalazs]

I tried the workaround of adding quote = single in the .editorconfig, but Prettier still converted all my existing single quotes to double quotes. I also had VSCode configured to use single quotes, just to be sure. This is with Prettier 3.9.0 and VSCode 1.40.2

[ntotten]

@jpzwarte To be clear, it doesn't fall back per setting it only falls back if no config is found at all. If it fell back by setting that would result in some very weird behaviors for projects that specified the .prettierrc file. For example, if you cloned this project that has a simple prettier config file specifying only that tabWidth: 2 - the only reason that is even set is because we want to enforce all defaults of prettier. Now, i didn't specify all prettier settings in that file because i am using prettier defaults. If you came and wanted to contribute to this project, but had VS Code settings (say, semi: false) then if you sent a PR your formatting would be different than the project mandated settings. There are two solutions to this: 1) force every project to specify ALL prettier settings in every config - this includes adding new settings when they are added or 2) only fall back if no prettier configuration is set.

For this project, we are choosing #2 as it is the only practical option.

The recommended best practice is to use a prettier configuration file for every project. Editor configs can also work, but they are more complicated as its not well documented by prettier and it doesnt actually support all of the configuration options of prettier.

[ntotten]

@balintbalazs That is because the settings in editorconfig are different than the prettier settings and there is no setting in editorconfig called quote. If you really must use editorconfig instead of prettier config you can see how the settings get translated here: https://github.com/josephfrazier/editorconfig-to-prettier/blob/master/index.js

[jpzwarte]

@ntotten Thanks for the explanation. It is weird though that prettier just stopped working all of a sudden. That makes me think that something in the behavior you describe may have changed recently. 🧐

[balintbalazs]

@ntotten Thanks for the insight. The Angluar CLI by default adds an .editorconfig file which doesn't specify the quotes. This basically breaks the fallback to the vscode configuration which caused some confusion. Adding quote_type = single fixed it for me.

[ntotten]

@jpzwarte The behavior did change. In the <2 version of this extension LOTs of different config was merged together. That caused all sorts of weird issues and tons of bugs were opened because of it. We don't do that anymore, but rather rely on the prettier library to resolve config OR fall back to VS Code - no more merging of anything.

We also had a bug in one of the 3.x releases where I accidentally merged config. I fixed that after I think something like 10 hours.

[eshunnar]

Fixed by adding "typescript.preferences.quoteStyle": "single" to global vscode settings.json on React Native .TSX project.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.