VSCode single to double quote automatic replace
Visual Studio-CodeVscode SettingsVisual Studio-Code Problem Overview
When I execute a Format Document
command on a Vue Component.vue file VSCode replace all single quoted string with double quoted string.
In my specific case this rule conflicts with electron-vue lint configuration that require singlequote.
I don't have prettier extensions installed (no prettier.singleQuote
in my setting)
How to customize VSCode to avoid this?
Visual Studio-Code Solutions
Solution 1 - Visual Studio-Code
I dont 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.
Solution 2 - Visual Studio-Code
Well, like the guy (@user2982122) mentioned but instead of File go to Code -> Preferences -> Settings, then look for Quote, select Prettier and check both boxes
Solution 3 - Visual Studio-Code
For projects that use .editorconfig
file by default. The formatter will ignore the rules in the settings and use the rules in .editorconfig
, then you can either:
- Remove
.editorconfig
file, and use your VSCode settings. - Add
quote_type = single
to the.editorconfig
file regarding your file type. You can also setquote_type
value todouble
orauto
.
Solution 4 - Visual Studio-Code
It looks like it is a bug open for this issue: Prettier Bug
None of above solution worked for me. The only thing that worked was, adding this line of code in package.json:
"prettier": {
"singleQuote": true
},
Solution 5 - Visual Studio-Code
From the vuejs/vetur issue page https://github.com/vuejs/vetur/issues/986# This solution worked for me.
In VSCodes settings.json
file add this entry
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true
}
},
Solution 6 - Visual Studio-Code
please consider .editorconfig
overwrites everything, use:
[*]
quote_type = single
Solution 7 - Visual Studio-Code
Install prettier extension and paste below code in your VSCode settings.json
file
"prettier.useEditorConfig": false,
"prettier.singleQuote": true
this will ignore your .editorconfig
file setting.
Solution 8 - Visual Studio-Code
What worked for me was setting up the .prettierrc.json
config file. Put it to the root of your project with a sample config like this:
{
"singleQuote": true,
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"arrowParens": "always"
}
After triggering the Format Document command, all works just as expected.
Side note: What comes as a bonus with this solution is that each team member gets the same formatting outputs thanks to the present config file.
Solution 9 - Visual Studio-Code
Correct solution :
I add .prettierrc.js file in my main root project and write
module.exports = {
singleQuote: true
};
Solution 10 - Visual Studio-Code
For newbies like me:
From the menu Nav bar at the top: Select File -> Preferences -> Settings. In the search text box, type in Quote In the filtered list that appears below, look for the gear icon and next to it - "Prettier". Click on check box to enable "Prettier: Single Quote"
Solution 11 - Visual Studio-Code
Try one of these solutions
- In vscode settings.json file add this entry
"prettier.singleQuote": true
- In vscode if you have
.editorconfig
file, add this line under the root [*] symbolquote_type = single
- In vscode if you have
.prettierrc
file, add this line
{
"singleQuote": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true
}
}
}
Solution 12 - Visual Studio-Code
quote_type = single
add this inside .editorconfig
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false
quote_type = single
Solution 13 - Visual Studio-Code
As noted by @attdona the Vetur extension includes prettier.
While you can change the prettier settings, as per the accepted answer, you can also change the formatter for specific regions of a vue component.
Here, for example, I've set Vetur to use the vscode-typescript formatter as it uses single quotes by default:
Solution 14 - Visual Studio-Code
I had the same issue in vscode. Just create a .prettierrc file in your root directory and add the following json. For single quotes add:
{
"singleQuote": true
}
For double quotes add:
{
"singleQuote": false
}
Solution 15 - Visual Studio-Code
in .prettierrc add
{
"arrowParens": "avoid",
"semi": false,
"singleQuote": true
}
Solution 16 - Visual Studio-Code
After struggling with the issue I found a useful tool. If you click on the Prettier
word in the right lower corner you will get the Output
window opened. In that window once you run formatting (in my case it is Alt + Shift + F
) you will see all the configurations which prettier will use to format the document. So, we can clearly see that specifying the prettier
in the prettier.singleQuote
is wrong. It should just be singleQuote
. Hence, having the .prettierrc
file in my user root folder with the following contents produced the desired result:
{
"trailingComma": "none",
"useEditorConfig": false,
"singleQuote": true
}
Also, make sure that you have the Prettier
extension installed.
Solution 17 - Visual Studio-Code
I'm using typescript, for me it got resolved with checking "Tslint integration" flag under prettier settings (in vscode preferences):
Solution 18 - Visual Studio-Code
There only solution that worked for me: and only for Angular Projects:
Just go into your project ".editorconfig" file and paste 'quote_type = single'. Hope it should work for you as well.
Solution 19 - Visual Studio-Code
I added file called .prettierrc
in my project folder.
File content:
{
"singleQuote": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true
}
}
}
Solution 20 - Visual Studio-Code
In my case, the problem was in the escaping \
character inside the string:
message = 'Error argument is not an object, it\'s ' + typeof error
Turning on the avoidEscape
option and using double quotes for that string solved the problem:
message = "Error argument is not an object, it's " + typeof error
.eslintrc.js
module.exports = {
rules : {
// Other rules...
'quotes' : ['error', 'single', {'avoidEscape' : true}],
}
}
Solution 21 - Visual Studio-Code
You can use this in settings.json
"javascript.preferences.quoteStyle": "single"
Solution 22 - Visual Studio-Code
Solution 23 - Visual Studio-Code
Use this extension.
https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes
cmd ' (ctrl ' on win/Linux) will cycle among ' " `
Solution 24 - Visual Studio-Code
For JSX use:
{"jsxSingleQuote": false}
Solution 25 - Visual Studio-Code
Well for me both options solved the issue:
-
By adding inside the .prettierrc - "singleQuote": true
-
Or by adding following inside the package.json -> "prettier": { "singleQuote": true }
Though I tried also adding .prettierrc.js
and have following
module.exports = { singleQuote: true };
This didn't worked.
Solution 26 - Visual Studio-Code
I had a lot of issues controlling linting and prettier formating. I had rules for eslint on for prettier like
"prettier/prettier": [
"error",
{ "singleQuote": true, "trailingComma": "none" }
],
and rules inside .prettierrc file
{
"tabWidth": 2
}
But my .prettierrc file was not getting processed. My fix was installing prettier as a package on dev dependency. So the solution that worked for me was installing all these packages eslint-config-prettier
eslint-plugin-prettier
and prettier
.
Solution 27 - Visual Studio-Code
This works for me : try right click on the current document and choose "format document with " , and choose your own format extension for the document. :)