मैं Sublime Text 2 का उपयोग करके HTML कोड को कैसे सुधार सकता हूं?

1312

मुझे कुछ खराब-स्वरूपित HTML कोड मिल गए हैं जिन्हें मैं पुन: स्वरूपित करना चाहूंगा। क्या कोई कमांड है जो स्वचालित रूप से HTML कोड को Sublime Text 2 में सुधार करेगा ताकि यह बेहतर दिखे और पढ़ने में आसान हो?

— रवि राम
स्रोत

4

यह भी देखें stackoverflow.com/questions/9495007/…

— क्रिस्टोफर जॉनसन

1

इसके अलावा अगर आप विंटेज मोड का उपयोग करते हैं तो आप बस सामान्य मोड में gg = G का उपयोग कर सकते हैं।

— विकटोरिया मस्कुन

3

आप इस पूरे पृष्ठ को पढ़कर अपना समय बर्बाद कर सकते हैं, या आप सिर्फ github.com/akalongman/sublimetext-codeformatter प्राप्त कर सकते हैं और काम पर वापस आ सकते हैं।

— शनैपरसन

2079

ऐसा करने के लिए आपको किसी भी प्लगइन्स की आवश्यकता नहीं है। बस सभी पंक्तियों ( Ctrl A) का चयन करें और फिर मेनू से संपादित करें → लाइन → रिइंडेंट का चयन करें। यह तब काम करेगा जब आपकी फ़ाइल HTML जैसे .htmlया उसके एक्सटेंशन के साथ सहेजी जाती है .php।

यदि आप अक्सर ऐसा करते हैं, तो आपको यह कुंजी मैपिंग उपयोगी लग सकती है:

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

यदि आपकी फ़ाइल सहेजी नहीं गई है (जैसे कि आप बस एक स्निपेट में एक नई विंडो में चिपकाई जाती है), तो आप मेनू को → language of choiceरींडेंट विकल्प चुनने से पहले मेनू → → सिंटैक्स → का चयन करके इंडेंटेशन के लिए भाषा को मैन्युअल रूप से सेट कर सकते हैं ।

— पीटर
स्रोत

19

वैसे, यह गैर HTML स्रोत कोड के लिए भी काम करता है, जैसे कि Ruby या JS

— peter

78

यह बहुत अच्छा काम करता है अगर कोड में एक लाइन पर कई टैग नहीं खुलते हैं जो एक लाइन पर बंद नहीं होते हैं या इसके विपरीत।

— चार्ली गोरीचनज

31

उत्तम! मैक पर आपको cmd कुंजी के लिए सुपर की आवश्यकता होती है, इसलिए: {"कुंजियाँ": ["सुपर + शिफ्ट + आर"], "कमांड": "रीइंडेंट", "आर्ग्स": {"सिंगल_लाइन": असत्य}}

— गीर्ट वीविंग

168

लाइन रीइंडेंट बिल्कुल मनमाने ढंग से HTML में सुधार के लिए काम नहीं करता है। जब बिना लाइन ब्रेक के कई html टैग होते हैं। @Anneke से HtmlTidy का उत्तर बेहतर है। जहां तक मैं बता सकता हूं, लाइनब्रेक की परवाह किए बिना, यह पूरी तरह से और ठीक से स्रोत HTML को अच्छी तरह से इंडेंट किए गए स्रोत में सुधार करता है।

— jpw

33

Newbies के लिए, "प्राथमिकताएं" पर क्लिक करें, फिर "की-बाइंडिंग - उपयोगकर्ता" चुनें, और वर्ग कोष्ठक के बीच पीटर के कोड को पेस्ट करें और फ़ाइल को सहेजें।

— सिग्मापी

375

Sublime में HTML फॉर्मेट करने के लिए आधा दर्जन या तो तरीके हैं। मैंने सबसे लोकप्रिय प्लगइन्स में से प्रत्येक का परीक्षण किया है ( राइटअप के बारे में मैंने अपने ब्लॉग पर लिखा है ) देखें, लेकिन यहां कुछ सबसे लोकप्रिय विकल्पों का त्वरित अवलोकन है:

आज्ञाकारी आज्ञा

पेशेवरों:

उदात्त के साथ जहाजों, तो कोई प्लगइन की जरूरत स्थापित करें

विपक्ष:

