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

91

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?

Flosse
quelle
Ja, suchen Sie nach dem jsx textmate-Bundle, das mit so ziemlich jedem Editor verwendet werden kann.
Brigand
Es scheint nur ein Syntax-Hightlighter zu sein. Ich suche nach dem Formatierer, der die gleichen Dinge identifiziert
fin
2
Ich kenne keinen. Die reaktionsfähige Google-Gruppe wäre ein besserer Ort, um zu fragen.
Brigand
kann auch keine gute Lösung finden. Derzeit ist es möglich, die Quelle mit esprima-fb zu analysieren und escodegen-jsx zu verwenden, um formatierte Ausgaben zu generieren. Die Formatierungsoptionen sind begrenzt und Sie verlieren weiße Linien. Außerdem ist escodegen-jsx eine Abzweigung ohne Problemverfolgung. Sie sind sich nicht sicher, ob sie aktiv beibehalten wird. Ich frage mich, wie fb mit ihrer jsx-Codebasis umgeht.
user1600124
Die Beta-Version von Esformatter scheint in der Lage zu sein, JSX zu formatieren, da esprima-fb verwendet, aber noch nicht produktionsbereit ist
fin

Antworten:

60

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.

Roy Riojas
quelle
1
Dies funktionierte nur mit esformatter-jsx-ignore für mich, aber das ist gut genug. Vielen Dank!
Jasper
Ich benutze esformatter-jsx und es funktioniert wie erwartet. Ich musste jedoch auch "esformatter-jsx" zu "options" hinzufügen: {"plugins": {"esformatter-jsx"}} unter "Einstellungen> Paketeinstellungen> Sublime JSFMT> Einstellungen - Standard" in Sublime 3, um dies zu erreichen funktioniert
Kuma
Dies ist eine großartige Antwort. Ich habe dieses verwendete Tool bereits seit einiger Zeit, aber wir haben auf die Verwendung von es6 / es7 mit babel umgestellt und es funktioniert nicht mehr.
1
Überprüfen Sie Ihre erhabene Konsole, in Mac, um die Konsole zu öffnen, drücken Sie Strg + `Sie können ein Ticket auf esformatter-jsx repo oder in JSFMT repo mit dem Fehler öffnen, den Sie in der Konsole sehen
roy riojas
2
hübscher macht den Job für mich. sublime Plugin hier github.com/jonlabelle/SublimeJsPrettier und es hat auch eslint Unterstützung github.com/prettier/prettier#eslint . Ich bin froh, dass diese Frage nach fast 3 Jahren endlich angenommen wird.
Fin
57

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

Shoobah
quelle
1
Dies funktioniert immer noch sehr gut mit den neuesten Versionen von babel-sublime und HTML-CSS-JS Prettify. Stellen Sie einfach sicher, dass Sie "allowsfile_extensions" um "jsx" oder eine beliebige Dateierweiterung erweitern.
Verdammt
Ist diese Antwort veraltet? Es ist nicht />in meinem Code, aber es funktioniert immer noch nicht
Andy Darwin
2
hübscher (alias jsprettier) für erhaben ist bei weitem das beste !! Siehe die Antwort unten: stackoverflow.com/a/42169688/2178112
majorBummer
20

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:

Eugene Kulabuhov
quelle
1
Dies ist jetzt bei weitem die beste Antwort! schöner ist da bombe!
MajorBummer
1
Ja, das hat auch bei mir perfekt funktioniert. Das Wichtigste ist der "globale" Teil.
Ionut Necula
19

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

Brownmamba
quelle
16

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"]
}
Monochrom Yeh
quelle
Ich habe getan, wie von Ihnen gesagt, aber es hat bei mir nicht funktioniert. :(
Yash Vekaria
Wo befindet sich "jsFormat.sublime-settings" ? damit ich ändern kann "format_on_save_extensions": ["js", "json", "jsx"]. Das nächste, was ich über Dateierweiterungen finde, ist:"js": { "allowed_file_extensions": ["js", "json",...]
Chris22
Sie finden es hier: Einstellungen> Paketeinstellungen> jsFormat> Einstellungen - Benutzer. Hat bei mir aber nicht funktioniert, rückt JSX immer noch komisch ein :(
Niclas
Habe nach einer Lösung gesucht und diese hat mein Problem gelöst, danke!
Al-Maamari Tareq
4

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).
Alan P.
quelle
Es gibt auch ein JSX-Sprachpaket, das verwendet werden kann
TabsNotSpaces