sublime中格式化jsx文件

sublime中格式化jsx填坑.md

sublime中使用Sublime JSFMT 插件

在一個jsx文件中粘貼了一段bootstrap中tables代碼，對齊很糟糕，讓人看的很難受，因而乎在網上搜各類sublime中格式化jsx語法的插件

搜到了兩個，一個是 jsFormat 另一個是
sublime-jsfmt

1.針對 jsFormat： 安裝，並修改user-setting爲：

{
  "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,
}

查看配置文件中的keyBindings-Default，可得知格式化的默認快捷鍵爲 <kbd>alt+ctrl+f</kbd>, 在欲格式化的文件中執行此命令，無效

2.針對Sublime JSFMT： 安裝，並修改user-setting爲：

{
  "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
  } 
}

而且在preferences的keyBinds中設置快捷鍵爲：

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

而後在須要格式化的jsx文件中使用快捷鍵 <kbd>ctrl+q</kbd>並無什麼做用。

查看[官網]: （https://github.com/ionutvmi/sublime-jsfmt） ，人家的配置也是這樣子的，查了好幾個博客也仍是這個樣子。

看來看去也沒發現哪裏有錯誤 直到我在谷歌上搜了一下 [救命博客] (https://blog.csdn.net/baidu_37050701/article/details/74942422) 看了這個博客才知道，噢，原來在使用Sublime JSFMT以前，還須要安裝兩個插件： esformatter esformatter-jsx

當我在package install中安裝的時候，出現package message告訴我說，須要使用npm 安裝 （其實我還沒太懂爲何）

npm install -g esformatter <br/> npm install -g esformatter-jsx

而後重啓sublime,在須要格式化的jsx文件中使用 <kbd>ctrl+q</kbd>,便可成功格式化代碼。 目前以爲格式化的還不那麼好看，估計是設置的問題。

其實回過頭再去看一下 Sublime JSFMT的官網，會發現有Installing plugins這一節。

再去看看esformatter的官網 https://github.com/royriojas/esformatter-jsx/wiki/Usage-with-jsfmt