Apakah ada formatter JSX untuk teks luhur?

Saya menggunakan Sublime Text sebagai editor teks.

Ada jsFormat untuk memformat file javascript tetapi saya tidak dapat menemukannya untuk JSX.

Bagaimana kalian menangani pemformatan JSX?

Perbarui 4

Periksa lebih cantik , bukan yang dapat dikonfigurasi sebagai esformatter, tetapi saat ini digunakan untuk memformat beberapa proyek besar ( seperti React itu sendiri )

Perbarui 3

Periksa jsfmt luhur . Jika Anda menambahkan esformatter-jsx ke konfigurasi dan menginstal paket di dalam forlder untuk sublime-jsfmt. Anda dapat memformat file JSX langsung dari Sublime. Berikut adalah panduan untuk itu

Perbarui 2

dari baris perintah Anda juga dapat menggunakan esbeautifier . Ini adalah pembungkus di sekitar esformatter yang menerima daftar glob untuk diformat

# install the dependencies globally
npm i -g esbeautifier

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

Memperbarui

Jadi saya akhirnya melakukan plugin untuk esformatter untuk mengaktifkan pemformatan file JSX:

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

Berikut adalah demo langsung tentang persyaratan

Seharusnya mungkin untuk memanggil esformatter dari Sublime dengan meneruskan file saat ini sebagai argumen. Untuk menggunakannya dari baris perintah, Anda dapat mengikuti petunjuk ini:

Dari baris perintah dapat digunakan seperti ini:

# 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

==== jawaban lama di bawah ===

Jadi jika yang Anda cari hanyalah untuk membuat file jsx Anda diformat sambil mengizinkan jsxsintaks (pada dasarnya mempercantik semua sintaks javascript dan mengabaikan jsxtag, artinya biarkan saja apa adanya), inilah yang saya lakukan menggunakanesformatter

// 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);
});

Saya sebenarnya ingin esformatter itu menggunakan versi rocambole yang menggunakan esprima-fb daripada esprima, untuk menghindari proxyquire.

Ada pengaturan di plugin HTML-CSS-JS Prettify yang memungkinkan Anda untuk mengabaikan sintaks xml di file js / jsx. Dengan cara itu tidak mengacaukan kode jsx. Pengaturannya adalah: "e4x": truedi bagian "js" dari file pengaturan

Preferensi> Pengaturan Paket> HTML \ CSS \ JS Prettify> Setel Preferensi Prettify

Ini tidak bekerja dengan baik jika Anda memiliki tag penutup sendiri misalnya. tag yang diakhiri dengan />

Anda dapat menginstal paket JsPrettier untuk Sublime 2 & 3. Ini adalah pemformat JavaScript yang cukup baru (pada saat penulisan ini: Feb-2017). Ini mendukung sebagian besar perkembangan terbaru seperti: ES2017, JSX, dan Flow.

Mulai cepat

1. Instal lebih cantik secara global menggunakan terminal: $ npm install -g prettier
2. Di Sublime, buka Tools -> Command Palette ... -> Package Control: Install Package, ketik kata JsPrettier, lalu pilih untuk menyelesaikan instalasi.
3. Format file Anda menggunakan menu konteks di dalam editor atau ikat ke pintasan keyboard: { "keys": ["super+b"], "command": "js_prettier" }

Tautan:

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

Untuk menambah apa yang dikatakan @Shoobah:

Ada pengaturan di plugin HTML-CSS-JS Prettify yang memungkinkan Anda untuk mengabaikan sintaks xml di file js / jsx. Dengan cara itu tidak mengacaukan kode jsx. Pengaturannya adalah: "e4x": true di bagian "js" pada file pengaturan

Pergi ke: Preferences> Package Settings> HTML \ CSS \ JS Prettify> Set Prettify Preferences

Buka bagian "js":

Tambahkan "jsx" ke "allow_file_extension", lalu ubah "e4x" menjadi "true"

jawaban di internet yang selalu memberi tahu Anda setel 'e4x' menjadi true, tetapi terkadang, kami harus mengatur opsi 'format_on_save_extensions' lalu menambahkan 'jsx' dalam array

ubah jsFormat.sublime-settings

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

Menggunakan Penginstal Paket Sublime, instal Babel . Kemudian:

1. Buka file .jsx.
2. Pilih View dari menu,
3. Kemudian Sintaks -> Buka semua dengan ekstensi saat ini sebagai ... -> Babel -> JavaScript (Babel).

Tidak khusus untuk Sublime Text, tapi ada beautifier di JavaScript untuk React JSX.

http://prettydiff.com/?m=beautify klaim untuk mendukung JSX di: http://prettydiff.com/guide/react_jsx.xhtml