Question

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

有一个用于格式化javascript文件的jsFormat，但我找不到JSX文件。

你们如何处理格式化JSX？

Answer 1

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

偏好设置＆gt;套餐设置＆gt; HTML \ CSS \ JS Prettify＆gt;设置Prettify偏好

如果你有自闭标签，这不行。以/＆gt;结尾的标签

Answer 2

更新4

检查prettier，而不是可配置为esformatter，但目前用于格式化一些大项目（like React itself）

更新3

检查sublime jsfmt。如果您将esformatter-jsx添加到配置并在forlder中为sublime-jsfmt安装软件包。您将能够直接从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版本，以避免代理。

Answer 3

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

快速启动

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

链接：

Answer 4

添加@Shoobah所说的内容：

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

转到：首选项＆gt;套餐设置＆gt; HTML \ CSS \ JS Prettify＆gt;组   优化偏好

转到“js”部分：

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

Answer 5

互联网上的答案总是告诉你设置＆＃39; e4x＆＃39;为真，但有时候，我们必须设置＆＃39; format_on_save_extensions＆＃39;然后添加＆＃39; jsx＆＃39;在数组中

修改jsFormat.sublime-settings

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

Answer 6

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

打开.jsx文件。
从菜单中选择“查看”
然后语法 - ＆gt;打开所有当前扩展名为... - ＆gt; Babel - ＆gt; JavaScript（Babel）。

Answer 7

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

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

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

7 个答案: