sublime插件jsfmt格式化jsx

jsx格式化

现在比较火的前端开发就是组件化react，相信很多伙伴都在写jsx文件的时候遇到过格式的问题，在网上也有很多解决办法，比如ATOM 的react。但是ATOM比较耗内存，还是热衷于sublime这种轻量级的，sublime也有插件格式jsx代码。大多数就是用jsformat来格式，但是这种存在问题，具体情况如下：

问题：jsformat格式jsx

-修改配置文件
{
“e4x”: true,
// jsformat options
“format_on_save”: true,
}
但是这样还是有问题，格式化代码后就会变成这样

就会分隔开，不但不好看，而且编译也会报错。

正确的：jsfmt格式化jsx

• 安装jsfmt
  光安装jsfmt是不行的，还需要esformatter 和esformatter -jsx这两个插件
• 安装esformatter 和 esformatter-jsx
  npm i esformatter@latest esformatter-jsx@latest
• 查看安装结果
  npm ls esformatter
  npm ls esformatter-jsx
  所有安装好了后，就修改配置文件
• 修改配置文件
  –修改jsfmt的setting-user
  {
  “extensions”:
  [
  “js”,
  “jsx”,
  “sublime-settings”
  ],
  “options”: {
  “plugins”: [
  “esformatter-jsx”
  ],
  “jsx”: {
  “formatJSX”: true,
  // change these to your preferred values
  // refer to https://github.com/royriojas/esformatter-jsx#best-configuration for more options
  “attrsOnSameLineAsTag”: false,
  “maxAttrsOnTag”: 1,
  “firstAttributeOnSameLine”: false,
  “alignWithFirstAttribute”: true
  }
  // other esformatter options
  }
  }
  -配置快捷键
  找到key bindings-user文件，加入
  {
  “keys”:[“ctrl+q”],
  “command”:”format_javascript”
  }
  最后结果就是：