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

Ich verwende Sublime Text als Texteditor.

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

Wie geht ihr mit der Formatierung von JSX um?

Update 4

Überprüfen Sie hübscher , nicht so konfigurierbar als Esformatter, aber derzeit zum Formatieren einiger großer Projekte ( wie React selbst ).

Update 3

Überprüfen Sie sublime jsfmt . Wenn Sie der Konfiguration esformatter-jsx hinzufügen und das Paket im forlder für sublime-jsfmt installieren. Sie können JSX-Dateien direkt aus Sublime formatieren. Hier ist eine Anleitung dafür

Update 2

Über die Befehlszeile können Sie auch esbeautifier verwenden . Es ist ein Wrapper um esformatter , der eine Liste der zu formatierenden Globs akzeptiert

# 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 habe ich ein Plugin für esformatter erstellt , um die Formatierung von JSX-Dateien zu ermöglichen:

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

Hier ist eine Live-Demo auf requirebin

Es sollte irgendwie machbar sein, esformatter von Sublime aufzurufen und die aktuelle Datei als Argument zu übergeben. Um es über die Befehlszeile zu verwenden, können Sie die folgenden Anweisungen befolgen:

Über die Befehlszeile kann es folgendermaßen 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 ===

Wenn Sie also nur Ihre JSX-Dateien formatieren möchten, während Sie die jsxSyntax zulassen (verschönern Sie im Grunde die gesamte Javascript-Syntax und ignorieren Sie jsxTags, dh lassen Sie sie unverändert ), verwende ich diese Funktionesformatter

// 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 möchte eigentlich, dass esformatter eine Version von rocambole verwendet, die esprima-fb anstelle von esprima verwendet, um Proxyquire zu vermeiden.

Das HTML-CSS-JS Prettify-Plugin enthält eine Einstellung, mit der Sie die XML-Syntax in der Datei js / jsx ignorieren können. Auf diese Weise wird der jsx-Code nicht durcheinander gebracht. Die Einstellung ist: "e4x": trueim Abschnitt "js" der Einstellungsdatei

Einstellungen> Paketeinstellungen> HTML \ CSS \ JS Prettify> Prettify-Einstellungen festlegen

Dies funktioniert nicht gut, wenn Sie selbstschließende Tags haben, z. Tags, die auf /> enden

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

Schnellstart

1. Installieren Sie Prettier global mithilfe des Terminals: $ npm install -g prettier
2. Gehen Sie in Sublime zu Extras -> Befehlspalette ... -> Paketsteuerung: Paket installieren, geben Sie das Wort JsPrettier ein und wählen Sie es aus, um die Installation abzuschließen.
3. Formatieren Sie Ihre Datei über das Kontextmenü im Editor oder binden Sie sie an eine Tastenkombination: { "keys": ["super+b"], "command": "js_prettier" }

Links:

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

Um zu dem hinzuzufügen, was @Shoobah gesagt hat:

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

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

Gehen Sie zum Abschnitt "js":

Fügen Sie "jsx" zur "allow_file_extension" hinzu und ändern Sie "e4x" in "true".

Die Antwort im Internet, die Ihnen immer sagte, dass Sie 'e4x' auf true setzen, aber manchmal müssen wir die Option 'format_on_save_extensions' setzen und dann 'jsx' in das Array einfügen

Ändern Sie die Einstellungen von jsFormat.sublime

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

Installieren Sie Babel mit dem Paketinstallationsprogramm von Sublime . Dann:

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

Nicht speziell für Sublime Text, aber in JavaScript für React JSX gibt es eine Verschönerung.

http://prettydiff.com/?m=beautify behauptet, JSX zu unterstützen: http://prettydiff.com/guide/react_jsx.xhtml