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” } 最后结果就是：