7

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

STh
  • 746
  • 9
  • 24
  • 1
    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 – Keith Nicholas Apr 02 '20 at 08:12
  • you could also format on save and have it automatically format the code for you (and satisfy eslint) – Denis Tsoi Apr 02 '20 at 08:22
  • Which code do you need? My code or the ESLint-Preferences? – STh Apr 02 '20 at 08:25
  • @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... – STh Apr 02 '20 at 08:27
  • https://scotch.io/tutorials/linting-and-formatting-with-eslint-in-vs-code – Denis Tsoi Apr 02 '20 at 08:33
  • 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 – Denis Tsoi Apr 02 '20 at 08:34
  • https://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? – STh Apr 02 '20 at 08:56

4 Answers4

11

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.

Eggon
  • 2,032
  • 2
  • 19
  • 38
  • 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? – STh Apr 02 '20 at 09:53
  • 1
    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. – Eggon Apr 02 '20 at 10:20
  • 1
    https://blog.jongallant.com/2019/02/vuejs-vetur-vscode-format-eslint-issues/ here's another helpful article about setting up the vs code with vue! – Eggon Apr 02 '20 at 10:41
  • I've the same problem with .js-files now, too... How can I fix this also for .js-files? – STh Apr 11 '20 at 13:10
  • 2
    This resolves this issue for me : add it to settings.json "vetur.format.defaultFormatterOptions": { "prettier": { // Prettier option here "semi": false, "singleQuote": true } } – Amdouni Mohamed Ali May 29 '20 at 10:18
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.

user1762656
  • 21
  • 2
0

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

Sarmast Bilawal Khuhro
  • 21
  • 1
0

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

STh
  • 746
  • 9
  • 24