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?
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 stroniePowinno 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.
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 / >
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"
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
- Instalacja ładniejsza globalnie przy użyciu terminala:
$ npm install -g prettier
- w Sublime przejdź do palety Tools - >Command... - >Kontrola pakietu: zainstaluj pakiet, wpisz słowo JsPrettier, a następnie wybierz go, aby zakończyć instalację.
- 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:
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"]
}
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:
- Otwórz a .plik jsx.
- Wybierz widok z menu,
- Następnie składnia - > Otwórz wszystkie z bieżącym rozszerzeniem jako... - >Babel - > JavaScript (Babel).
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
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