macOS系统下VSCode按Command+S后HTML代码异常变更的ReactJS项目问题求助

我之前也碰到过一模一样的情况，保存代码时突然被自动修改，真的很影响开发节奏！结合你描述的React项目、macOS+VSCode场景，咱们一步步排查可能的原因：

• 检查自动格式化插件的设置
  最常见的原因就是VSCode的自动格式化功能在保存时触发了。首先看看你有没有安装Prettier、ESLint这类格式化工具，然后做这些检查：

  1. 打开VSCode设置（快捷键Command+,），搜索Format On Save，确认这个选项是否开启——如果开启了，保存时会自动按照插件规则格式化代码，可能导致HTML结构、缩进或属性顺序变化。
  2. 查看具体插件的配置，比如Prettier对HTML的处理：搜索Prettier: Html Whitespace Sensitivity，如果设置为css，它会严格按照CSS规则处理空格，可能导致标签换行或缩进变化；改成ignore可以放宽对空格的检查。
  3. 你可以直接打开settings.json（通过设置界面右上角的图标进入），看看有没有类似这样的配置：

     {
       "editor.formatOnSave": true,
       "[html]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
       }
     }
     

     如果不需要自动格式化HTML，可以把[html]对应的默认格式化器删掉，或者针对HTML单独关闭自动格式化："[html].editor.formatOnSave": false。

• 排查React相关插件的干扰
  因为你是React项目，有些JSX/React插件可能会自动转换HTML标签（比如把非自闭合标签改成自闭合，或者调整JSX属性顺序）。试试临时禁用所有React相关的插件（比如Reactjs code snippets、ES7+ React/Redux/React-Native snippets等），然后保存测试，看问题是否消失。

• 确认文件类型关联是否正确
  VSCode右下角会显示当前文件的类型，比如HTML或JavaScript React。如果你的HTML文件被误识别为JSX文件，格式化规则就会不一样。点击右下角的文件类型，手动选择HTML再保存试试。

• 检查项目本地配置文件
  项目根目录下的.prettierrc、.eslintrc.js这类配置文件可能覆盖了VSCode的全局设置。比如ESLint的react/jsx-indent-props规则，或者Prettier的jsxBracketSameLine规则，都可能导致代码在保存时变更。打开这些文件，看看有没有针对HTML/JSX的格式化规则，尝试临时注释掉相关规则再测试。

如果以上方法都没解决，建议你把自动变更的具体代码示例贴出来（比如保存前和保存后的代码对比），这样能更精准地定位问题~

内容的提问来源于stack exchange，提问作者Burak Akgün