react jsx 代碼格式化

使用說明:

jsx內部的代碼先用Ctrl+q格式化一遍,再Ctrl+S保存

或者也可以將Sublime JSFMT設置為 "autoformat": true, 則每次保存會有一兩秒卡頓.

插件1

JsFormat : Settings - User

{
  "e4x": true,
  // jsformat options
  "format_on_save": true,
  // {}大括號不再強制換行
  "brace_style": "collapse-preserve-inline",
  "format_selection": false,

   "indent_size": 2,
   "indent_char": " ",
   "indent_with_tabs": false,
}

 

插件2

Sublime JSFMT : Settings - User

{
    "autoformat": false,
    "extensions":
    [
        "js",
        "jsx",
        "sublime-settings"
    ],
    "options":
    {
        "jsx":
        {
            "alignWithFirstAttribute": true,
            "attrsOnSameLineAsTag": true,
            "firstAttributeOnSameLine": false,
            "formatJSX": true,
            "maxAttrsOnTag": 1
        },
        "plugins":
        [
            "esformatter-jsx"
        ]
    }
}

Key Bindings - User

{ "keys": ["ctrl+q"], "command": "format_javascript" }

 

如有其他問題可參考 https://github.com/royriojas/esformatter-jsx/wiki/Usage-with-jsfmt