tsx 文件中的单引号更漂亮答案

【问题标题】：Single quote in tsx file with prettiertsx 文件中的单引号更漂亮
【发布时间】：2020-03-23 18:56:39
【问题描述】：

在 2-3 周内，虽然我没有更改 prettier 文件中的任何内容，但 VSC 开始将单引号更改为双引号，而它始终是单引号。我尝试了很多选择，但它一直在改变它。这是我的 .prettierrc

{
  "trailingComma": "es5",
  "printWidth": 200,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "tabWidth": 2,
  "quoteProps": "as-needed"
}

编辑：我认为这是 .tsx 文件的问题，因为 prettier 只有 .jsx 文件的选项，但仍然没有找到解决方案。

【问题讨论】：

不是真正的解决方案。我一开始使用 prettier，但发现它与 VSCode 有很多怪癖。我改用 eslint，效果更好。
我的项目中有 tslint（因为它是用 typescript 编写的），但是当我想根据 tslint 配置进行格式化时，它不遵循这些规则。
我认为这是你的问题。您有不止一种工具试图应用规则。我认为您应该删除其中一个，最好更漂亮。然后尝试正确配置其余的。
但是 tslint 只会在终端中显示错误，只是更漂亮的格式文件，现在在组件文件 (.tsx) 中引用存在问题
我可以看到你有 "jsxSingleQuote": true, .只要您使用的是最新的 prettier，这应该可以解决问题。我遇到了同样的问题，但是在添加了我的 jsx 文件中的所有双引号后都变成了双单引号

标签： reactjs typescript prettier

【解决方案1】：

在您的用户设置中确保您有以下行：

"prettier.singleQuote": true

您可以在 windows 上通过 CTRL+, 或在 mac 上通过 CMD+, 访问用户设置。

如果您使用的是设置 GUI，只需搜索 single quote 并选中/取消选中 Prettier: Jsx Single quote 和 Prettier: Single quote

【讨论】：

我已经像你提到的那样设置好了，但仍然在我的 .tsx 文件中将其更改为双引号

【解决方案2】：

我有几天同样的问题。我检查了所有设置，它们似乎没问题。

目前唯一有帮助的是降级到 Prettier 的先前版本，就我而言，它是 2.3.0 版（我没有检查此版本和最新版本之间的所有版本，但其中很少有相同的版本问题）

【讨论】：

你的意思是 Prettier 的版本？
是的，Prettier 的版本

【解决方案3】：

在您的根文件夹中创建一个.prettierrc 文件并添加：

{
  "singleQuote": true
}

【讨论】：

【解决方案4】：

在.prettierrc，添加：

{
  "singleQuote": true,
  "jsxSingleQuote": true
}

【讨论】：

这也适用于.tsx。谢谢！

【解决方案5】：

了解此配置的最佳位置是网站。 https://prettier.io/docs/en/configuration.html

如果您使用的是 package.json，如果您没有“更漂亮”的密钥，请创建一个新密钥。

"prettier":{
    "singleQuote": true
}

或者您可以创建一个用 JSON 编写的 .prettierrc 文件并添加相同的密钥对值。

【讨论】：