Visual Studio Code保存时格式化失败

Question

我开始学习 React Native。

我使用 Visual Studio Code 作为我的编辑器。

我已经设置好模板并启动了应用程序。但是，每当我更改 .js 文件并保存时，VSCode 就会破坏所有格式。

我认为我可以在 settings.json 文件中解决这个问题，但是经过一段时间的谷歌搜索和尝试，我找不到正确的设置。

这是一个错误还是我做错了什么？

设置文件是默认的:

更新：我重新安装了 vscode。然后设置了一个基本的 js 文件，其中包含一个 React Native 标签和一个 HTML 标签。我添加了：

"editor.formatOnSave": false,
"javascript.format.enable": false

我已经将这个问题记录在我的settings.json文件中，但问题仍然存在：

问题是在js文件中有标签，我不知道如何告诉vscode忽略它们？

- Jamadan

---

请在 settings.json 文件中添加信息。 - jose920405

@jose920405 已更新 - Jamadan

Answer 1

通过查看扩展，我发现这是什么。感谢@wgj的提示。

结果证明这是JS-CSS-HTML格式化程序。我浏览了说明并暂时删除了自动保存。我将需要找出该程序的具体设置。

它使用js-beautify，如果有人知道我应该查看哪些设置，那将不胜感激。

- Jamadan

Answer 2

我遇到了类似的问题，最终发现罪魁祸首是...

所以我只需禁用它在这个工作区中的使用。

- MarineHero

Answer 3

我也有同样的问题，保存后所有HTML格式都混乱了，我禁用了"JS-CSS-HTML格式化程序"，问题解决了。

- Mdtc18

Answer 4

最终的解决方法是在底部工具栏中将文件格式从JavaScript更改为JavaScript React。

- umesh diwekar

Answer 5

保存后我的HTML格式在JS中混乱了，我禁用了“JS-CSS-HTML格式化程序”并重新启动了VSCode，问题解决了。

- Sowjanya

Answer 6

我通过将我的组件文件扩展名从js转换为jsx来解决了这个问题。不再有问题，一切都正常工作。

- Ozesh

---

这对我解决了问题！ - Joel Malone

Answer 7

1. 禁用js-css-html格式化程序。
2. 如果您同时使用prettier和beautify，请覆盖设置如下：

"beautify.ignore": [
        "**/*.js",
        "**/*.jsx"
    ]

- ishab acharya

Answer 8

使用Prettier代码格式化工具代替Beautify。对于Babel JavaScript语言模式，它可以完美地工作。

- Ashyit17

Answer 9

你应该在settings.json中搜索“format”。你会发现有很多 TypeScript/JavaScript 格式调整选项，但我觉得最突出的是：

  // Defines space handling after opening and before closing non empty brackets.
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false

如果您不喜欢格式，可以完全关闭它：

  // Enable/disable default JavaScript formatter.
  "javascript.format.enable": true,

然而，我大部分的格式选项都来自于语言服务器扩展，因此如果您特别是在使用React Native的语言服务器扩展，请务必检查settings.json中的属性或文档，看看是否有任何属性可以添加。

- wgj

---

我已经尝试了这两种方法，但都没有成功。我注意到格式化文件（CTRL + SHIFT + F）会得到与保存相同的结果。请参见更新的问题。 - Jamadan

关于标签的有趣观察。你有HTML的扩展吗？也许它们太过激进了。另外，检查一下可能有点傻，但在你的截图中看起来好像需要保存settings.json文件。 - wgj

是的，我已经保存了。你说得对，它是一个扩展名。 - Jamadan

Answer 10

解决方法1：禁用JS-CSS-HTML格式化器

解决方法2：按下Ctrl+,（打开设置），然后搜索 Code formatted 并将其更改为 none --> Prettier

如果您没有从扩展市场安装 prettier ，请先安装。

- The Gentelmen 24