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