是否有一个用于崇高文本的JSX格式器？

Question

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

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

你们如何处理格式化JSX？

Answer 1

更新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的包装接受水珠列表格式

# 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标签，意味着离开它们），这就是我' m使用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使用rocambole版本，使用esprima-fb而不是esprima来避免proxyquire。

Answer 2

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

首选项>套餐设置> HTML \ CSS \ JS美化>设置美化首

，如果你有自我结束标记这个工作不正常例如。以/>结尾的标签

Answer 3

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

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

Answer 4

要添加什么@Shoobah说：

有一个在HTML，CSS，JS美化插件的设置，允许你 忽略xs语法在js/jsx文件中。这样它就不会搞糟 的jsx代码。该设置是： “E4X”：真正的 设置的 “JS” 一节中的文件

转到：首选项>套件设置> HTML \ CSS \ JS美化>设置 美化首

围棋以“JS”部分：

添加“JSX”到“allowed_file_extension”，然后更改“EX4”为“true”

Answer 5

在总告诉你设置“E4X”到互联网的答案真， 但有时，我们要设置“format_on_save_extensions”的选项，然后添加“JSX”在阵列

修改jsFormat.sublime的设置

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

Answer 6

用崇高的软件包安装程序，安装Babel。然后：

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

Answer 7

你可以安装一个JsPrettier包崇高2 & 3.这是一个相当新的JavaScript格式化（在写这篇的时间：二月-2017）。它支持大多数最新的开发，如：ES2017，JSX和Flow。

快速入门

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

链接：

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