Vue: Failed to compile (Strings must use singlequote)

Question

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:

Mirabel

nothing to do with vscode, when the vue build system builds, it runs eslint rules and treats certain things as errors. It is telling you want lines of your code have the problems , you haven't provided code, so can't help with it – Theatre

you could also format on save and have it automatically format the code for you (and satisfy eslint) – Allemande

Which code do you need? My code or the ESLint-Preferences? – Mirabel

@DenisTsoi which plugin does that? My current settings seem to do the opposite: When I add a comma, it removes it; and the singlequotes transform to doublequotes... – Mirabel

scotch.io/tutorials/… – Allemande

basically you setup your format on save settings in vscode and define your eslint.config for the IDE to determine how to format on save – Allemande

github.com/vuejs/vetur/issues/764: This is the issue. Can you tell me in which file I have to add the code by jeffhube on 8 Jan 19? – Mirabel

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

Singer

I've found an approach in github.com/vuejs/vetur/issues/764. But I'm not good enough in VS Code's settings to set these settings. Could you tell me where I have to put the code placed by jeffhube on 8 Jan 19? Is there a special file I didn't found yet? – Mirabel

I'm looking on this vetur issue right now myself. :) Press Ctr + , for VS Code settings. In the search bar search for settings.json. Click on it - this is the place. – Singer

blog.jongallant.com/2019/02/… here's another helpful article about setting up the vs code with vue! – Singer

I've the same problem with .js-files now, too... How can I fix this also for .js-files? – Mirabel

This resolves this issue for me : add it to settings.json "vetur.format.defaultFormatterOptions": { "prettier": { // Prettier option here "semi": false, "singleQuote": true } } – Auburn

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

Decury

Answer 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

Autoionization

what does 0 signifies ? – Dammar

Answer 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

Mirabel