Czy istnieje program do formatowania JSX dla wysublimowanego tekstu?

Używam Sublime Text jako edytora tekstu.

Istnieje jsFormat do formatowania plików javascript, ale nie mogę go znaleźć dla JSX.

Jak radzicie sobie z formatowaniem JSX?

Zaktualizuj 4

Sprawdź ładniejsze , nie konfigurowalne jako esformatter, ale obecnie używane do formatowania niektórych dużych projektów ( takich jak sam React )

Zaktualizuj 3

Sprawdź Sublime jsfmt . Jeśli dodasz esformatter-jsx do config i zainstalujesz pakiet wewnątrz forlder dla sublime-jsfmt. Będziesz mógł formatować pliki JSX bezpośrednio z Sublime. Oto przewodnik po tym

Zaktualizuj 2

z linii poleceń możesz także użyć esbeautifier . Jest to opakowanie otaczające esformatter, które akceptuje listę globów do sformatowania

# install the dependencies globally
npm i -g esbeautifier

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

Aktualizacja

Skończyło się na stworzeniu wtyczki do esformatter, która umożliwia formatowanie plików JSX:

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

Oto demo na żywo na requirebin

Powinno być w jakiś sposób wykonalne wywołanie esformatter z Sublime, przekazując bieżący plik jako argument. W każdym przypadku, aby użyć go z wiersza poleceń, postępuj zgodnie z następującymi instrukcjami:

Z wiersza poleceń można go użyć w następujący sposób:

# 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

==== stara odpowiedź poniżej ===

Więc jeśli szukasz tylko po to, aby sformatować pliki jsx, jednocześnie zezwalając na jsxskładnię (w zasadzie upiększ całą składnię javascript i zignoruj jsxtagi, co oznacza pozostawienie ich bez zmian ), to właśnie robię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);
});

Właściwie chciałbym, aby esformatter używał wersji rocambole, która używa esprima-fb zamiast esprima, aby uniknąć proxyquire.

We wtyczce HTML-CSS-JS Prettify istnieje ustawienie, które pozwala zignorować składnię XML w pliku js / jsx. W ten sposób nie psuje kodu jsx. Ustawienie to: "e4x": truew sekcji „js” pliku ustawień

Preferencje> Ustawienia pakietu> HTML \ CSS \ JS Prettify> Ustaw preferencje Prettify

Nie działa to dobrze, jeśli masz samozamykające się tagi, np. tagi kończące się na />

Możesz zainstalować pakiet JsPrettier dla Sublime 2 i 3. Jest to całkiem nowy program formatujący JavaScript (w chwili pisania tego: luty 2017). Obsługuje większość najnowszych osiągnięć, takich jak: ES2017, JSX i Flow.

Szybki start

1. Zainstaluj ładniej na całym świecie za pomocą terminala: $ npm install -g prettier
2. W Sublime przejdź do Narzędzia -> Paleta poleceń ... -> Kontrola pakietu: Zainstaluj pakiet, wpisz słowo JsPrettier, a następnie wybierz je, aby zakończyć instalację.
3. Sformatuj plik za pomocą menu kontekstowego w edytorze lub powiąż go ze skrótem klawiaturowym: { "keys": ["super+b"], "command": "js_prettier" }

Spinki do mankietów:

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

Aby dodać do tego, co powiedział @Shoobah:

We wtyczce HTML-CSS-JS Prettify istnieje ustawienie, które pozwala zignorować składnię XML w pliku js / jsx. W ten sposób nie psuje kodu jsx. Ustawienie to: „e4x”: true w sekcji „js” pliku ustawień

Przejdź do: Preferencje> Ustawienia pakietu> HTML \ CSS \ JS Prettify> Ustaw preferencje Prettify

Przejdź do sekcji „js”:

Dodaj „jsx” do „allowed_file_extension”, a następnie zmień „e4x” na „true”

odpowiedź w Internecie, która zawsze mówiła, że ​​ustawisz „e4x” na true, ale czasami musimy ustawić opcję „format_on_save_extensions”, a następnie dodać „jsx” do tablicy

zmodyfikuj jsFormat.sublime-settings

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

Korzystając z Instalatora pakietów Sublime, zainstaluj Babel . Następnie:

1. Otwórz plik .jsx.
2. Wybierz Widok z menu,
3. Następnie Składnia -> Otwórz wszystko z aktualnym rozszerzeniem jako ... -> Babel -> JavaScript (Babel).

Nie specjalnie dla Sublime Text, ale w JavaScript jest element upiększający dla React JSX.

http://prettydiff.com/?m=beautify twierdzi, że obsługuje JSX pod adresem : http://prettydiff.com/guide/react_jsx.xhtml