是否有用于崇高文本的JSX格式化程序?

 U友48805799 发布于 2022-12-04 15:22

我正在使用Sublime Text作为文本编辑器.

有一个jsFormat用于格式化javascript文件,但我找不到一个JSX.

你们如何处理格式化JSX?

5 个回答
  • 更新4

    检查更漂亮,不是可配置为esformatter,但目前用于格式化一些大项目(如React本身)

    更新3

    检查sublime jsfmt.如果将esformatter-jsx添加到配置中并在forlder中为sublime-jsfmt安装包.您将能够直接从Sublime格式化JSX文件.这是一个指南

    更新2

    从命令行,您也可以使用esbeautifier.它是esformatter的包装器,接受要格式化的glob列表

    # install the dependencies globally
    npm i -g esbeautifier
    
    # beautify the files under src/ and specs/ both .js and .jsx
    esbeautifier src/**/*.js* specs/**/*.js*
    

    更新

    所以我最终为esformatter做了一个插件来启用JSX文件的格式化:

    https://www.npmjs.com/package/esformatter-jsx

    这是requirebin的现场演示

    从Sublime 调用esformatter并将当前文件作为参数传递应该是可行的.无论如何要从命令行使用它,您可以按照以下说明操作:

    从命令行可以像这样使用:

    # install the dependencies globally
    npm i -g esformatter esformatter-jsx
    
    # call it (this will print to stdout)
    esformatter --plugins=esformatter-jsx ./path/to/your/file
    
    # to actually modify the file
    esformatter --plugins=esformatter-jsx ./path/to/your/file > ./path/to/your/file
    
    # to specify a config file (where you can also specify the plugins)
    # check esformatter for more info about the configuration options
    esformatter -c ./path/to/.esformatter ./path/to/your/file > ./path/to/your/file
    

    ====下面的旧答案===

    因此,如果你正在寻找的只是让你的jsx文件格式化,同时允许jsx语法(基本上美化所有的javascript语法和忽略jsx标签,意味着保持原样),这就是我正在使用的esformatter

    // needed for grunt.file.expand
    var grunt = require('grunt');
    
    // use it with care, I haven't check if there
    // isn't any side effect from using proxyquire to 
    // inject esprima-fb into the esformatter
    // but this type of dependency replacement
    // seems to be very fragile... if rocambole deps change 
    // this will certainly break, same is true for esformatter
    // use it with care
    var proxyquire = require('proxyquire');
    var rocambole = proxyquire('rocambole', {
      'esprima': require('esprima-fb')
    });
    
    var esformatter = proxyquire('esformatter', {
      rocambole: rocambole
    });
    
    // path to your esformatter configuration
    var cfg = grunt.file.readJSON('./esformatter.json');
    
    // expand the files from the glob
    var files = grunt.file.expand('./js/**/*.jsx');
    
    // do the actual formatting
    files.forEach(function (fIn) {
      console.log('formatting', fIn);
      var output = esformatter.format(grunt.file.read(fIn), cfg);
      grunt.file.write(fIn, output);
    });
    

    我真的希望esformatter使用一种使用esprima-fb而不是esprima的rocambole版本,以避免代理问题.

    2022-12-11 02:07 回答
  • HTML-CSS-JS Prettify插件中有一个设置,允许您忽略js/jsx文件中的xml语法.这样它就不会搞砸jsx代码.设置为:"e4x": true在设置文件的"js"部分

    首选项>包设置> HTML\CSS\JS Prettify>设置Prettify首选项

    如果你有自闭标签,这不会很好.标签以/>结尾

    2022-12-11 02:56 回答
  • 添加@Shoobah所说的内容:

    HTML-CSS-JS Prettify插件中有一个设置,允许您忽略js/jsx文件中的xml语法.这样它就不会搞砸jsx代码.设置为:"e4x":设置文件的"js"部分为true

    转到:首选项>包设置> HTML\CSS\JS Prettify>设置Prettify首选项

    转到"js"部分:

    将"jsx"添加到"allowed_file_extension",然后将"e4x"更改为"true"

    2022-12-11 02:58 回答
  • 你可以为Sublime 2和3安装一个JsPrettier包.它是一个相当新的JavaScript格式化程序(在撰写本文时:2017年2月).它支持大多数最新的开发,如:ES2017,JSX和Flow.

    快速开始

      使用终端全局安装更漂亮: $ npm install -g prettier

      在Sublime中转到Tools - > Command Palette ... - > Package Control:Install Package,键入单词JsPrettier,然后选择它以完成安装.

      使用编辑器中的上下文菜单格式化文件或将其绑定到键盘快捷键: { "keys": ["super+b"], "command": "js_prettier" }

    链接:

    https://github.com/jonlabelle/SublimeJsPrettier

    https://github.com/jlong​​ster/prettier

    2022-12-11 03:08 回答
  • 互联网上的答案总是告诉你将'e4x'设置为true,但有时候,我们必须设置'format_on_save_extensions'选项然后在数组中添加'jsx'

    修改jsFormat.sublime-settings

    {
      "e4x": true,
      "format_on_save": true,
      "format_on_save_extensions": ["js", "json", "jsx"]
    }
    

    2022-12-11 03:09 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有