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，可得知格式化的默认快捷键为 alt+ctrl+f,

在欲格式化的文件中执行此命令，无效

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文件中使用快捷键

ctrl+q并没有什么作用。

查看[官网]:

（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

npm install -g esformatter-jsx

然后重启sublime,在需要格式化的jsx文件中使用

ctrl+q,即可成功格式化代码。

目前觉得格式化的还不那么好看，估计是设置的问题。

其实回过头再去看一下 Sublime JSFMT的官网，会发现有Installing plugins这一节。

再去看看esformatter的官网

https://github.com/royriojas/esformatter-jsx/wiki/Usage-with-jsfmt

原文地址：https://www.cnblogs.com/InnerPeace-Hecdi/p/9069995.html