अतिरिक्त रिक्त लाइनों को नहीं हटाता है
कई खुले टैग के साथ की गई HTML, लाइनों को संभाल नहीं सकते
ठीक से प्रारूप <script>ब्लॉक नहीं करता है

HTMLTidy

पेशेवरों:

PHP टैग्स को हैंडल करता है
स्वरूपण ट्विक करने के लिए कुछ सेटिंग्स

विपक्ष:

PHP की आवश्यकता है (वेब सेवा पर वापस आती है)
केवल ST2
छोड़ा हुआ?

HTMLBeautify

पेशेवरों:

ST2 / ST3 का समर्थन करता है
सरल और बिनराय निर्भरता नहीं
ओएस एक्स, विन और लिनक्स के लिए समर्थन

विपक्ष:

इनलाइन टिप्पणियों के साथ थोड़ा चुटकुले
कम से कम / संपीड़ित कोड का विस्तार करता है

HTML-CSS-JS Prettify

पेशेवरों:

ST2 / ST3 का समर्थन करता है
HTML, CSS, JS को हैंडल करता है
उदात्त के मेनू के साथ महान एकीकरण
अत्यधिक अनुकूलन
प्रति-प्रोजेक्ट सेटिंग्स
सेव ऑप्शन पर फॉर्मेट करें

विपक्ष:

Node.js की आवश्यकता है
एम्बेडेड PHP के लिए महान नहीं है

कौन सा सबसे अच्छा है?

HTML-CSS-JS Prettify मेरी पुस्तक में विजेता है। महान सुविधाओं के बहुत, के बारे में शिकायत करने के लिए नहीं।

— जोश अर्ल
स्रोत

12

Prettify पर 2 डी। री-इंडेंट ने मेरे द्वारा किए गए html पर काम नहीं किया, टैग और HtmlTidy नहीं मिला जब मैंने इसे कॉल किया।

— jcollum

2

बस इसे आज़माया और HTML-CSS-JS Prettify ने मेरे उपयोग के मामले में आदर्श रूप से काम किया (html को रीइंडेंट या अन्य रिफॉर्मेटर पैकेज में निर्मित की तुलना में कहीं बेहतर तरीके से संभाला)

— मार्क एसेल

2

अन्य सभी की कोशिश की, लेकिन केवल एक ही काम किया (HTML के स्निपेट के लिए) HTML-CSS-JS Prettify था। धन्यवाद!

— झूमक

1

यह भी उल्लेख करना चाहता था कि आप सभी इंडेंटेशन (उदाहरण के लिए एक बार मार्कअप को संपादित कर सकते हैं) को हटा सकते हैं, बस एसटी की कार्यक्षमता में निर्मित का उपयोग करके - ब्लॉक का चयन करें और ctrl + j दबाएं।

— zumek

1

क्या यह गैर HTML एक्सटेंशन के साथ काम करता है? मैं php और अन्य टेम्पलेट्स पर कोशिश की, यह काम नहीं किया।

— बिसेंन

179

एकमात्र पैकेज जो मुझे मिल गया है वह है टैग ।

आप पैकेज नियंत्रण का उपयोग करके इसे स्थापित कर सकते हैं। https://sublime.wbond.net

पैकेज नियंत्रण स्थापित करने के बाद। पैकेज कंट्रोल पर जाएं ( प्राथमिकताएं -> पैकेज कंट्रोल ) फिर टाइप करें install, हिट करें enter। फिर टाइप करें tagऔर हिट करें enter।

टैग इंस्टॉल करने के बाद, टेक्स्ट हाइलाइट करें और शॉर्टकट Ctrl+ Alt+ दबाएं F।

— dardub
स्रोत

21

एक बेहतर प्लगइन है Tidy HTML

— मैथ्यूफोर्ड

1

धन्यवाद ... अभी पैकेज के बारे में पता था: डी। उदात्त पाठ के लिए कुछ अच्छा सामान यहाँ भी देखा। arlando.net/blog/…

— mars-o

3

यह ईमानदारी से केवल एक चीज है जो कुछ HTML कोड के साथ पूरी तरह से काम करती है जिसमें सैकड़ों यादृच्छिक लाइन ब्रेक थे, टैग जो गलत तरीके से नेस्टेड थे। यह मूल रूप से मेरे द्वारा देखे गए सबसे गंदे HTML पृष्ठों में से एक को साफ करता है!

— justinhartman

