Esiste un formattatore JSX per il testo sublime?

Sto usando Sublime Text come editor di testo.

C'è un jsFormat per la formattazione dei file javascript ma non riesco a trovarne uno per JSX.

Come affrontate la formattazione di JSX?

Aggiorna 4

Controlla più carino, non configurabile come esformatter, ma attualmente utilizzato per formattare alcuni grandi progetti ( come lo stesso React )

Aggiorna 3

Controlla il sublime jsfmt . Se aggiungi esformatter-jsx alla configurazione e installi il pacchetto all'interno del forlder per sublime-jsfmt. Sarai in grado di formattare i file JSX direttamente da Sublime. Ecco una guida per questo

Aggiorna 2

dalla riga di comando puoi anche usare esbeautifier . È un wrapper attorno a esformatter che accetta un elenco di glob da formattare

# install the dependencies globally
npm i -g esbeautifier

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

Aggiornare

Quindi ho finito per creare un plugin per esformatter per abilitare la formattazione dei file JSX:

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

Ecco una demo live su requirebin

Dovrebbe essere in qualche modo possibile chiamare esformatter da Sublime passando il file corrente come argomento. In ogni caso per utilizzarlo da riga di comando puoi seguire queste istruzioni:

Dalla riga di comando può essere utilizzato in questo modo:

# 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

==== vecchia risposta sotto ===

Quindi, se quello che stai cercando è solo per fare in modo che i tuoi file jsx vengano formattati consentendo la jsxsintassi (fondamentalmente abbellisci tutta la sintassi javascript e ignora i jsxtag, il che significa lasciarli così com'è), questo è quello che sto facendo 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);
});

In realtà vorrei che esformatter usasse una versione di rocambole che usi esprima-fb invece di esprima, per evitare proxyquire.

C'è un'impostazione nel plug-in HTML-CSS-JS Prettify che ti consente di ignorare la sintassi xml nel file js / jsx. In questo modo non rovina il codice jsx. L'impostazione è: "e4x": truenella sezione "js" del file delle impostazioni

Preferenze> Impostazioni pacchetto> HTML \ CSS \ JS Prettify> Imposta preferenze Prettify

Questo non funziona bene se hai tag a chiusura automatica, ad es. tag che terminano con />

Puoi installare un pacchetto JsPrettier per Sublime 2 e 3. È un formattatore JavaScript abbastanza nuovo (al momento della stesura di questo articolo: febbraio 2017). Supporta la maggior parte degli ultimi sviluppi come: ES2017, JSX e Flow.

Avvio rapido

1. Installa più carino a livello globale usando il terminale: $ npm install -g prettier
2. In Sublime vai su Strumenti -> Tavolozza dei comandi ... -> Controllo pacchetto: Installa pacchetto, digita la parola JsPrettier, quindi selezionala per completare l'installazione.
3. Formatta il tuo file usando il menu contestuale all'interno dell'editor o collegalo a una scorciatoia da tastiera: { "keys": ["super+b"], "command": "js_prettier" }

Collegamenti:

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

Per aggiungere a ciò che ha detto @Shoobah:

C'è un'impostazione nel plug-in HTML-CSS-JS Prettify che ti consente di ignorare la sintassi xml nel file js / jsx. In questo modo non rovina il codice jsx. L'impostazione è: "e4x": true nella sezione "js" del file delle impostazioni

Vai a: Preferenze> Impostazioni pacchetto> HTML \ CSS \ JS Prettify> Imposta preferenze Prettify

Vai alla sezione "js":

Aggiungi "jsx" a "allowed_file_extension", quindi cambia "e4x" in "true"

la risposta su Internet che ti diceva sempre di impostare "e4x" su true, ma a volte dobbiamo impostare l'opzione di "format_on_save_extensions" quindi aggiungere "jsx" nell'array

modificare jsFormat.sublime-settings

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

Utilizzando il programma di installazione dei pacchetti di Sublime, installa Babel . Poi:

1. Apri un file .jsx.
2. Seleziona Visualizza dal menu,
3. Quindi Sintassi -> Apri tutto con l'estensione corrente come ... -> Babel -> JavaScript (Babel).

Non specificamente per Sublime Text, ma c'è un abbellimento in JavaScript per React JSX.

http://prettydiff.com/?m=beautify afferma di supportare JSX su: http://prettydiff.com/guide/react_jsx.xhtml