是否有JSX格式化程序可用于升华文本？

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

有一种用于格式化JavaScript文件的jsFormat，但是我找不到用于JSX的格式。

你们如何处理JSX格式？

更新4

检查更漂亮，不是可配置为esformatter，但当前用于格式化一些大型项目（例如React本身）

更新3

检查sublime jsfmt。如果将esformatter-jsx添加到配置中，并将软件包安装在forlime-jsfmt的forlder中。您将能够直接从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);
});

我实际上希望该eformatter使用一个使用esprima-fb而不是esprima的rocambole版本，以避免proxyquire。

HTML-CSS-JS Prettify插件中有一个设置，可让您忽略js / jsx文件中的xml语法。这样就不会弄乱jsx代码。设置为："e4x": true在设置文件的“ js”部分中

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

如果您有自动关闭标签，例如，这不能很好地工作。以/>结尾的标签

您可以为Sublime 2和3安装JsPrettier软件包。这是一个相当新的JavaScript格式化程序（撰写本文时：2017年2月）。它支持大多数最新开发，例如：ES2017，JSX和Flow。

快速开始

1. 使用终端在全局上安装漂亮的： $ npm install -g prettier
2. 在Sublime中，转到“工具”->“命令面板...”->“程序包控制：安装程序包”，输入单词JsPrettier，然后选择它以完成安装。
3. 使用编辑器内的上下文菜单格式化文件或将其绑定到键盘快捷键： { "keys": ["super+b"], "command": "js_prettier" }

链接：

• https://github.com/jonlabelle/SublimeJsPrettier
• https://github.com/jlong​​ster/prettier

添加到@Shoobah说的内容：

HTML-CSS-JS Prettify插件中有一个设置，可让您忽略js / jsx文件中的xml语法。这样就不会弄乱jsx代码。设置为：“ e4x”：设置文件的“ js”部分中为true

转到：首选项>程序包设置> HTML \ CSS \ JS Prettify>设置Prettify首选项

转到“ js”部分：

将“ jsx”添加到“ allowed_file_extension”，然后将“ e4x”更改为“ true”

互联网上总是告诉您将'e4x'设置为true的答案，但是有时，我们必须设置'format_on_save_extensions'选项，然后在数组中添加'jsx'

修改jsFormat.sublime-settings

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

使用Sublime的Package Installer安装Babel。然后：

1. 打开一个.jsx文件。
2. 从菜单中选择查看，
3. 然后语法->使用当前扩展名全部打开...-> Babel-> JavaScript（Babel）。

不是专门针对Sublime Text，而是JavaScript中有一个用于React JSX的美化工具。

http://prettydiff.com/?m=在以下网址美化支持JSX的声明：http : //prettydiff.com/guide/react_jsx.xhtml