CODEWITHSUNDEEP
javascripttypescriptvisual-studio-codeprettier
Kevin192291
Kevin192291

Reputation: 2097

VsCode not formatting TS/JS files with single quotes

After one of the latest updates to VS Code, when pressing Ctrl+Shift+F In windows, it is auto formattig all of my code with double instead of single quotes despite my setting it to only use single quotes.

Here is my settings file:

{
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"atlascode.jira.workingSite": {
    "baseUrlSuffix": "atlassian.net"
},
"yaml.schemas": {
    "file:///c%3A/Users/kevin/.vscode/extensions/atlassian.atlascode-2.1.5/resources/schemas/pipelines-schema.json": "bitbucket-pipelines.yml"
},
"window.zoomLevel": -1,
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.autofetch": true,
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true

}

Is anyone else dealing with this?

Thanks!!!

Upvotes: 2

Views: 5211

Answers (2)

Greet
Greet

Reputation: 21

The answer by Jins Thomas Shaji is very helpful. But except what he said, you also need to add a line in .prettierrc

"jsxSingleQuote": true

So, conclution:

.prettierrc

{
"singleQuote": true, 
"jsxSingleQuote": true,
}

settings.json

"prettier.configPath": "./.prettierrc"

Upvotes: 2

Jins Thomas Shaji
Jins Thomas Shaji

Reputation: 877

From your settings file, it seems like you are using prettier for code formatting. In the latest updation, prettier changed reading configuration from common settings file to a dedicated file for prettier settings. You can configure prettier via many options they've provided.

https://prettier.io/docs/en/configuration.html

Example (JSON):

Create .prettierrc file, written in JSON or YAML, with optional extensions: .json/.yaml/.yml (without extension takes precedence).

.prettierrc

{
  "singleQuote": true
}

Then provide absolute path of .prettierrc file in settings.json (vscode settings file).

settings.json

...
"prettier.configPath": "./.prettierrc"
...

Hope this helps!

Upvotes: 7

Related Questions