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

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'
    );
  }
}

1. 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.

[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.

[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.