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

更新 4

勾选 prettier，不能像 esformatter 那样配置，但目前用于格式化一些大项目（like React itself）

更新 3

检查sublime jsfmt。如果将 esformatter-jsx 添加到配置中并将包安装在 sublime-jsfmt 的 forlder 中。您将能够直接从 Sublime 格式化 JSX 文件。 Here is a guide for that

更新 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

这是一个live demo on 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 版本，以避免代理查询。

---

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

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

如果您有自闭合标签，例如，这将无法正常工作。以 /> 结尾的标签

---

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

快速开始

使用终端全局安装 prettier： $ 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/jlongster/prettier

---

添加到@Shoobah 所说的内容：

HTML-CSS-JS Prettify 插件中有一个设置允许您忽略 js/jsx 文件中的 xml 语法。这样它就不会弄乱 jsx 代码。设置为：“e4x”：设置文件的“js”部分中的 true 转到：Preferences > Package Settings > HTML\CSS\JS Prettify > Set Prettify Preferences

转到“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 的包安装程序，安装 Babel。然后：

打开一个 .jsx 文件。从菜单中选择查看，然后选择语法 -> 使用当前扩展名打开所有... -> Babel -> JavaScript (Babel)。

---

不是专门针对 Sublime Text，但在 JavaScript 中有一个美化器用于 React JSX。

http://prettydiff.com/?m=beautify 声称支持 JSX：http://prettydiff.com/guide/react_jsx.xhtml

---