มีรูปแบบ JSX สำหรับข้อความประเสริฐหรือไม่?

ฉันใช้ Sublime Text เป็นโปรแกรมแก้ไขข้อความ

มี jsFormat สำหรับจัดรูปแบบไฟล์ javascript แต่ฉันไม่พบไฟล์สำหรับ JSX

พวกคุณจัดการกับการฟอร์แมต JSX อย่างไร?

อัปเดต 4

ตรวจสอบที่สวยกว่าซึ่งไม่สามารถกำหนดค่าได้เป็น esformatter แต่ปัจจุบันใช้เพื่อจัดรูปแบบโครงการขนาดใหญ่บางโครงการ ( เช่น React เอง )

อัปเดต 3

ตรวจสอบประเสริฐ jsfmt หากคุณเพิ่มesformatter-jsxลงใน config และติดตั้งแพ็กเกจภายใน forlder สำหรับ sublime-jsfmt คุณจะสามารถฟอร์แมตไฟล์ JSX ได้โดยตรงจาก Sublime นี่คือคำแนะนำสำหรับสิ่งนั้น

อัปเดต 2

จากบรรทัดคำสั่งคุณยังสามารถใช้esbeautifier เป็นกระดาษห่อหุ้มรอบesformatterที่ยอมรับรายการ globs เพื่อจัดรูปแบบ

# install the dependencies globally
npm i -g esbeautifier

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

อัปเดต

ดังนั้นฉันจึงทำปลั๊กอินสำหรับesformatterเพื่อเปิดใช้งานการจัดรูปแบบไฟล์ JSX:

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

นี่คือการสาธิตสดบน requirebin

มันควรจะเป็นไปได้ที่จะเรียกesformatterจาก Sublime ผ่านไฟล์ปัจจุบันเป็นอาร์กิวเมนต์ ไม่ว่าในกรณีใด ๆ ในการใช้งานจากบรรทัดคำสั่งคุณสามารถทำตามคำแนะนำเหล่านี้:

จากบรรทัดคำสั่งสามารถใช้ได้ดังนี้:

# 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

==== คำตอบเก่าด้านล่าง ===

ดังนั้นหากสิ่งที่คุณกำลังมองหาคือการทำให้ไฟล์ jsx ของคุณถูกจัดรูปแบบในขณะที่อนุญาตให้ใช้jsxไวยากรณ์ (โดยทั่วไปจะทำให้ไวยากรณ์ของ javascript ทั้งหมดสวยงามและละเว้นjsxแท็กซึ่งหมายความว่าปล่อยให้เป็นอยู่) นี่คือสิ่งที่ฉันกำลังใช้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);
});

ฉันต้องการให้ esformatter ใช้ rocambole เวอร์ชันที่ใช้ esprima-fb แทน esprima เพื่อหลีกเลี่ยง proxyquire

มีการตั้งค่าในปลั๊กอิน HTML-CSS-JS Prettify ที่อนุญาตให้คุณละเว้นไวยากรณ์ xml ในไฟล์ js / jsx วิธีนี้จะไม่ทำให้โค้ด jsx ยุ่ง การตั้งค่าคือ"e4x": trueในส่วน "js" ของไฟล์การตั้งค่า

ค่ากำหนด> การตั้งค่าแพ็คเกจ> HTML \ CSS \ JS Prettify> ตั้งค่า Prettify Preferences

วิธีนี้ใช้ไม่ได้ผลหากคุณมีแท็กปิดตัวเองเช่น แท็กที่ลงท้ายด้วย />

คุณสามารถติดตั้งแพ็คเกจ JsPrettier สำหรับ Sublime 2 & 3 ได้ซึ่งเป็นฟอร์แมตเตอร์ JavaScript ที่ค่อนข้างใหม่ (ณ เวลาที่เขียนสิ่งนี้: ก.พ. 2017) รองรับการพัฒนาล่าสุดส่วนใหญ่เช่น ES2017, JSX และ Flow

เริ่มต้นอย่างรวดเร็ว

1. ติดตั้งที่สวยกว่าทั่วโลกโดยใช้เทอร์มินัล: $ npm install -g prettier
2. ใน Sublime ไปที่ Tools -> Command Palette ... -> Package Control: Install Package พิมพ์คำว่า JsPrettier จากนั้นเลือกเพื่อทำการติดตั้งให้เสร็จสิ้น
3. จัดรูปแบบไฟล์ของคุณโดยใช้เมนูบริบทภายในตัวแก้ไขหรือผูกเข้ากับแป้นพิมพ์ลัด: { "keys": ["super+b"], "command": "js_prettier" }

ลิงค์:

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

หากต้องการเพิ่มสิ่งที่ @Shoobah กล่าว:

มีการตั้งค่าในปลั๊กอิน HTML-CSS-JS Prettify ที่อนุญาตให้คุณละเว้นไวยากรณ์ xml ในไฟล์ js / jsx วิธีนี้จะไม่ทำให้โค้ด jsx เสียหาย การตั้งค่าคือ "e4x": true ในส่วน "js" ของไฟล์การตั้งค่า

ไปที่: Preferences> Package Settings> HTML \ CSS \ JS Prettify> Set Prettify Preferences

ไปที่ส่วน "js":

เพิ่ม "jsx" ใน "allow_file_extension" จากนั้นเปลี่ยน "e4x" เป็น "true"

คำตอบในอินเทอร์เน็ตที่บอกให้คุณตั้งค่า 'e4x' เป็นจริงเสมอ แต่บางครั้งเราต้องตั้งค่าตัวเลือกของ 'format_on_save_extensions' จากนั้นเพิ่ม 'jsx' ในอาร์เรย์

แก้ไข jsFormat.sublime-settings

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

ใช้ Sublime ของแพคเกจติดตั้งติดตั้งBabel จากนั้น:

1. เปิดไฟล์. jsx
2. เลือกดูจากเมนู
3. จากนั้น Syntax -> เปิดทั้งหมดด้วยนามสกุลปัจจุบันเป็น ... -> Babel -> JavaScript (Babel)

ไม่ใช่เฉพาะสำหรับ Sublime Text แต่มีตัวตกแต่งใน JavaScript สำหรับ React JSX

http://prettydiff.com/?m=beautifyอ้างว่าสนับสนุน JSX ที่: http://prettydiff.com/guide/react_jsx.xhtml