क्या उदात्त पाठ के लिए JSX फॉर्मेटर है?

91

मैं एक पाठ संपादक के रूप में उदात्त पाठ का उपयोग कर रहा हूं।

जावास्क्रिप्ट फ़ाइलों को प्रारूपित करने के लिए एक jsFormat है, लेकिन मुझे JSX के लिए एक नहीं मिल रहा है।

आप लोग JSX को फ़ॉर्मेट करने से कैसे निपटते हैं?

reactjs  sublimetext  react-jsx 
— पंख
स्रोत
हाँ, jsx टेक्स्टमेट बंडल की तलाश करें जिसका उपयोग बहुत अधिक किसी भी संपादक के साथ किया जा सकता है।
— ब्रिगैंड
यह केवल एक वाक्यविन्यास hightlighter की तरह लगता है, मैं उस सूत्रकार की तलाश में हूं जो चीजों की पहचान और तरह करता है
— फिन
2
मैं एक का पता नहीं है। प्रतिक्रिया देने वाला Google समूह पूछने के लिए एक बेहतर स्थान होगा।
— ब्रिगांड
एक अच्छा समाधान भी नहीं मिल रहा है। वर्तमान में esprima-fb के साथ स्रोत को पार्स करना संभव है, और उत्पन्न स्वरूपित आउटपुट के लिए escodegen-jsx का उपयोग करना संभव है। स्वरूपण के विकल्प सीमित हैं, और आप सफेद रेखाओं को खो देते हैं ... प्लस एस्कोडेजेन-जेएक्स मुद्दा ट्रैकिंग के बिना एक कांटा है .. यकीन नहीं कि अगर यह सक्रिय रूप से बनाए रखा जाएगा। मुझे आश्चर्य है कि fb उनके jsx कोड बेस से कैसे निपटता है।
— user1600124
एस्फॉर्मेट के बीटा वेरिएशन में लगता है कि जेएसएक्स कारण स्वरूपण की कुछ क्षमता है क्योंकि यह एस्प्रिमा-एफबी का उपयोग कर रहा है, लेकिन फिर भी अभी तक तैयार नहीं हुआ है
— फिन

जवाबों:

60

अद्यतन ४

चेक खूबसूरत , कि esformatter के रूप में कॉन्फ़िगर करने योग्य नहीं है, लेकिन वर्तमान में कुछ बड़े परियोजनाओं फ़ॉर्मेट करने के लिए प्रयोग किया जाता है ( जैसे ही प्रतिक्रिया )

अपडेट ३

उदात्त jsfmt की जाँच करें । यदि आप कॉन्फ़िगर करने के लिए esformatter-jsx जोड़ते हैं और उपखंड-jsfmt के लिए फ़ॉरेस्ट के अंदर पैकेज स्थापित करते हैं। आप Sublime से सीधे JSX फ़ाइलों को प्रारूपित कर पाएंगे। यहाँ इसके लिए एक गाइड है

अपडेट २

कमांड लाइन से आप एसबाइटरिफायर का उपयोग भी कर सकते हैं । यह एक विकृत आवरण है जिसके चारों ओर एक आवरण है जो ग्लब्स की सूची को प्रारूपित करता है

# install the dependencies globally
npm i -g esbeautifier

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

अपडेट करें

इसलिए मैंने जेएसएक्स फाइलों के प्रारूपण को सक्षम करने के लिए एस्केफॉर्म के लिए एक प्लगइन करना समाप्त किया :

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

यहाँ पर एक लाइव डेमो आवश्यकता है

यह तर्क के रूप में वर्तमान फ़ाइल को पारित करने वाले सबलाइम से एस्केफॉर्म को कॉल करने के लिए किसी भी तरह संभव है । किसी भी स्थिति में इसे कमांड लाइन से उपयोग करने के लिए आप इन निर्देशों का पालन कर सकते हैं:

कमांड लाइन से इसे इस तरह इस्तेमाल किया जा सकता है:

