Gibt es einen JSX-Formatierer für erhabenen Text?

Question

Ich verwende Sublime Text als Texteditor.

Es gibt ein JsFormat zum Formatieren von Javascript-Dateien, aber ich kann keinen für JSX finden.

Wie Sie mit JSX Formatierung umgehen?

Answer 1

aktualisieren 4

prüfen prettier, das nicht als esformatter konfigurierbar, aber zur Zeit verwendet, um einige große Projekte zu formatieren (like React itself)

aktualisieren 3

prüfen sublime jsfmt. Wenn Sie zur Konfiguration hinzufügen und das Paket im forlder for sublime-jsfmt installieren. Sie können JSX-Dateien direkt von Sublime aus formatieren. Here is a guide for that

Update 2

von der Befehlszeile Sie auch esbeautifier verwenden können. Es ist ein Wrapper um esformatter, die eine Liste von Klackse akzeptieren zu forma

# install the dependencies globally 
npm i -g esbeautifier 

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

aktualisieren

Also ich für esformatter tun ein Plugin beendet, um die Formatierung von JSX Dateien zu aktivieren:

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

Hier ist ein live demo on requirebin

Es sollte irgendwie machbar sein, esformatter von Sublime aufzurufen und die aktuelle Datei als Argument zu übergeben. Auf jeden Fall ist es von der Befehlszeile verwenden Sie diese Anweisungen befolgen können:

in der Befehlszeile kann wie folgt verwendet werden:

# 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 

==== alte Antwort unten ===

Also, wenn, was Sie suchen gerade Ihre jsx Dateien machen formatiert werden, während man die jsx Syntax (im Grunde alle die JavaScript-Syntax verschönern und jsx Tags zu ignorieren, sie bedeutet, lassen wie es ist), das ist, was ich m tun mit 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); 
}); 

Ich würde eigentlich gerne, dass esformatter eine Version von Rocambole verwenden, die esprima-fb anstelle von esprima verwenden, um proxyquire zu vermeiden.

Answer 2

Es gibt eine Einstellung im HTML-CSS-JS Prettify-Plugin, mit der Sie die XML-Syntax in der js/jsx-Datei ignorieren können. Auf diese Weise wird der jsx-Code nicht durcheinander gebracht. Die Einstellung ist: "e4x": true im „js“ Abschnitt der Einstellungsdatei

Einstellungen> Paketeinstellungen> HTML \ CSS \ JS Prettify> Set Prettify Einstellungen

Dies funktioniert nicht gut, wenn Sie sich selbst schließenden Tags haben z.B. Tags enden in />

Answer 3

Nicht speziell für Sublime Text, aber es gibt einen Beautifier in JavaScript für React JSX.

http://prettydiff.com/?m=beautify Ansprüche JSX zur Unterstützung bei: http://prettydiff.com/guide/react_jsx.xhtml

Answer 4

hinzuzufügen, was @Shoobah sagte:

Es gibt eine Einstellung in der HTML-CSS-JS Prettify-Plugin, das Sie zu ignorieren erlaubt XML-Syntax in der js/jsx-Datei. Auf diese Weise wird der jsx-Code nicht durcheinander gebracht. Die Einstellung ist: "e4x": true im "js" Abschnitt der Einstellungsdatei

Gehen Sie zu: Einstellungen> Paketeinstellungen> HTML \ CSS \ JS Prettify> Set Prettify Einstellungen

Go Abschnitt „js“:

hinzufügen „jsx“ zum „allowed_file_extension“, und ändern Sie dann „ex4“ auf „true“

Answer 5

die Antwort im Internet, die immer gesagt, Sie setzen ‚e4x‘ zu richtig, aber manchmal haben wir Option 'format_on_save_extensions' add 'jsx' in Array

ändern jsFormat.sublime-Einstellungen

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

Answer 6

Mit Sublime-Package Installer dann setzen, installieren Babel. Dann:

1. Öffnen Sie eine .jsx-Datei.
2. Wählen Sie Ansicht aus dem Menü,
3. Dann Syntax -> Öffnen Sie alle mit der aktuellen Erweiterung als ... -> Babel -> JavaScript (Babel).

Answer 7

Sie können ein JsPrettier Paket für Sublime 2 & 3. Es sind installieren ein ziemlich neuen JavaScript-Formatierer (zum Zeitpunkt des Schreibens dieser: Feb-2017). Es unterstützt die meisten der neuesten Entwicklungen wie: ES2017, JSX und Flow.

Kurz

1. hübschere installieren global Terminal: $ npm install -g prettier
2. In Sublime gehen Sie auf Extras -> Befehlspalette ... -> Paketkontrolle: Paket installieren, geben Sie das Wort JsPrettier, dann wählen sie Beende die Installation.
3. Format Dateien Kontextmenü im Editor benutzen oder an eine Tastenkombination binden: { "keys": ["super+b"], "command": "js_prettier" }

Links:

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