1

मैं @ मर्स-ओ से असहमत हूं; यह प्लगइन बहुत अच्छा है। साफ कुछ चीजें वास्तव में अच्छी तरह से करती हैं, और बहुत स्थापित है, लेकिन यह प्लगइन काफी कुछ अन्य दिलचस्प चीजें करता है। पोस्ट के लिए धन्यवाद।

— zedd45

@JonnyLeeds यह इस तरह का है, लेकिन हमेशा सही ढंग से नहीं। XML के लिए विशेष रूप से, दूसरों के बीच Indent XMLया प्रयास करें IndentX।

— जोएल मेलन

49

मैं इस प्लगइन की सलाह देता हूं: HTML / CSS / JS Prettify , यह वास्तव में काम करता है।

स्थापना के बाद, बस कोड चुनें और दबाएं Ctrl+Shift+H।

किया हुआ!

— पीटर झू
स्रोत

3

आपको उस प्लगइन का उपयोग करने के लिए Node.js की आवश्यकता है। सामान्य उपयोगकर्ताओं के लिए बहुत आरामदायक नहीं है।

— निकोसिपिप

4

इस प्लगइन की उपयोगिता की तुलना में, हम Node.js;) स्थापित करने की परेशानी को अनदेखा कर सकते हैं;

— पीटर झू

Packagecontrol.io/packages/HTML-CSS-JS%20Prettify को महान बनाने के लिए निर्देश । धन्यवाद।

— सैकी सैन

41

बस एक सामान्य टिप। मैंने अपने HTML को स्वत: व्यवस्थित करने के लिए क्या किया था, पैकेज HTML_Tidy को स्थापित किया था, और फिर निम्न कीबाइंडिंग को डिफ़ॉल्ट सेटिंग्स (जो मैं उपयोग करता हूं) में जोड़ें:

{ "keys": ["enter"], "command": "html_tidy" },

यह हर प्रविष्टि के साथ HTML सुव्यवस्थित चलाता है। इसमें कमियां हो सकती हैं, मैं अपने आप में बहुत नया हूँ, लेकिन ऐसा लगता है कि मैं जो चाहता हूँ :)

— Anneke
स्रोत

2

मुझे लगता है कि यह प्लगइन बड़ी फ़ाइलों पर थोड़ा गहन हो सकता है, जो कि अगर आप हर बार हिट करते हैं, तो यह सुस्त हो सकता है?

— रिक्की

2

मैंने लगभग एक दिन के लिए ENTER कीबाइंडिंग का उपयोग किया और फिर इसे हटा दिया। यह बहुत धीमा था और v2 में स्क्रीन के शीर्ष पर कर्सर ले जाता रहा।

— रवि राम

22

पर्याप्त रूप से सवाल HTML के लिए है, मैं इसके अलावा यह भी जानकारी देना चाहूंगा कि कैसे उप-पाठ 2 के लिए अपने जावास्क्रिप्ट कोड को ऑटो-फ़ॉर्मेट किया जाए ;

आप अपने सभी कोड ( ctrl+ A) का चयन कर सकते हैं और इन-ऐप कार्यक्षमता का उपयोग कर सकते हैं , रीइंडेंट ( Edit-> Line-> Reindent) या आप JsFormat स्वरूपण प्लगइन का उपयोग कर सकते हैं Sublime Text 2यदि आप अपने कोड को जोड़ने के लिए प्रारूपण के लिए अधिक अनुकूलन योग्य सेटिंग्स चाहते हैं। उदात्त पाठ की डिफ़ॉल्ट टैब / इंडेंट सेटिंग।

https://github.com/jdc0589/JsFormat

आप पैकेज नियंत्रण ( -> ) ओपन पैकेज नियंत्रण का उपयोग करके आसानी से JsFormat स्थापित कर सकते हैं , फिर टाइप करें, हिट करें । फिर टाइप करें और हिट करें , आप कर चुके हैं। (पैकेज नियंत्रक नीचे बाईं ओर बार में सफलता और त्रुटियों के साथ स्थापना की स्थिति दिखाएगा )PreferencesPackage Controlenterjs formatenterSublime

अपनी कुंजी बाइंडिंग में निम्नलिखित पंक्ति जोड़ें ( Preferences-> Key Bindings User)

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