# 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टैग को अनदेखा करने की अनुमति देता है) बनाने के लिए अपनी 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);
});

मैं वास्तव में पसंद करूंगा कि एस्कॉर्पेरेटर rocambole के एक संस्करण का उपयोग करें जो कि एस्क्रीम के बजाय एस्प्रिमा-एफबी का उपयोग करता है, ताकि प्रॉक्सीवर से बचा जा सके।

— रोय रिओजस
स्रोत
1
यह केवल मेरे लिए esformatter-jsx-उपेक्षा के साथ काम किया, लेकिन यह काफी अच्छा है। धन्यवाद!
— जैस्पर
मैं esformatter-jsx का उपयोग कर रहा हूं और यह मेरी अपेक्षा के अनुरूप काम करता है। हालाँकि, मुझे "विकल्प" में "esformatter-jsx": {"plugins": {"esformatter-jsx"}} को "प्राथमिकताएँ> पैकेज सेटिंग> उदात्त JSFMT> सेटिंग" डिफ़ॉल्ट "में जोड़ने के लिए भी जोड़ना पड़ा। काम करता है
— कुमा
यह एक महान जवाब है, मेरे पास थोड़ी देर के लिए इस उपकरण का उपयोग किया गया है, लेकिन हमने एबीएस / एस 7 का उपयोग बबेल के साथ करने के लिए स्विच किया है और यह अब काम नहीं करता है।
1
कंसोल में ctrl + को खोलने के लिए मैक में अपने उदात्त कंसोल की जांच करें, `आप esformatter-jsx रेपो पर या JSFMT रेपो में उस टिकट को खोल सकते हैं, जिसे आप कंसोल में देख रहे हैं
— roy rio2
2
prettier मेरे लिए काम करता है। उदात्त यहाँ प्लगइन github.com/jonlabelle/SublimeJsPrettier और यह भी eslint समर्थन हासिल है github.com/prettier/prettier#eslint । खुशी है कि यह सवाल लगभग 3 साल बाद स्वीकार कर लिया गया है।
— फिन
57

HTML-CSS-JS Prettify plugin में एक सेटिंग है जो आपको js / jxx फ़ाइल में xml सिंटैक्स को अनदेखा करने की अनुमति देता है। इस तरह यह jsx कोड को गड़बड़ नहीं करता है। सेटिंग है: "e4x": trueसेटिंग्स फ़ाइल के "जेएस" अनुभाग में

प्राथमिकताएँ> पैकेज सेटिंग्स> HTML \ CSS \ JS Prettify> प्राथमिकताएँ निर्धारित करें सेट करें

यदि आप स्वयं समापन टैग जैसे हैं तो यह अच्छी तरह से काम नहीं करता है। /> में समाप्त होने वाले टैग

— Shoobah
स्रोत
1
यह अभी भी बेबल-सब-टाइम और HTML-CSS-JS प्रीटीफाइ के नवीनतम संस्करणों के साथ वास्तव में अच्छी तरह से काम करता है। बस सुनिश्चित करें कि आप "jsx" या जो भी फ़ाइल एक्सटेंशन का उपयोग करते हैं, उसे "allow_file_extensions" में जोड़ें।
— डेमड
क्या यह उत्तर पुराना है? />मेरे कोड में नहीं है, लेकिन यह अभी भी काम नहीं करता है
— एंडी डार्विन
2
उदात्त के लिए सुंदर (उर्फ jsprettier) अब तक का सबसे अच्छा है !! नीचे उत्तर देखें: stackoverflow.com/a/42169688/2178112
— majorBummer
20

आप उदा 2 और 3 के लिए एक JsPrettier पैकेज स्थापित कर सकते हैं। यह एक काफी नया जावास्क्रिप्ट फॉर्मैटर है (इसे लिखने के समय: फरवरी -2017)। यह सबसे नवीनतम विकास का समर्थन करता है जैसे: ES2017, JSX, और फ़्लो।

जल्दी शुरू

  1. टर्मिनल का उपयोग करके विश्व स्तर पर प्रीटियर स्थापित करें: $ npm install -g prettier
  2. उदात्त में टूल्स -> कमांड पैलेट ... -> पैकेज नियंत्रण: पैकेज स्थापित करें, शब्द JsPrettier टाइप करें, फिर स्थापना को पूरा करने के लिए इसे चुनें।
  3. संपादक के अंदर संदर्भ मेनू का उपयोग करके अपनी फ़ाइल को प्रारूपित करें या इसे कीबोर्ड शॉर्टकट से बांधें: { "keys": ["super+b"], "command": "js_prettier" }

लिंक:

— यूजीन कुलबुहोव
स्रोत
1
यह अब तक का सबसे अच्छा जवाब है! प्रेटियर है दा बम!
— मेजरबूमर
1
हां, वास्तव में, यह मेरे लिए भी सही है। नोटिस करने के लिए सबसे महत्वपूर्ण बात "विश्व स्तर पर" हिस्सा है।
— इयोनुत नेचुला
19

@Shoobah ने क्या कहा:

HTML-CSS-JS Prettify plugin में एक सेटिंग है जो आपको js / jxx फ़ाइल में xml सिंटैक्स को अनदेखा करने की अनुमति देता है। इस तरह यह jsx कोड को गड़बड़ नहीं करता है। सेटिंग है: "e4x": सेटिंग्स फ़ाइल के "js" अनुभाग में सच है

पर जाएं: प्राथमिकताएँ> पैकेज सेटिंग> HTML \ CSS \ JS Prettify> प्राथमिकताएँ निर्धारित करें सेट करें

"Js" अनुभाग पर जाएं:

"अनुमत_फाइल_स्टेंशन" में "jsx" जोड़ें, और फिर "e4x" को "सही" में बदलें

— brownmamba
स्रोत
16

इंटरनेट में उत्तर जिसने आपको हमेशा 'e4x' सेट करने के लिए कहा था, लेकिन कभी-कभी, हमें 'format_on_save_extensions' का विकल्प सेट करना पड़ता है, फिर सरणी में 'jsx' जोड़ें

jsFormat.sublime-settings संशोधित करें

{
  "e4x": true,
  "format_on_save": true,
  "format_on_save_extensions": ["js", "json", "jsx"]
}
— मोनोक्रोम ये
स्रोत
मैंने आपके अनुसार कहा था, लेकिन यह मेरे लिए काम नहीं किया। :(
— यश वेकरिया
"JsFormat.sublime-settings" कहाँ पाई जाती है? ताकि मैं संशोधित कर सकूं "format_on_save_extensions": ["js", "json", "jsx"]। फ़ाइल एक्सटेंशन के बारे में मुझे सबसे करीब से पता चलता है:"js": { "allowed_file_extensions": ["js", "json",...]
— 23:22 पर क्रिस
आप इसे यहाँ पा सकते हैं: प्राथमिकताएँ> पैकेज सेटिंग्स> jsFormat> सेटिंग्स - उपयोगकर्ता। हालांकि मेरे लिए काम नहीं किया, फिर भी जेएसएक्स को अजीब तरीके से प्रेरित करता है :(
— निकल्स
एक समाधान के लिए देख रहे हैं और यह मेरी समस्या हल हो गई, धन्यवाद!
— अल-मामारी तारीक
4

उपठेका के पैकेज इंस्टॉलर का उपयोग करके, बैबेल को स्थापित करें । फिर:

  1. .Jsx फ़ाइल खोलें।
  2. मेनू से दृश्य चुनें,
  3. फिर सिंटैक्स -> वर्तमान एक्सटेंशन के रूप में सभी खोलें ... -> बैबेल -> जावास्क्रिप्ट (बैबेल)।
— एलन पी।
स्रोत
एक JSX भाषा पैकेज भी है जिसका उपयोग किया जा सकता है
— TabsNotSpaces
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.