Prettier 不适用于将可视代码中的双引号更改为单引号

Question

我在可视化代码中使用 EsLint 和 Prettier。没有单引号和双引号，一切正常。

这是我的 .eslintrc 文件： { "parser": "babel-eslint", "plugins": ["prettier"], "rules": { "prettier/prettier": [ "error", { "singleQuote": true } ] } } 当我使用 ctr+shift+P 并输入“格式化文档”时。双引号没有变成单引号。如果我使用自动修复，它会改变，但是当我保存它时，单引号变成双引号。

我该如何解决这个问题。

Answer 1

正如您已经singleQuote: true在更漂亮的配置中设置的那样，我怀疑您会看到单引号专门在 JSX 标记内转换为双引号。这是因为 Prettier 对于 JSX 有一个单独的规则：

"jsxSingleQuote": true

如果没有这个，即使使用"singleQuote": true，Prettier 仍然会将 JSX 中的单引号转换为双引号。

根据 Prettier 的说法，JSX 中的双引号是默认设置，因为它源自 HTML，而双引号在 HTML 中更为常见。

在你有 Prettier 配置的地方进行设置"jsxSingleQuote": true，这样就可以了。

Answer 2

仅当您'的字符串中包含例如（'it\'sa thing'）时，才会发生这种情况。Prettier 存在这个问题，并且显然没有解决方案。

我的解决方法是，对此类字符串使用 `` （字符串模板语法），对所有其他字符串使用单引号。

`it's a thing`

你不必逃避这个。