reactjs - react - ¿Hay un formateador JSX para texto sublime?

sublime react emmet

Question

Estoy usando Sublime Text como editor de texto.

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

¿Cómo manejan ustedes el formato de JSX?

Answer 1

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": true en 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 />

Answer 2

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

http://prettydiff.com/?m=beautify reclamaciones para admitir JSX en: http://prettydiff.com/guide/react_jsx.xhtml

Answer 3

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 "allow_file_extension" y luego cambie "e4x" a "true"

Answer 4

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 prettier globalmente usando la terminal: $ npm install -g prettier
2. En Sublime, vaya a Herramientas -> Paleta de comandos ... -> Control de paquete: Instalar paquete, escriba la palabra JsPrettier, luego selecciónelo para completar la instalación.
3. Formatee su archivo usando el menú contextual dentro del editor o enlácelo a un atajo de teclado: { "keys": ["super+b"], "command": "js_prettier" }

Enlaces:

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

Answer 5

Usando el Instalador de paquetes de Sublime, instale Babel . Entonces:

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).

Answer 6

la respuesta en Internet que siempre te decía que configuraras ''e4x'' en verdadero, pero a veces, tenemos que configurar 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"]
}

Answer 7

Actualización 4

Marque prettier , no tan configurable como formateador, 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 comandos también puede usar esbeautifier . Es un envoltorio alrededor de esformatter que acepta una lista de globos 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:

esformatter-jsx

Aquí hay una demostración en vivo de requirebin

Debería ser de alguna manera factible llamar a esformatter desde Sublime pasando el archivo actual como argumento. En cualquier caso, para usarlo desde la línea de comandos, puede 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 simplemente formatear sus archivos jsx mientras permite la sintaxis jsx (básicamente embellecer toda la sintaxis javascript e ignorar las etiquetas jsx , es decir, dejarlas como están), esto es lo que estoy haciendo usando 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);
});

En realidad, me gustaría que el esformatter use una versión de rocambole que use esprima-fb en lugar de esprima, para evitar la necesidad de proxyquire.