在VS Code中保存*.tsx文件时格式化

Question

在 settings.json 中，可以只格式化*.ts文件：

"[typescript]": {
    "editor.formatOnSave": true
}

但我无法使其适用于*.tsx文件。

- David

Answer 1

"[typescriptreact]": {
    "editor.formatOnSave": true
}

另请参阅语言特定的编辑器设置

- David

---

截至2020年10月15日，这个不起作用了，有什么想法发生了什么？ - James

嗯，我刚刚检查了一下，它对我来说似乎是有效的。你是否缺少更新？你在其他地方将其设置为false了吗？你禁用了格式化程序吗？ - David

终于搞定了，我需要手动运行格式化才能在保存时自动执行。有多个冲突的代码检查工具尝试检查同一文件，但没有报错。如果你安装了多个工具，以上代码片段需要显式设置要使用哪个代码检查工具。 - James

是的，我也遇到了同样的问题。要设置默认的linter，请打开命令面板Ctrl+Shift+P并配置默认格式化程序。 - Jaskaran Singh

为了跟进@JaskaranSingh的问题，在键盘上按下Ctrl-Shift-P，开始输入并选择“格式化文档”，然后它会要求选择默认格式化程序。之后，“formatOnSave”设置会生效。 - ruffin

Answer 2

您可以安装 Prettier Code formatter extension，并在您的 settings.json 文件中添加这两个选项。

{
  "typescript.format.enable": false,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

- Safwat Fathi

---

这在我的情况下起作用了，而其他方法则不行。 - jsbisht

在我的情况下，它已经添加到了settings.json中。为了使其与.tsx一起工作，只需将"[typescript]"更改为"[typescriptreact]"即可。 - DarthCucumber

Answer 3

在我的情况下，我在 settings.json 中加入了这两个设置参数，因为我注意到保存 .ts 文件时它没有格式化。下面是更新后的设置：

"[typescript]": { // for .ts files
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},
"[typescriptreact]": { // for .tsx files
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},
"editor.codeActionsOnSave": { // apply ESLint
    "source.fixAll.eslint": true
},

- Compaq LE2202x

Answer 4

使用像 'ESLint' 这样的插件的替代方法:

"[typescriptreact]": {
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

- TheRemoteCoder

Answer 5

"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode", /// TSX auto format on save Prettier
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": { /// TSX auto format on save ESLint
      "source.fixAll.eslint": true
    }
  },

- Wilfred

Answer 6

说到我的问题，我在键盘快捷键上搞砸了。

• 面临的问题：保存时无法格式化。
• 解决方案：我打开了键盘快捷键 json 文件，搜索了 cmd+s，发现还有一个快捷键是我创建的右侧分割，包含了cmd+s cmd+r。
• 总结：一旦我从所有自定义快捷键中移除以 cmd+s 开始的键盘快捷键，它就可以正常工作了。

- Rohit Kumar