¿Existe un formateador JSX para texto sublime?

91

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?

aleta
fuente
Sí, busque el paquete jsx textmate que se puede usar con prácticamente cualquier editor.
Brigand
parece solo un resaltador de sintaxis, estoy buscando el formateador que identifique y tipo de cosas
fin
2
No conozco ninguno. El grupo react google sería un mejor lugar para preguntar.
Brigand
tampoco puedo encontrar una buena solución. Actualmente es posible analizar la fuente con esprima-fb y usar escodegen-jsx para generar una salida formateada. Las opciones de formato son limitadas y pierde líneas blancas ... además, escodegen-jsx es una bifurcación sin seguimiento de problemas ... no estoy seguro de si se mantendrá activamente. Me pregunto cómo se ocupa fb con su código base jsx.
user1600124
la versión beta de esformatter parece tener alguna capacidad de formatear JSX porque está usando esprima-fb, pero aún no está lista para producción todavía
fin

Respuestas:

60

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.

roy riojas
fuente
1
Esto solo funcionó con esformatter-jsx-ignore para mí, pero eso es lo suficientemente bueno. ¡Gracias!
Jasper
Estoy usando esformatter-jsx y funciona como esperaba. Sin embargo, también tuve que agregar "esformatter-jsx" a "opciones": {"plugins": {"esformatter-jsx"}} en "Preferencias> Configuración del paquete> Sublime JSFMT> Configuración - Predeterminado" en Sublime 3 para hacerlo trabaja
Kuma
Esta es una gran respuesta, tengo esta herramienta utilizada por un tiempo, pero hemos cambiado a usar es6 / es7 con babel y ya no funciona.
1
verifique su consola sublime, en mac para abrir la consola presione ctrl + `puede abrir un ticket en el repositorio esformatter-jsx o en el repositorio JSFMT con el error que está viendo en la consola
roy riojas
2
más bonita hace el trabajo por mí. complemento sublime aquí github.com/jonlabelle/SublimeJsPrettier y también tiene soporte eslint github.com/prettier/prettier#eslint . Me alegro de que esta pregunta sea finalmente aceptada después de casi 3 años.
fin
57

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 />

Shoobah
fuente
1
Esto todavía funciona muy bien con las últimas versiones de babel-sublime y HTML-CSS-JS Prettify. Solo asegúrese de agregar "jsx" o cualquier extensión de archivo que use a "allowed_file_extensions".
maldito
¿Esta respuesta está desactualizada? No hay />en mi código, pero todavía no funciona
Andy Darwin
2
más bonito (también conocido como jsprettier) para sublime es, con mucho, el mejor !! Vea la respuesta a continuación: stackoverflow.com/a/42169688/2178112
majorBummer
20

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:

Eugene Kulabuhov
fuente
1
¡Esta es, con mucho, la mejor respuesta ahora! más bonita es la bomba!
majorBummer
1
Sí, de hecho, esto también funcionó perfecto para mí. Lo más importante a tener en cuenta es la parte "global".
Ionut Necula
19

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"

brownmamba
fuente
16

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"]
}
Monocromo Yeh
fuente
Hice lo que me dijiste, pero no funcionó para mí. :(
Yash Vekaria
¿Dónde se encuentra "jsFormat.sublime-settings" ? para que pueda modificar "format_on_save_extensions": ["js", "json", "jsx"]. Lo más cercano que encuentro sobre las extensiones de archivo es:"js": { "allowed_file_extensions": ["js", "json",...]
Chris22
Puede encontrarlo aquí: Preferencias> Configuración del paquete> jsFormat> Configuración - Usuario. Sin embargo, no funcionó para mí, todavía sangra JSX de manera extraña :(
Niclas
He estado buscando una solución y esta resolvió mi problema, ¡gracias!
Al-Maamari Tareq
4

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).
Alan P.
fuente
También hay un paquete de idioma JSX que se puede usar
TabsNotSpaces