'Vue: Failed to compile (Strings must use singlequote)

I've been working with Visual Studio Code for two days now. I try to build a Vue-Application. But always when I run the application by npm run serve, I get the following errors:

  9:9   error  Strings must use singlequote  quotes
  9:15  error  Missing trailing comma        comma-dangle

✖ 2 problems (2 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

I understand what these errors say, and I tried to type in strings in singlequotes and insert commas at the end of every line. But Visual Studio Code always removes the comma and turns singlequotes to doublequotes... Here you can see which plugins I have installed:

enter image description here

vue.jsvisual-studio-codevuejs2single-quotes


Solution 1:[1]

I had the same problem. It is likely caused by the file being formatted twice - first by vs code and then by eslint built in into vue-cli. Set the formatOnSave setting in VS Code to false and check if this solves your problem. It might. Nonetheless if you work on various (non-Vue) projects you will have to enable and disable this setting.

Disclaimer: This is a workaround that works for me. There's probably a more professional approach, I was not able to find it though.

Solution 2:[2]

Just in case this helps someone else. I too ran into this issue. I have this line in a components script: props: ["login-signup"]

Every time I save it would switch to a double quote. I want formatting on save so that I don't have to mess with spacing and tabs. For me, I use vue3snippets extension in vscode. Opening settings (File->Preferences->Settings I typically use workspace, not user so I clicked Workspace) and searching for "singlequote" showed that "Vue3snippets: Single Quote" has a setting called "if true, will use single instead of double quotes" that was unchecked.

Checking this fixed the issue where the single quote in my line above would not format on save to a double quote and in turn fixing this error for me.

Solution 3:[3]

go to your main folder open .eslintrc.js and add the following in the rules "

quotes: [0, "double"]

and then restart the project and do npm serve run again

Solution 4:[4]

I have found another way to fix the problem for the current project: I just created a

.prettierrc

config file, in which it is possible to specify the quote style with

"singleQuote": true

This might be a more general approach to tackle such a problem, because the direct project config apparently overrides the global configuration

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eggon
Solution 2 user1762656
Solution 3 Sarmast Bilawal Khuhro
Solution 4 STh

Related Questions