zoukankan      html  css  js  c++  java
  • 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,可得知格式化的默认快捷键为 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

  • 相关阅读:
    UrlRewrite(地址变换)技术在IIS 5.0/ASP平台上面的应用
    Asp.Net页面输出到EXCEL
    [收藏] ASP.NET缓存:方法和最佳实践
    基于.NET的全文索引引擎Lucene.NET
    [ASP.NET]支持up,down以及pageup,pagedown,home,end,Enter键盘操作的DataGrid
    无知所以羞耻
    你相信世界上有心有灵犀的事情吗?
    javascript的日期加减
    2007312
    人应该多向上
  • 原文地址:https://www.cnblogs.com/InnerPeace-Hecdi/p/9069995.html
Copyright © 2011-2022 走看看