保存时 Visual Studio 代码格式化失败答案

【问题标题】：Visual Studio Code Formatting fail on save保存时 Visual Studio 代码格式化失败
【发布时间】：2017-08-26 05:20:18
【问题描述】：

我已经开始学习 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忽略它们？

【问题讨论】：

请在settings.json文件中添加信息。
@jose920405 更新

标签： react-native formatting save visual-studio-code

【解决方案1】：

您可以在选择语言模式下的任务栏中选择 JavaScript React。

【讨论】：

【解决方案2】：

保存后我所有的HTML格式都在js中搞砸了，我禁用“JS-CSS-HTML Formatter”并重新启动vscode，问题解决了。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

只需从设置中关闭格式保存选项即可。

【讨论】：

【解决方案5】：

我刚遇到这个问题，显然是因为美化/更漂亮，尝试禁用两者，然后重新启动 Vs 代码（您的编辑器）。但是如果你真的想使用更漂亮的，请在它的扩展设置下，确保它严格使用空格和围绕其他一些设置，你应该没问题，干杯。

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

使用 Prettier Code Formatter 而不是 Beautify。完美适用于语言模式 Babel JavaScript

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

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

【讨论】：

这为我解决了这个问题！

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

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

原来是 JS-CSS-HTML 格式化程序。我查看了说明并暂时删除了自动保存。我必须为此制定具体的设置。

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

【讨论】：

【解决方案14】：

您应该在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,

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

【讨论】：

我已经尝试了这两种方法都无济于事。我注意到格式化文件 (CTRL + SHIFT + F) 与保存的结果相同。查看更新的问题
对标签的有趣观察。你有 HTML 的扩展吗？也许他们太激进了。另外，要检查的东西很愚蠢，但是在您的屏幕截图中，似乎需要保存 settings.json。
是的，我确实保存了它。你是对的，它是一个扩展。