¿Existe un formateador JSX para texto sublime?

Estoy usando Sublime Text como editor de texto.

Hay un jsFormat para formatear archivos javascript pero no puedo encontrar uno para JSX.

¿Cómo lidian con el formateo de JSX?

Actualización 4

Verifique más bonito , no tan configurable como esformatter, pero actualmente se usa para formatear algunos proyectos grandes ( como React )

Actualización 3

Compruebe sublime jsfmt . Si agrega esformatter-jsx a la configuración e instala el paquete dentro del forlder para sublime-jsfmt. Podrá formatear archivos JSX directamente desde Sublime. Aquí hay una guía para eso

Actualización 2

desde la línea de comando también puede usar esbeautifier . Es un contenedor alrededor de un formateador que acepta una lista de elementos globales para formatear

# install the dependencies globally
npm i -g esbeautifier

# beautify the files under src/ and specs/ both .js and .jsx
esbeautifier src/**/*.js* specs/**/*.js*

Actualizar

Así que terminé haciendo un complemento para esformatter para habilitar el formateo de archivos JSX:

https://www.npmjs.com/package/esformatter-jsx

Aquí hay una demostración en vivo de requirebin

De alguna manera debería ser factible llamar a esformatter desde Sublime pasando el archivo actual como argumento. En cualquier caso para usarlo desde la línea de comandos puedes seguir estas instrucciones:

Desde la línea de comando se puede usar así:

# 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

==== respuesta anterior a continuación ===

Entonces, si lo que está buscando es solo hacer que sus archivos jsx sean formateados mientras permite la jsxsintaxis (básicamente embellecer toda la sintaxis de JavaScript e ignorar las jsxetiquetas, es decir, déjelas como están), esto es lo que estoy haciendo usandoesformatter

// 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);
});

De hecho, me gustaría que el esformatter usara una versión de rocambole que usa esprima-fb en lugar de esprima, para evitar proxyquire.

Hay una configuración en el complemento HTML-CSS-JS Prettify que le permite ignorar la sintaxis xml en el archivo js / jsx. De esa manera, no estropea el código jsx. La configuración es: "e4x": trueen la sección "js" del archivo de configuración

Preferencias> Configuración del paquete> HTML \ CSS \ JS Prettify> Establecer preferencias de Prettify

Esto no funciona bien si tiene etiquetas de cierre automático, por ejemplo. etiquetas que terminan en />

Puede instalar un paquete JsPrettier para Sublime 2 y 3. Es un formateador de JavaScript bastante nuevo (en el momento de escribir esto: febrero de 2017). Es compatible con la mayoría de los últimos desarrollos como: ES2017, JSX y Flow.

Inicio rápido

1. Instale más bonito globalmente usando la terminal: $ npm install -g prettier
2. En Sublime, vaya a Tools -> Command Palette ... -> Package Control: Install Package, escriba la palabra JsPrettier, luego selecciónela para completar la instalación.
3. Formatee su archivo usando el menú contextual dentro del editor o vincúlelo a un atajo de teclado: { "keys": ["super+b"], "command": "js_prettier" }

Enlaces:

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

Para agregar a lo que dijo @Shoobah:

Hay una configuración en el complemento HTML-CSS-JS Prettify que le permite ignorar la sintaxis xml en el archivo js / jsx. De esa manera, no estropea el código jsx. La configuración es: "e4x": verdadero en la sección "js" del archivo de configuración

Vaya a: Preferencias> Configuración del paquete> HTML \ CSS \ JS Prettify> Establecer preferencias de Prettify

Vaya a la sección "js":

Agregue "jsx" a "allowed_file_extension" y luego cambie "e4x" a "true"

la respuesta en Internet que siempre le dijo que estableciera 'e4x' en verdadero, pero a veces, tenemos que establecer la opción de 'format_on_save_extensions' y luego agregar 'jsx' en la matriz

modificar jsFormat.sublime-settings

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

Con el instalador de paquetes de Sublime, instale Babel . Luego:

1. Abra un archivo .jsx.
2. Seleccione Ver en el menú,
3. Luego Sintaxis -> Abrir todo con la extensión actual como ... -> Babel -> JavaScript (Babel).

No específicamente para Sublime Text, pero hay un embellecedor en JavaScript para React JSX.

http://prettydiff.com/?m=beautify afirma que admite JSX en: http://prettydiff.com/guide/react_jsx.xhtml