Czy jest formater JSX dla sublime text?

Używam Sublime Text jako edytora tekstu.

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

Jak radzicie sobie z formatowaniem JSX?

Author: Kaloyan Kosev, 2014-12-19

7 answers

Update 4

Sprawdź ładniejszy , nie tak konfigurowalny jak esformatter, ale obecnie używany do formatowania niektórych dużych projektów (jak sam React )

Update 3

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

Aktualizacja 2

Z linii poleceń można również użyć esbeautifier. Jest to owijarka wokół esformatter , które akceptują listę Globów do formatu

# install the dependencies globally
npm i -g esbeautifier

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

Update

Więc skończyłem robi plugin dla esformatter aby włączyć formatowanie plików JSX:

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

Na stronie znajdziesz informacje o plikach cookies.]}

Powinno być jakoś możliwe wywołanie esformatter z sublime przekazującego bieżący plik jako argument. W każdym przypadku, aby użyć go z linii poleceń, możesz wykonać następujące instrukcje:

Z linii 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 pliki jsx zostały sformatowane, jednocześnie zezwalając na składnię jsx (w zasadzie upiększyć całą składnię javascript i zignorować tagi jsx, co oznacza zostawić je tak, jak jest), to jest to, co Używam 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);
});

Chciałbym, aby esformatter używać wersji rocambole, które używają esprima-fb zamiast esprima, aby uniknąć proxyquire.

 51
Author: roy riojas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-26 16:35:40

Istnieje ustawienie w wtyczce HTML-CSS-JS Prettify, które pozwala ignorować składnię xml w pliku js / jsx. W ten sposób nie zepsuje kodu jsx. Ustawienie to: "e4x": true w sekcji " js " pliku ustawień

Preferences > Package Settings > HTML\CSS\JS Prettify > Set Prettify Preferences

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

 58
Author: Shoobah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-24 12:25:20

Aby dodać do tego co powiedział @ Shoobah:

W wtyczce HTML-CSS-JS jest ustawienie, które pozwala na ignorowanie składni xml w pliku js/jsx. W ten sposób nie będzie bałaganu kod jsx. Ustawienie to:" e4x": true w sekcji "js" plik ustawień

Przejdź do: Preferencje > Ustawienia pakietu > HTML\CSS\JS > Ustaw Pretify Preferences

Przejdź do sekcji "js":

Dodaj "jsx" do "allowed_file_extension", a następnie Zmień " ex4 "na"true"

 18
Author: brownmamba,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-07 18:01:15

Możesz zainstalować pakiet JsPrettier dla Sublime 2 i 3. Jest to dość nowy format JavaScript (w momencie pisania tego: Luty-2017). Obsługuje większość najnowszych rozwiązań, takich jak: ES2017, JSX i Flow.

Quickstart

  1. Instalacja ładniejsza globalnie przy użyciu terminala: $ npm install -g prettier
  2. w Sublime przejdź do palety Tools - >Command... - >Kontrola pakietu: zainstaluj pakiet, wpisz słowo JsPrettier, a następnie wybierz go, aby zakończyć instalację.
  3. sformatuj swój plik użycie menu kontekstowego wewnątrz edytora lub powiązanie go ze skrótem klawiszowym: { "keys": ["super+b"], "command": "js_prettier" }

Linki:

 17
Author: Eugene Kulabuhov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-19 07:58:09

Odpowiedź w Internecie, która zawsze mówiła, że ustawiłeś' e4x ' na true, ale czasami musimy ustawić opcję 'format_on_save_extensions', a następnie dodać' jsx ' w tablicy

Zmodyfikuj jsFormat.sublime-settings

{
  "e4x": true,
  "format_on_save": true,
  "format_on_save_extensions": ["js", "json", "jsx"]
}
 15
Author: Monochrome Yeh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-04 11:49:04

Używając Instalatora pakietu Sublime, zainstaluj Babel . Wtedy:

  1. Otwórz a .plik jsx.
  2. Wybierz widok z menu,
  3. Następnie składnia - > Otwórz wszystkie z bieżącym rozszerzeniem jako... - >Babel - > JavaScript (Babel).
 3
Author: Alan P.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-20 06:56:17

NIE specjalnie dla Sublime Text, ale w JavaScript jest beautifier dla Reacta JSX.

Http://prettydiff.com/?m=beautify twierdzi, że wspiera JSX w: http://prettydiff.com/guide/react_jsx.xhtml

 1
Author: Austin Cheney,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-16 20:47:10