Visual Studio代码格式在保存时失败

Question

我开始学习React Native。

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

我已经设置了锅炉板并启动了应用程序。但每当我更改.js文件并点击保存时，VSCode就会弄乱所有格式。

我以为我可以在settings.json文件中对此进行排序，但在谷歌搜索一段时间后，我无法找到正确的设置。

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

设置文件是默认文件：

更新：我重新安装了vscode。然后使用react native标记和html标记设置一个基本的js文件。我补充说：

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

到我的settings.json文件，问题仍然存在：

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

Answer 1

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

原来它是JS-CSS-HTML格式化程序。我查看了说明并暂时删除了自动保存。我将不得不计算出具体的设置。

它使用js-beautify，所以如果有人知道我应该看的设置将非常感激。

Answer 2

我通过将我的组件文件扩展名从js转换为jsx 找到了解决此问题的方法。没有更多问题，一切都运转良好。

Answer 3

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

所以我只是为工作区禁用了它。

Answer 4

同样，保存后我所有的HTML格式都被弄乱了，我禁用了“ JS-CSS-HTML Formatter”并解决了问题

Answer 5

您应该在settings.json中搜索“格式”。你会在那里找到大量的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,

但是，我的很多格式化选项都来自语言服务器扩展，所以如果您专门使用Rently Native，请务必检查settings.json中的属性或文档以查看是否存在您可以添加的任何属性。

Answer 6

使用更漂亮的代码格式化程序代替Beautify。非常适合语言模式Babel JavaScript

Answer 7

1. 禁用js-css-html格式化程序。
2. 如果您同时使用漂亮和美化功能，请将该设置覆盖为：

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

Answer 8

将此文件添加到settings.json文件中。无论您是否使用任何扩展名，都请使用此代码。对我来说很好：

Answer 9

我只是遇到了这个问题，显然是由于美化/漂亮，尝试禁用两者，然后重新启动Vs代码（您的编辑器）。但是，如果您真的要使用漂亮的字体，请进入其扩展名设置，并确保其严格使用空格，并在其他一些设置中四处打乱，干杯吧。

Answer 10

只需从设置中关闭“保存”格式即可。

Answer 11

我已经尝试了所有方法，但是问题可以通过以下方法完全解决： ->打开setting.json ->“ files.associations”：{ “ * .js”：“ javascriptreact” } ->添加以上行，然后按“保存”即可解决问题

Answer 12

最后，诀窍是将底部工具栏上的文件格式从 JavaScript 更改为 JavaScript React。