Apakah ada formatter JSX untuk teks luhur?


91

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?


Ya, cari bundel textmate jsx yang dapat digunakan dengan hampir semua editor.
Brigand

Sepertinya hanya sintaks yang lebih tinggi, saya mencari pemformat yang melakukan ident dan semacamnya
fin

2
Saya tidak tahu satu pun. Grup google react akan menjadi tempat yang lebih baik untuk bertanya.
Brigand

juga tidak dapat menemukan solusi yang baik. Saat ini, Anda dapat mengurai sumber dengan esprima-fb, dan menggunakan escodegen-jsx untuk menghasilkan keluaran yang diformat. Opsi pemformatan terbatas, dan Anda kehilangan garis putih ... ditambah escodegen-jsx adalah garpu tanpa pelacakan masalah .. tidak yakin apakah akan dipertahankan secara aktif. Saya bertanya-tanya bagaimana fb berurusan dengan basis kode jsx mereka.
pengguna1600124

versi beta dari esformatter tampaknya memiliki beberapa kemampuan untuk memformat JSX karena menggunakan esprima-fb, tetapi masih belum siap produksi
fin

Jawaban:


60

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.


1
Ini hanya bekerja dengan esformatter-jsx-ignore bagi saya, tapi itu cukup bagus. Terima kasih!
Jasper

Saya menggunakan esformatter-jsx dan berfungsi seperti yang saya harapkan. Namun, saya juga harus menambahkan "esformatter-jsx" ke "options": {"plugins": {"esformatter-jsx"}} di "Preferences> Package Settings> Sublime JSFMT> Settings - Default" di Sublime 3 untuk membuatnya bekerja
Kuma

Ini adalah jawaban yang bagus, saya memiliki alat yang digunakan ini untuk sementara waktu sekarang, tetapi kami telah beralih menggunakan es6 / es7 dengan babel dan itu tidak berfungsi lagi.

1
periksa konsol luhur Anda, di mac untuk membuka konsol tekan ctrl + `Anda dapat membuka tiket di repo esformatter-jsx atau di repo JSFMT dengan kesalahan yang Anda lihat di konsol
roy riojas

2
lebih cantik melakukan pekerjaan untuk saya. plugin sublime di sini github.com/jonlabelle/SublimeJsPrettier dan juga memiliki dukungan eslint github.com/prettier/prettier#eslint . Senang pertanyaan ini akhirnya diterima setelah hampir 3 tahun.
fin

57

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 />


1
Ini masih berfungsi sangat baik dengan versi terbaru babel-sublime dan HTML-CSS-JS Prettify. Pastikan Anda menambahkan "jsx" atau ekstensi file apa pun yang Anda gunakan ke "allow_file_extensions".
sialan

Apakah jawaban ini sudah ketinggalan zaman? Tidak ada />dalam kode saya, tetapi masih tidak berfungsi
Andy Darwin

2
lebih cantik (alias jsprettier) karena luhur sejauh ini adalah yang terbaik !! Lihat jawaban di bawah ini: stackoverflow.com/a/42169688/2178112
majorBummer

20

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:


1
Sejauh ini, ini adalah jawaban terbaik! lebih cantik adalah bom da!
MajorBummer

1
Ya, memang, ini berhasil juga untuk saya. Hal terpenting untuk diperhatikan adalah bagian "global".
Ionut Necula

19

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"


16

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"]
}

Saya melakukan seperti yang diperintahkan oleh Anda, tetapi itu tidak berhasil untuk saya. :(
Yash Vekaria

Di mana "jsFormat.sublime-settings" ditemukan? sehingga saya bisa memodifikasi "format_on_save_extensions": ["js", "json", "jsx"]. Hal terdekat yang saya temukan tentang ekstensi file adalah:"js": { "allowed_file_extensions": ["js", "json",...]
Chris22

Anda dapat menemukannya di sini: Preferences> Package Settings> jsFormat> Settings - User. Tidak berhasil untuk saya, masih membuat indentasi BEJ dengan aneh :(
Niclas

Telah mencari solusi dan yang ini menyelesaikan masalah saya, terima kasih!
Al-Maamari Tareq

4

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).

Ada juga paket bahasa JSX yang dapat digunakan
TabsNotSpaces

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.