मैं ctrl+ alt+ का उपयोग कर रहा हूं 2, आप इस शॉर्टकट कुंजी को बदल सकते हैं जो आप चाहते हैं। अब तक, JsFormatयह कोशिश करने के लायक एक अच्छा प्लगइन है!

उम्मीद है कि यह किसी की मदद करेगा।

— गोखन टैंक
स्रोत

14

वहाँ एक प्लगइन SublimeHtmlTidy कहा जाता है जो बहुत अच्छी तरह से काम करता है

https://github.com/welovewordpress/SublimeHtmlTidy

— ईसाई हैगेलिड
स्रोत

13

मेरे लिए, HTML Prettifyसमाधान बेहद सरल था। मैं HTML Prettify पेज पर गया ।

की जरूरत है Sublime Package Manager
यहां पैकेज मैनेजर स्थापित करने के निर्देशों का पालन किया
cmd + shift + pमेनू लाने के लिए टाइप किया गया
लिखे गए prettify
HTML prettifyमेनू में चयन का चयन करें

बूम। किया हुआ। अच्छा लग रहा है

— insaineyesay
स्रोत

यह समाधान ठीक उसी तरह से काम करता है जैसा कि मैं चाहता था कि अगर पीएम आपके पास पहले से ही स्थापित है तो सभी और 2 सेकंड लग जाएं। जोड़ना चाह सकते हैं कि आपको पहले से तैयार पैकेज को स्थापित करने की आवश्यकता है।

— doogle सिप ३'१४

नोट: रुचि रखने वाले किसी भी व्यक्ति के लिए, इस उत्तर में प्लगइन को node.js. स्थापित करने की आवश्यकता है

— फर्जी नाम

ठीक से काम नहीं करता है; केवल HTML के एक निश्चित स्तर तक इंडेंट / लाइन-ब्रेक-अप किया गया और बाकी को इंडेंट और उसी लाइन पर छोड़ दिया गया।

— जोनाथन

11

बस के लिए जाना

संपादित करें -> टैग -> दस्तावेज़ पर ऑटो-प्रारूप टैग

— रिकार्डो मार्टिंस
स्रोत

6

मुझे वह मेनू विकल्प Sublime Text 2 Version 2.0.1, Build 2217मैक पर दिखाई नहीं दे रहा है । क्या आप सुनिश्चित हैं कि यह एक मानक विशेषता है?

— --स्टरगार्ड

1

आपको पैकेज मैनेजर से टैग स्थापित करना होगा। लेकिन मुझे इसमें एक समस्या है। जब <b>somthing</b>कॉमा द्वारा पीछा किया जाता है, तो कॉमा को एक नई लाइन पर रखा जाता है, जिसके परिणामस्वरूप एक ब्राउज़र दृश्य में कुछ और कॉमा के बीच एक स्थान होता है।

— रीटवॉटरस

9

मैंने HTMLBeautify नामक एक पैकेज बनाया है जो HTML को पुन: स्वरूपित करने का एक अच्छा काम करता है। मैंने इसे 1997 में वापस मिली एक पर्ल स्क्रिप्ट के आधार पर-मैंने इसे सभी नए फंसे हुए आधुनिक टैग के साथ काम करने के लिए अद्यतन किया। :)

इसे देखें और मुझे बताएं कि आप क्या सोचते हैं!

https://github.com/rareyman/HTMLBeautify

— रॉस
स्रोत

3

मैंने इसे स्थापित किया, लेकिन जब मैं डेमो फाइल पर HTMLBeautify चलाता हूं तो यह कुछ भी नहीं करता है। एक संदेश प्रदर्शित करता है कि फ़ाइल सुशोभित है, लेकिन फ़ाइल में कुछ भी नहीं होता है सामग्री।

— सैम

मेरा अनुमान है कि आप विंडोज का उपयोग कर रहे हैं ...? विंडोज पर, आपको उपलब्ध होने वाली स्क्रिप्ट के लिए SublimeText 2 को पुनरारंभ करना होगा। कोशिश करो और मुझे पता है कि क्या होता है। :)

— रॉस

मैंने किया था, स्क्रिप्ट उपलब्ध थी, यह सिर्फ फ़ाइल में कुछ भी नहीं बदला।

— सैम

