Sublime Text 3中React代码闭合标签及语法高亮异常求助

我之前也遇到过一模一样的问题！Sublime Text 3默认的JavaScript语法对JSX支持很差，才会出现标签高亮不一致、标签闭合逻辑混乱的情况，按下面的步骤来就能搞定：

• 第一步：安装Babel插件
  Babel插件专门为ES6+和JSX提供完美的语法支持，是React开发的必备工具。

  1. 打开Sublime的Package Control（快捷键Ctrl+Shift+P或Cmd+Shift+P）
  2. 输入Install Package并回车
  3. 搜索Babel，找到后安装它

• 第二步：设置JSX文件默认使用Babel语法
  安装完插件后，需要让Sublime识别.js/.jsx文件为Babel语法：

  1. 打开任意React代码文件
  2. 点击右下角的语法选择器（默认显示JavaScript）
  3. 在弹出的菜单里选择Babel -> JavaScript (Babel)
  4. 如果你想永久设置，点击Open all with current extension as... -> Babel -> JavaScript (Babel)，这样所有.js/.jsx文件都会自动用Babel语法高亮

• 第三步：优化标签闭合体验
  搞定语法高亮后，标签闭合的问题也会随之改善，但如果还想更顺手，可以做这些调整：

  1. 确保Sublime的自动标签闭合功能开启：打开Preferences -> Settings，在用户设置里添加：

     "auto_close_tags": true,
     "close_tags_on_slash": true
     

  2. 如果你习惯用Emmet，也可以安装Emmet插件，它对JSX的标签支持也很好，输入标签缩写按Tab就能自动生成闭合标签

做完这些步骤后，你再打开你的React代码，会发现<h1>的高亮和闭合标签完全一致，编辑器也不会再误判语法了，编辑体验和普通JS文件就一模一样啦！

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