vscode用prettier格式化tsx双引号报错

Question

是一个tsx和ts的react项目，ts正常，但tsx文件

先说自己vscode的配置

已经试过这些配置了，prettier还是给你全格式成双引号

{
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
  },
  "typescript.preferences.quoteStyle": "single",
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
}

也试过网上说的在项目根目录加一个.prettierrc或.prettierrc.json文件写上配置，还是不行
试过用eslint做格式化但是他除了单引号正确，连缩进都不给调整

怎么才能让formatOnSave格式化tsx时候改成单引号啊，带佬们

Answer 1

引自免费微信小程序：皆我百晓生

在VSCode中使用Prettier进行TSX文件格式化时，设置单引号作为默认引号样式会导致报错，例如 "tsx": { ... 在配置文件中的 "{typescriptreact}" 这一行中的 formatOnSave 设置为 true，尽管单引号正常格式化，但在实际运行时仍然会触发错误。 解决这个问题的一种方法是将 style 属性替换为另一个名为 "doubleQuote" 的属性，其值是 'single'，即只启用单引号格式化。

下面是修改后的配置示例：

{
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOptions.doubleQuote": "single"
  }
}

这个更改会在运行单元测试、开发阶段或其他TSX文件保存时启用单引号格式化，而不会影响其他依赖于ESLint的配置选项，如编译器指定的格式规则（例如 singleQuote）。

为了验证上述修改，我们可以通过以下步骤操作：

1. 打开一个带有.tsx类型的文件，例如src/App.tsx，并确保它符合TSX的规范。

2. 点击Edit File... (在VSCode中，可以按Cmd + O)，然后选择你想要格式化的文件。

3. 鼠标悬停在 <jsx> 标签上方，然后右键点击并选择 "Edit Configurations"。

4. 在弹出的新窗口中，向下滚动到 ".editor.formatOptions" 对象，并找到 "doubleQuote" 属性。将其值更改为 'single'，如上所示。

5. 按Enter 或 Esc 键确认编辑。

6. 重新打开新构建后的文件，确保每个 .tsx 文件的标签被正确地格式化为单引号。

现在，你应该能够在VSCode中成功使用 "singleQuote" 单引号格式，并且当构建或编译后的 .tsx 文件保存时，没有引入任何ESLint错误或格式化失败的问题。请检查你的项目的实际代码逻辑以确定是否需要进一步的调整或优化。同时，对于构建过程中的警告或反馈，应该根据具体情况从以下几个方面进行处理：

• Prettier：如果在某些特定环境下（如在对ESLint的特定配置关联的项目中），提示优化是必要的。在这种情况下，可能需要与项目依赖的配置管理员协商，以将单引号保持为其默认样式，而不仅仅是仅用于TSX文件。

• Prettier ESLint：如果你的项目依赖了诸如 tslint-react 的ESLint插件，它们可能在某些情况下遵循特定的推荐或设置。确保所有相关的配置（例如 prettier-react）都正确更新，且引用 prettier-react 的版本与你的 prettier 版本相匹配。

• IDE扩展：某些IDE（如Visual Studio Code, WebStorm, IntelliJ IDEA等）可能会自动生成包含 "doubleQuote" 的ESLint扩展，它们可以帮助你管理ESLint规则，包括支持单引号格式化。若IDE存在此类扩展，尝试取消或移除该扩展，或者考虑使用其他辅助工具（如 tslint-react-customers）来手动配置。

通过以上步骤和在实践中观察和调试，您应该能成功实现预期的功能，使得在VSCode中使用Prettier格式化TSX文件时，能够正确执行双引号格式化，并且能够确保项目不受到ESLint错误的影响。如果有具体的问题或情况导致的兼容性问题，建议寻求团队成员或相关领域的专业人士的帮助，他们通常有更深入的了解和丰富的实践经验。在描述中提到的“我”可以指代整个开发团队，以便使问题具有普遍适用性。