Olağanüstü metin için JSX formatlayıcı var mı?

Sublime Text'i metin düzenleyici olarak kullanıyorum.

Javascript dosyalarını biçimlendirmek için bir jsFormat var, ancak JSX için bir tane bulamıyorum.

JSX biçimlendirmeyle nasıl başa çıkıyorsunuz?

Güncelleme 4

Daha güzel kontrol edin , eskformatter olarak yapılandırılamaz, ancak şu anda bazı büyük projeleri (React'in kendisi gibi ) biçimlendirmek için kullanılır

Güncelleme 3

Sublime jsfmt'yi kontrol edin . Yapılandırmaya esformatter-jsx eklerseniz ve paketi sublime-jsfmt için forlder içine yüklerseniz. JSX dosyalarını doğrudan Sublime'dan biçimlendirebileceksiniz. İşte bunun için bir rehber

Güncelleme 2

komut satırından esbeautifier'ı da kullanabilirsiniz . Biçimlendirilecek globların bir listesini kabul eden esformatter etrafında bir sarmalayıcıdır

# install the dependencies globally
npm i -g esbeautifier

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

Güncelleme

Bu yüzden , JSX dosyalarının biçimlendirmesini etkinleştirmek için esformatter için bir eklenti yaptım:

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

İşte olan requirebin canlı demo

Sublime'dan esformatter'ı mevcut dosyayı argüman olarak geçirerek çağırmak bir şekilde uygulanabilir olmalıdır . Her durumda komut satırından kullanmak için aşağıdaki talimatları uygulayabilirsiniz:

Komut satırından şu şekilde kullanılabilir:

# 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

==== aşağıdaki eski cevap ===

Yani aradığınız şey jsx dosyalarınızın jsxsözdizimine izin verirken biçimlendirilmesini sağlamaksa (temelde tüm javascript sözdizimini güzelleştirin ve jsxetiketleri yok sayın , yani onları olduğu gibi bırakın), bunu kullanarak yaptığım şey budur.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);
});

Aslında esformatter'ın proxyquire'ı önlemek için esprima yerine esprima-fb kullanan bir rocambole sürümü kullanmasını istiyorum.

HTML-CSS-JS Prettify eklentisinde, js / jsx dosyasında xml sözdizimini göz ardı etmenize izin veren bir ayar vardır. Bu şekilde jsx kodunu bozmaz. Ayar şu "e4x": trueşekildedir : ayarlar dosyasının "js" bölümünde

Tercihler> Paket Ayarları> HTML \ CSS \ JS Prettify> Prettify Tercihlerini Ayarla

Kendi kendine kapanan etiketleriniz varsa, bu pek iyi çalışmaz. /> ile biten etiketler

Sublime 2 & 3 için bir JsPrettier paketi kurabilirsiniz. Oldukça yeni bir JavaScript formatlayıcıdır (bunu yazarken: Şubat-2017). ES2017, JSX ve Flow gibi en son gelişmelerin çoğunu destekler.

Hızlı başlangıç

1. Terminali kullanarak global olarak daha güzel yükleyin: $ npm install -g prettier
2. Sublime'da Tools -> Command Palette ... -> Package Control: Install Package'a gidin, JsPrettier kelimesini yazın, ardından kurulumu tamamlamak için seçin.
3. Düzenleyicinin içindeki bağlam menüsünü kullanarak dosyanızı biçimlendirin veya bir klavye kısayoluna bağlayın: { "keys": ["super+b"], "command": "js_prettier" }

Bağlantılar:

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

@Shoobah'ın söylediklerine eklemek için:

HTML-CSS-JS Prettify eklentisinde, js / jsx dosyasında xml sözdizimini yok saymanıza izin veren bir ayar vardır. Bu şekilde jsx kodunu bozmaz. Ayar şu şekildedir: "e4x": ayarlar dosyasının "js" bölümünde true

Şuraya gidin: Tercihler> Paket Ayarları> HTML \ CSS \ JS Prettify> Prettify Tercihlerini Ayarla

"Js" bölümüne gidin:

"Allow_file_extension" a "jsx" ekleyin ve ardından "e4x" i "true" olarak değiştirin

İnternette her zaman 'e4x'i doğru olarak ayarlamanızı söyleyen cevap, ancak bazen' format_on_save_extensions 'seçeneğini belirlememiz ve ardından diziye' jsx 'eklememiz gerekir

jsFormat.sublime-ayarlarını değiştir

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

Sublime en Paket Yükleyici kullanarak yüklemek Babel . Sonra:

1. Bir .jsx dosyası açın.
2. Menüden Görüntüle'yi seçin,
3. Sonra Sözdizimi -> Geçerli uzantı ile tümünü aç ... -> Babel -> JavaScript (Babel).

Sublime Text için özel olarak değil, ancak JavaScript'te React JSX için bir güzelleştirici var.

http://prettydiff.com/?m=beautify JSX'i desteklediğini iddia ediyor: http://prettydiff.com/guide/react_jsx.xhtml