अजीब। मैं अन्य सभी प्लगइन्स / संकुल को सामान्य मान रहा हूँ? मैं अपने परीक्षण वातावरण में इस मुद्दे को दोहराने के लिए प्रतीत नहीं कर सकता- इसलिए मैं अनिश्चित हूं कि आपको क्या बताऊं। :(

— रोस

सब कुछ फ़ॉर्मेट करने के अलावा जैसा मैं उम्मीद करता हूं कि यह काम करता है - शायद ऐसा इसलिए है क्योंकि मैं विंडोज़ का जर्मन संस्करण चला रहा हूं?

— सैम

7

मुझे लगता है कि आप यही देख रहे हैं:

https://github.com/victorporof/Sublime-HTMLPrettify

— एलन बारगी
स्रोत

मैंने निर्देशों का पालन किया लेकिन यह काम नहीं किया। प्लगइन मुझे त्रुटियाँ देता है। "'{' को आंतरिक या बाहरी कमांड, ऑपरेशनल प्रोग्राम या बैच फ़ाइल के रूप में मान्यता नहीं मिली है।"

— रवि राम

मेरा मानना है कि विशिष्ट पैकेज के लिए नोड की आवश्यकता होती है जो एक अतिरिक्त उपक्रम होता है ... dandean.com/nodejs-npm-express-osx NPM और एक्सप्रेस की उपेक्षा करता है

— bgrait

@Allan यह काम विंडोज पर है। मेरे पास मेरे कंप्यूटर में नोड.जेएस है।

— अनिरुद्ध गुप्ता

7

मेरे पास टिप्पणी करने का विशेषाधिकार अभी तक नहीं है, इसलिए यह केवल उत्तर के ऊपर @ पीटर के उत्तर से संबंधित अतिरिक्त जानकारी है ।

मैंने पाया कि HTML अपेक्षित रूप से संरेखित नहीं हुई है यदि हेडर में IE सशर्त टिप्पणियाँ पूरी तरह से इन-लाइन में नहीं हैं जैसे बाईं ओर फ्लश:

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

— newtriks
स्रोत

7

एक अच्छा खुला स्रोत कोडफ़ॉर्मर प्लगइन है , जो (रीइंडेंटिंग के साथ) गंदे कोड को सुशोभित कर सकता है, यहां तक कि यह सब एक पंक्ति में है।

— side2k
स्रोत

नोट: इसके लिए स्थानीय PHP संस्थापन की आवश्यकता है।

— फेक नेम

मैंने पाया है कि यह एकमात्र अच्छा प्लगइन है .. और मैंने लगभग सभी की कोशिश की है।

— शनैपरसन

ऐसा लगता है कि HTML विशेषताओं को प्रारूपित करने के लिए इसकी सेटिंग है। मुझे नहीं लगता कि अन्य प्लगइन्स ऐसा करते हैं? या मैं एक लापता हूँ?

— तुलसी

4

मैं उपयोग कर रहा हूँ साफ सँवारना एचटीएमएल करने के लिए कस्टम निर्माण प्रणाली के साथ एक साथ।

मेरे पैकेज / उपयोगकर्ता / निर्देशिका में HTMLTidy.sublime-build है:

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

और tidy_config.cfg उसी निर्देशिका में फ़ाइल:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

और बस बिल्ड सिस्टम का चयन करें और सुधार फ़ाइल सामग्री के लिए ctrl+ bया cmd+ दबाएँ b। इसके साथ एक छोटी सी समस्या यह है कि ST2 फ़ाइल को स्वचालित रूप से पुनः लोड नहीं करता है ताकि परिणाम देखने के लिए आपको किसी अन्य फ़ाइल और बैक (या अन्य एप्लिकेशन और बैक) पर स्विच करना पड़े।

मैक पर मैंने विंडोज़ को ठीक करने के लिए मैकपोर्ट का उपयोग किया है, आपको इसे स्वयं डाउनलोड करना होगा और बिल्ड सिस्टम में काम करने की निर्देशिका निर्दिष्ट करनी होगी, जहाँ टीआईडीई स्थित है:

"working_dir": "c:\\HTMLTidy\\"

या इसे पाथ में जोड़ें।

— rchl
स्रोत

4

आप शॉर्टकट कुंजी F12आसान सेट कर सकते हैं !!!

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

विस्तार से यहाँ देखें ।

— सुमिता पोंगपन
स्रोत

6

बेकार का जवाब; यह स्वीकृत उत्तर का एक डुप्लिकेट है।

— मार्क अमेरी