I don't have prettier extension installed, but after reading the possible duplicate answer I've added from scratch in my User Setting (UserSetting.json, Ctrl+, shortcut):
"prettier.singleQuote": true
A part a green warning (Unknown configuration setting) the single quotes are no more replaced.
I suspect that the prettier extension is not visible but is embedded inside the Vetur extension.
Answer from attdona on Stack OverflowI don't have prettier extension installed, but after reading the possible duplicate answer I've added from scratch in my User Setting (UserSetting.json, Ctrl+, shortcut):
"prettier.singleQuote": true
A part a green warning (Unknown configuration setting) the single quotes are no more replaced.
I suspect that the prettier extension is not visible but is embedded inside the Vetur extension.
Well, like @user2982122 mentioned but instead of File go to Code -> Preferences -> Settings, then look for Quote, select Prettier and check both boxes
cannot format doubleQuotes to singleQuote in single javascript file
VS code keeps changing my single quotes to double quotes, probably because of vetur extension but I've tried all the posted solutions already. Nothing seems to be working
Command Palette -> "Format Document with... " - this will list the available formatters (with the default denoted) and will allow you to set the default. If you can't find the command, there's only one formatter available for this context.
More on reddit.com"prettier.singleQuote: true" not being honored for vanilla javascript files
Single quote option set to false still produces strings with single quotes in js files
Videos
I'm working with vue, but this keeps happening to all my .vue files. I have the vetur extension + prettier + eslint. Eslint fixes the double quotes to single quotes but I think either prettier or vetur is overwriting it. I may be missing one of the webpack files but I have no idea which one, or if I actually AM missing a file.
I've tried to add:
{
"vetur.format.defaultFormatter.js": "prettier-eslint",
"eslint.validate": [
{ "language": "vue", "autoFix": true },
{ "language": "javascript", "autoFix": true } ],
"eslint.autoFixOnSave": true
}
in a .prettierrc file as suggested by one of the solutions I found but it doesn't work for me. Idek what else to do, I'm pretty new to vue.
Command Palette -> "Format Document with... " - this will list the available formatters (with the default denoted) and will allow you to set the default. If you can't find the command, there's only one formatter available for this context.
Omg i think it worked. Idk HOW it worked cus I had tried that before but it worked now so thank you so much.
As you already have singleQuote: true set in your prettier config, I suspect that you're seeing your single quotes converted to double quotes specifically inside your JSX tags. This is because Prettier has a separate rule for JSX:
"jsxSingleQuote": true
Without this, even with "singleQuote": true, Prettier will still convert single quotes within JSX to double.
According to Prettier, double quotes in JSX is the default because it's descended from HTML, where double quotes are more common.
Set "jsxSingleQuote": true wherever you have your Prettier config, and that should do the trick.
This only happens if you have ' in your string e.g. ('it\'s a thing').
Prettier has this issue and there is apparently no solution to this.
My workaround is, using `` (string template syntax) for such strings and single quote for all other strings.
`it's a thing`
You don't have to escape this.
I've traced the source of the problem.
It appears there are levels of configuration that will be checked when VSCode attempts to reformat the text when format on save is checked.
- Prettier extension config
.eslintrc.editorconfig
I'm still not sure in what order they run in, thus who has the final say.
But in my case, a VERY basic .editorconfig was the problem. Deleting this file fixed it.
# EditorConfig https://editorconfig.org/
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_size = 2
indent_style = space
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
In the file above there is no mention of spacing prefs at all. So I'm assuming there are some defaults to double quotes.
I have the same problem. make sure if prettier is using any other config that could override it's own settings in VSCode. most likely to be .editorconfig
there's two options
- still use
.editorconfig
Add this code in .editorconfig
quote_type = single
- stop using
.editorconfig
In .vscode/settings.json, add this code.
"prettier.useEditorConfig": false, // tell prettier to don't use .editorconfig
"prettier.singleQuote": true, // force single quote
I'm really not sure what to do, but this is pissing me off greatly. I'm using VS Code with my Angular projects at work, and had things set to use single quotes and no semi-colons. Now, after closing the editor, and re-opening it, with my project, it's changing my code files on save to double quotes and adding semi-colons. I'm using Prettier to handle the formatting as well. This has been untouched for over a year, and now it decides to start screwing with my formatting. My settings.json is below:
{
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.formatOnSave": true,
"editor.formatOnSaveTimeout": 1000,
"editor.tabSize": 2,
"files.trimTrailingWhitespace": true,
"git.autofetch": true,
"prettier.jsxBracketSameLine": true,
"prettier.printWidth": 120,
"prettier.semi": false,
"prettier.singleQuote": true,
"typescript.preferences.quoteStyle": "single",
"workbench.colorTheme": "Material Theme Palenight High Contrast"
}Can anyone help get this working again? Thanks.
Update: I've determined that the issue is with the Prettier extension [v3.8.0]. I tried disabling the extension initially, and formatting was still not working correctly. I then decided to try installing the previous version [v3.7.0] (it's possible it got updated when I restarted the editor), and it started working again. I did notice in the output window, with Prettier selected, most of my settings were missing in v3.8.0. In version 3.7.0, the output when formatting looks like this:
[INFO - 9:36:18 AM] Formatting <Redacted>.component.spec.ts.
[INFO - 9:36:18 AM] Using bundled version of prettier.
[INFO - 9:36:18 AM] Resolved ignore file to <redacted>\.prettierignore.
[INFO - 9:36:18 AM] File Info:
{
"ignored": false,
"inferredParser": "typescript"
}
[INFO - 9:36:18 AM] Prettier Options:
{
"arrowParens": "avoid",
"bracketSpacing": true,
"endOfLine": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": true,
"jsxSingleQuote": false,
"printWidth": 120,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none",
"useTabs": false,
"vueIndentScriptAndStyle": false,
"filepath": "<redacted>.component.spec.ts",
"parser": "typescript"
}
[INFO - 9:36:18 AM] Formatting completed in 28.423ms.In version 3.8.0, the output when formatting shows this:
[INFO - 9:39:45 AM] Formatting <redacted>.component.spec.ts.
[INFO - 9:39:45 AM] Using bundled version of prettier.
[INFO - 9:39:45 AM] Resolved ignore file to <redacted>\.prettierignore.
[INFO - 9:39:45 AM] File Info:
{
"ignored": false,
"inferredParser": "typescript"
}
[INFO - 9:39:45 AM] Prettier Options:
{
"filepath": "<redacted>.component.spec.ts",
"parser": "typescript",
"useTabs": false,
"tabWidth": 2
}
[INFO - 9:39:45 AM] Formatting completed in 21.654699ms.Update 2: It looks like both version 3.7.0 and 3.8.0 were released on the same day, one right after the other. Version 3.7.0 works correctly, while version 3.8.0 does not.