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

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

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

你们如何处理格式化JSX?

fin asked 2019-09-08T14:39:45Z
7个解决方案
58 votes

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

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

如果您有自动关闭标签,这不会很好。 标签以/>结尾

Shoobah answered 2019-09-08T14:42:15Z
53 votes

更新4

检查更漂亮,不是可配置为esformatter,但目前用于格式化一些大项目(如React本身)

更新3

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

我真的希望esformatter使用一种使用esprima-fb而不是esprima的rocambole版本,以避免代理问题。

roy riojas answered 2019-09-08T14:41:29Z
19 votes

你可以为Sublime 2和3安装一个JsPrettier包。它是一个相当新的JavaScript格式化程序(在撰写本文时:2017年2月)。 它支持大多数最新的开发,如:ES2017,JSX和Flow。

快速开始

  1. 使用终端全球安装更漂亮:{ "keys": ["super+b"], "command": "js_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 answered 2019-09-08T14:43:33Z
18 votes

添加@Shoobah所说的内容:

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

转到:首选项>包设置> HTML \ CSS \ JS Prettify> Set   优化偏好

转到“js”部分:

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

brownmamba answered 2019-09-08T14:44:43Z
15 votes

互联网上的答案总是告诉你将'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 answered 2019-09-08T14:45:24Z
3 votes

使用Sublime的软件包安装程序,安装Babel。 然后:

  1. 打开.jsx文件。
  2. 从菜单中选择查看,
  3. 然后语法 - >打开所有当前扩展名为... - > Babel - > JavaScript(Babel)。
Alan P. answered 2019-09-08T14:46:10Z
1 votes

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

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

Austin Cheney answered 2019-09-08T14:46:46Z
translate from https://stackoverflow.com:/questions/27558699/is-there-a-jsx-formatter-for-sublime-text