Sublime Text有没有JSX格式化工具？

Question

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

有JSFormat用于格式化JavaScript文件，但我找不到JSX的格式化工具。

你们如何处理JSX的格式化？

- fin

---

是的，寻找可以与几乎任何编辑器一起使用的jsx TextMate捆绑包。 - Brigand

似乎只是一个语法高亮器，我正在寻找能够对齐和排序的格式化程序。 - fin

我不知道有没有。在React Google Group上问会更好。 - Brigand

目前也找不到一个好的解决方案。目前可以使用 esprima-fb 解析源代码，并使用 escodegen-jsx 生成格式化的输出。但是格式选项有限，而且会失去空白行...另外，escodegen-jsx 是一个没有问题跟踪的分支...不确定它是否会得到积极维护。我想知道 fb 如何处理他们的 jsx 代码库。 - user1600124

esformatter的beta版本似乎具有一定的JSX格式化能力，因为它使用了esprima-fb，但仍未达到生产就绪状态。 - fin

Answer 1

更新 4

查看 prettier，虽然可配置性不如 esformatter，但目前被一些大型项目（例如 React 本身）用来格式化代码。

更新 3

查看 sublime jsfmt。如果您将 esformatter-jsx 添加到配置文件中并在 sublime-jsfmt 文件夹内安装该包，则可以直接从 Sublime 格式化 JSX 文件。这里是使用指南。

更新 2

从命令行中，您还可以使用 esbeautifier。它是一个围绕着 esformatter 的包装器，接受要格式化的文件列表。

# 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版本，以避免使用proxyquire。

- roy riojas

---

这对我来说只适用于esformatter-jsx-ignore，但已经足够好了。谢谢！ - Jasper

这是一个很好的答案，我已经使用了这个工具一段时间了，但我们已经转向使用带有babel的es6/es7，它不再起作用。 - user3196599

请确保使用最新的esformatter，因为旧版本无法识别ES6/ES7语法。 - roy riojas

请检查您的Sublime控制台，在Mac上按下ctrl+`以打开控制台，您可以在esformatter-jsx存储库或JSFMT存储库中打开一个工单，并提供您在控制台中看到的错误信息。 - roy riojas

prettier 对我来说很好用。Sublime 插件在这里 https://github.com/jonlabelle/SublimeJsPrettier，它还支持 eslint https://github.com/prettier/prettier#eslint。很高兴这个问题终于被接受了，差不多三年了。 - fin

Answer 2

HTML-CSS-JS Prettify插件中有一个设置可以让你忽略js/jsx文件中的xml语法。这样就不会破坏jsx代码。

设置是：在设置文件的"js"部分中添加"e4x": true

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

如果您有自闭合标签（例如以/>结尾的标签），则该设置可能效果不佳。

- Shoobah

---

这在最新版本的babel-sublime和HTML-CSS-JS Prettify中仍然非常有效。只需确保将您使用的“jsx”或任何文件扩展名添加到“allowed_file_extensions”中即可。 - damd

这个答案过时了吗？我的代码中没有/>，但它仍然无法工作。 - Andy Darwin

prettier（又称jsprettier）对于Sublime来说是最好的！请参见下面的答案：https://dev59.com/0l4c5IYBdhLWcg3wv8lm#42169688 - tnrich

Answer 3

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

快速入门

1. 使用终端全局安装 prettier: $ npm install -g prettier
2. 在 Sublime 中转到 Tools -> Command Palette... -> Package Control: Install Package，输入单词 JsPrettier，然后选择它以完成安装。
3. 使用编辑器内部的上下文菜单格式化文件或将其绑定到键盘快捷键：{ "keys": ["super+b"], "command": "js_prettier" }

链接：

• https://github.com/jonlabelle/SublimeJsPrettier
• https://github.com/jlongster/prettier

- Eugene Kulabuhov

---

这绝对是目前最好的答案！prettier 真是太棒了！ - tnrich

是的，确实，这对我也非常有效。需要注意的最重要的事情是“全局”部分。 - Ionut Necula

Answer 4

补充@Shoobah所说的：

在HTML-CSS-JS Prettify插件中有一个设置，可以忽略js/jsx文件中的xml语法。这样就不会破坏jsx代码。该设置是：settings文件中“js”部分中的“e4x”: true

前往: Preferences > Package Settings > HTML\CSS\JS Prettify > Set Prettify Preferences

前往“js”部分:

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

- brownmamba

Answer 5

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

修改jsFormat.sublime-settings文件

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

- Monochrome Yeh

---

我按照你说的做了，但是对我没用。:( - Yash Vekaria

“jsFormat.sublime-settings” 位于何处？以便我可以修改 “format_on_save_extensions”: [“js”，“json”，“jsx”]。我找到的与文件扩展名最接近的是：“js”：“allowed_file_extensions”：[“js”，“json”，...] - Chris22

你可以在这里找到它：Preferences > Package Settings > jsFormat > Settings - User。但对我来说没有用，仍然会奇怪地缩进JSX :( - Niclas

一直在寻找解决方案，这个解决了我的问题，谢谢！ - Al-Maamari Tareq

Answer 6

使用Sublime的包安装程序，安装Babel。然后：

1. 打开.jsx文件。
2. 从菜单中选择“视图”，
3. 然后语法 -> 打开所有具有当前扩展名的文件... -> Babel -> JavaScript（Babel）。

- Alan P.

---

还有一个JSX语言包可以使用。 - TabsNotSpaces

Answer 7

虽然不是专为Sublime Text设计的，但JavaScript中有一个用于美化React JSX的工具。

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

- Austin Cheney