• 文章目录

  • jsx代码格式化错乱
  • 如何修复这种情况
  • 修改配置文件

• jsx代码格式化错乱

当你在用vscode编写jsx代码时,也许你的编辑器设置了自动保存,或者自动格式化代码.
而vscode 对js文件中的 jsx 代码格式化是下面这个样子的:

如何修复这种情况

• 首先安装插件 Prettier

vscode扩展插件中搜索 Prettier 安装

修改配置文件

vscode 文件-> 首选项-> 设置->用户->文本编辑器->文件

右侧添加项:

"*.js": "javascriptreact"

或者在配置文件settings.json 中搜索 files.associations ,里面添加 "*.js": "javascriptreact"

保存退出 vscode ,重新打开,格式化包含 jsx语法的js文件,不会再遇到上面格式化错误的情况.

这类工具技巧真正有价值的是把排错路径缩短

「vscode 天赋异禀 - 格式化jsx代码」这类文章看起来像一个小技巧，但它真正值钱的地方，在于帮你更快找到问题所在。很多编辑器、Git 或系统工具问题都不是概念复杂，而是第一次出错时缺少判断顺序，结果在错误方向上反复试。只要把“先看什么、再改什么、改完怎么确认”这条路径补完整，短文章也会更像一篇能反复回看的工作笔记。

下次再遇到时我会怎么判断

• 先确认症状是配置问题、状态残留，还是工具本身的默认行为，不要一上来就重装或删文件。
• 每改一项设置都要有对应的验证动作，确保最后留下的是可复现的解决路径，而不是碰巧恢复。
• 如果一个技巧会影响团队其他人的默认工作流，最好顺手补一句适用边界，避免它变成新的坑。