Vue：编译失败（字符串必须使用单引号）

Posted 2023-03-24

【中文标题】Vue：编译失败（字符串必须使用单引号）

【英文标题】：Vue: Failed to compile (Strings must use singlequote)

【发布时间】：2020-04-02 08:09:26

【问题描述】：

我已经使用 Visual Studio Code 工作了两天了。我尝试构建一个 Vue 应用程序。但是当我通过npm run serve 运行应用程序时，总是出现以下错误：

  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. 

我了解这些错误的含义，我尝试在单引号中输入字符串并在每行末尾插入逗号。但是 Visual Studio Code 总是去掉逗号，把单引号变成双引号……在这里你可以看到我安装了哪些插件：

【问题讨论】：

与vscode无关，vue构建系统构建时，会运行eslint规则，将某些事情视为错误。它告诉你希望你的代码行有问题，你没有提供代码，所以无能为力

您也可以在保存时格式化并让它自动为您格式化代码（并满足 eslint）

您需要哪个代码？我的代码还是 ESLint-Preferences？

@DenisTsoi 哪个插件可以做到这一点？我当前的设置似乎相反：当我添加逗号时，它会删除它；并且单引号转换为双引号...

scotch.io/tutorials/…

【参考方案1】：

我遇到了同样的问题。这可能是由于文件被格式化了两次 - 首先是 vs 代码，然后是 eslint 内置在 vue-cli 中。将 VS Code 中的 formatOnSave 设置为 false 并检查这是否解决了您的问题。它可能。尽管如此，如果您从事各种（非 Vue）项目，则必须启用和禁用此设置。

免责声明：这是一种适合我的解决方法。可能有更专业的方法，不过我没找到。

【讨论】：

我在 github.com/vuejs/vetur/issues/764 中找到了一种方法。但是我在 VS Code 的设置中还不够好，无法设置这些设置。你能告诉我我必须把 jeffhube 在 19 年 1 月 8 日放置的代码放在哪里吗？有没有我还没有找到的特殊文件？

我自己现在正在研究这个 vetur 问题。 :) 按Ctr + , 进行 VS 代码设置。在搜索栏中搜索settings.json。点击它 - 就是这个地方。

blog.jongallant.com/2019/02/… 这是另一篇关于使用 vue 设置 vs 代码的有用文章！

我现在对 .js-files 也有同样的问题......我该如何解决这个问题也适用于 .js-files？

这为我解决了这个问题：将它添加到 settings.json "vetur.format.defaultFormatterOptions": "prettier": // 这里更漂亮的选项 "semi": false, "singleQuote":真

【参考方案2】：

以防万一这对其他人有帮助。我也遇到了这个问题。我在组件脚本中有这一行： 道具：[“登录注册”]

每次我保存它都会切换到双引号。我想在保存时进行格式化，这样我就不必弄乱间距和制表符了。对我来说，我在 vscode 中使用 vue3sn-ps 扩展。打开设置（文件->首选项->设置我通常使用工作区，而不是用户，所以我单击了工作区）并搜索“单引号”显示“Vue3sn-ps：单引号”有一个名为“如果为真，将使用单引号”的设置未选中的双引号”。

检查此问题解决了我上面一行中的单引号在保存为双引号时无法格式化的问题，进而为我修复了此错误。

【参考方案3】：

到你的主文件夹打开 .eslintrc.js 并在规则中添加以下内容 "

引号：[0, "double"]

然后重新启动项目并再次执行 npm serve 运行

【讨论】：

0 是什么意思？