Sublime中HTML/CSS/JS Prettify插件格式化React文件失效求助

我之前在混用JSX和HTML写单文件的时候也踩过这个坑，给你几个亲测有效的解决思路：

• 强制指定文件解析语言
  在HTML文件的最顶部添加一行注释，明确告诉插件要按JSX规则解析整个文件：

  <!-- prettify lang=jsx -->
  

  有些编辑器也支持手动切换文件类型（比如把当前HTML文件标记为JSX格式），这也能帮插件正确识别内容。

• 完善插件的JSX相关配置
  只开e4x: true可能不够，试试在插件的JS配置里补充这些项：

  window.prettyPrintOptions = {
    e4x: true,
    jsx: true, // 明确开启JSX支持
    extensions: {
      'html': 'jsx' // 把.html文件关联到JSX解析器
    }
  };
  

  不同版本的插件配置项可能略有差异，你可以对照插件的文档微调。

• 给JSX代码指定正确的script类型
  把你的JSX代码放在type="text/babel"的script标签里，插件对这种类型的代码块兼容性更好：

  <script type="text/babel">
    // 这里写JSX代码
    const App = () => <h1>Hello React</h1>;
  </script>
  

• 更新插件到最新版本
  旧版本的Prettify插件对JSX的混合场景支持可能不完善，更新到最新版大概率能解决一些兼容性问题。

内容的提问来源于stack exchange，提问作者Joki