උසස් පෙළ 2 භාවිතා කරමින් HTML කේතය නැවත ආකෘතිකරණය කරන්නේ කෙසේද?

මා නැවත ආකෘතිකරණය කිරීමට කැමති දුර්වල ලෙස හැඩගස්වා ඇති HTML කේත කිහිපයක් මා සතුව ඇත. උසස් පෙළ 2 හි HTML කේතය ස්වයංක්‍රීයව නැවත ආකෘතිකරණය කරන විධානයක් තිබේද, එවිට එය වඩා හොඳ පෙනුමක් ඇති අතර කියවීමට පහසු වේ.

මෙය කිරීමට ඔබට කිසිදු ප්ලගීන අවශ්‍ය නොවේ. සියලුම පේළි ( Ctrl A) තෝරන්න , ඉන්පසු මෙනුවෙන් Edit → Line → Reindent තෝරන්න. ඔබේ ගොනුව HTML වැනි .htmlහෝ අඩංගු දිගුවක් සමඟ සුරකිනවා නම් මෙය ක්‍රියාත්මක වේ .php.

ඔබ මෙය බොහෝ විට කරන්නේ නම්, ඔබට මෙම යතුරු සිතියම්ගත කිරීම ප්‍රයෝජනවත් විය හැකිය:

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

ඔබගේ ගොනුව සුරකින ලද්දේ නැත්නම් (උදා: ඔබ නව කවුළුවකට language of choiceස්නිපටයක අලවා ඇත), රින්ඩෙන්ට් විකල්පය තේරීමට පෙර මෙනුව බලන්න → සින්ටැක්ස් the මෙනුව තේරීමෙන් ඔබට භාෂාව අතින් සැකසීමට හැකිය.

උත්කෘෂ්ටව HTML සංයුති කිරීමට දුසිම් භාගයක් හෝ ඊට වැඩි ක්‍රම තිබේ. මම වඩාත් ජනප්‍රිය එක් එක් ප්ලගීන පරීක්ෂා කර ඇත්තෙමි ( සම්පූර්ණ විස්තර සඳහා මගේ බ්ලොග් අඩවියේ ලිවීම බලන්න), නමුත් මෙන්න වඩාත් ජනප්‍රිය විකල්ප කිහිපයක් පිළිබඳ ඉක්මන් දළ විශ්ලේෂණයක්:

Reindent විධානය

වාසි:

• සබ්ලයිම් සමඟ නැව්, එබැවින් ප්ලගීන ස්ථාපනය අවශ්‍ය නොවේ

අවාසි:

• අමතර හිස් රේඛා මකා නොදමයි
• කුඩා කළ HTML, බහු විවෘත ටැග් සහිත රේඛා හැසිරවිය නොහැක
• <script>කුට්ටි නිසි ලෙස සංයුති නොකරයි

ටැගය

වාසි:

• ST2 / ST3 සඳහා සහය දක්වයි
• අමතර හිස් රේඛා ඉවත් කරයි
• ද්විමය පරායත්තයන් නොමැත

අවාසි:

• PHP ටැග් මත චෝක්ස්
• <script>කුට්ටි නිවැරදිව හසුරුවන්නේ නැත

HTMLTidy

වාසි:

• PHP ටැග් හසුරුවයි
• හැඩතල ගැන්වීම සඳහා සමහර සැකසුම්

අවාසි:

• PHP අවශ්‍යයි (නැවත වෙබ් සේවයට වැටේ)
• ST2 පමණි
• අතහැර දමා තිබේද?

HTMLBeautify

වාසි:

• ST2 / ST3 සඳහා සහය දක්වයි
• සරල හා බිනාරේ පරායත්තතා නොමැත
• OS X, Win සහ Linux සඳහා සහය

අවාසි:

• පේළිගත අදහස් දැක්වීමෙන් ටිකක් යටපත් වේ
• අවම / සම්පීඩිත කේතය පුළුල් කරයි

HTML-CSS-JS Prettify

වාසි:

• ST2 / ST3 සඳහා සහය දක්වයි
• HTML, CSS, JS හසුරුවයි
• සබ්ලයිම් මෙනු සමඟ විශිෂ්ට ඒකාබද්ධ කිරීම
• ඉහළ අභිරුචිකරණය කළ හැකිය
• එක් එක් ව්‍යාපෘති සැකසුම්
• සුරැකීමේ විකල්පය මත ආකෘතිය

අවාසි:

• Node.js අවශ්‍යයි
• කාවැද්දූ PHP සඳහා විශිෂ්ට නොවේ

හොඳම දේ කුමක්ද?

HTML-CSS-JS Prettify මගේ පොතේ ජයග්‍රාහකයා වේ. විශාල ලක්ෂණ රාශියක්, පැමිණිලි කිරීමට එතරම් නොවේ.

මට සොයාගත හැකි එකම පැකේජය ටැගය පමණි .

ඇසුරුම් පාලනය භාවිතයෙන් ඔබට එය ස්ථාපනය කළ හැකිය. https://sublime.wbond.net

ඇසුරුම් පාලනය ස්ථාපනය කිරීමෙන් පසු. ඇසුරුම් පාලනයට යන්න ( මනාප -> පැකේජ පාලනය ) ඉන්පසු ටයිප් කරන්න install, පහර දෙන්න enter. ඉන්පසු ටයිප් tagකර පහර දෙන්න enter.

ටැගය ස්ථාපනය කිරීමෙන් පසු, පෙළ උද්දීපනය කර කෙටිමඟ Ctrl+ Alt+ ඔබන්න F.

මම මෙම ප්ලගිනය නිර්දේශ කරමි: HTML / CSS / JS Prettify , එය සැබවින්ම ක්‍රියාත්මක වේ.

ස්ථාපනය කිරීමෙන් පසුව, කේතය තෝරාගෙන ඔබන්න Ctrl+Shift+H.

කළා!

සාමාන්‍ය තොරතුරක් පමණි. මගේ HTML ස්වයංක්‍රීයව පිළිවෙලට කිරීමට මා කළේ, HTML_Tidy පැකේජය ස්ථාපනය කිරීමයි, ඉන්පසු පහත දැක්වෙන යතුරු බැඳීම පෙරනිමි සැකසුම් වලට එක් කරන්න (මම භාවිතා කරන):

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

මෙය සෑම ඇතුළත් කිරීමක් සමඟම HTML පිළිවෙලට ක්‍රියාත්මක වේ. මේ සඳහා අඩුපාඩු තිබිය හැකිය, මම උත්කෘෂ්ට වීමට තරමක් අලුත් ය, නමුත් එය මට අවශ්‍ය දේ කරන බව පෙනේ :)

HTML සඳහා ප්‍රශ්නය බොහෝ දුරට ඇත, තවද මම ඔබේ ජාවාස්ක්‍රිප්ට් කේතය උත්කෘෂ්ට පෙළ 2 සඳහා ස්වයංක්‍රීයව සංයුති කරන්නේ කෙසේද යන්න පිළිබඳ තොරතුරු ලබා දීමට කැමැත්තෙමි ;

ඔබට ඔබගේ සියලු කේත ( ctrl+ A) තෝරාගත හැකි අතර, යෙදුම තුළ ක්‍රියාකාරීත්වය, reindent ( Edit-> Line-> Reindent) භාවිතා කළ හැකිය, නැතහොත් ඔබට JsFormat හැඩතල ගැන්වීමේ ප්ලගිනය භාවිතා කළ හැකිය Sublime Text 2. උත්කෘෂ්ට පෙළෙහි පෙරනිමි පටිත්ත / ඉන්ඩෙන්ට් සැකසුම්.

https://github.com/jdc0589/JsFormat

ඔබට පහසුවෙන් ස්ථාපනය කල හැක JsFormat පැකේජය පාලන භාවිතා සමග ( Preferences-> Package Control) විවෘත පැකේජය පාලනය පසුව ස්ථාපනය ටයිප් පහරක්enter . ඉන්පසු ටයිප් js formatකර පහර දෙන්න enter, ඔබ ඉවරයි. (පැකේජ පාලකය මඟින් වම් පහළ තීරුවේ සාර්ථකත්වය සහ දෝෂ සහිතව ස්ථාපනය කිරීමේ තත්වය පෙන්වනු ඇත Sublime)

ඔබගේ යතුරු බැඳීම් වලට පහත පේළිය එක් කරන්න ( Preferences-> Key Bindings User)

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

මම ctrl+ alt+ භාවිතා කරමි 2, ඔබට අවශ්‍ය ඕනෑම දෙයක් මෙම කෙටිමං යතුර වෙනස් කළ හැකිය. මෙතෙක්, JsFormatහොඳ ප්ලගිනයක්, එය උත්සාහ කිරීම වටී!

මෙය යමෙකුට උපකාරී වේ යැයි සිතමි.

SublimeHtmlTidy නමින් ප්ලගිනයක් තිබේ

https://github.com/welovewordpress/SublimeHtmlTidy

මට නම් HTML Prettifyවිසඳුම අතිශයින්ම සරලයි. මම HTML Prettify පිටුවට ගියෙමි .

1. අවශ්‍යයි Sublime Package Manager
2. ඇසුරුම් කළමණාකරු මෙහි ස්ථාපනය කිරීම සඳහා උපදෙස් අනුගමනය කළේය
3. cmd + shift + pමෙනුව ගෙන ඒමට ටයිප් කර ඇත
4. ටයිප් කර ඇත prettify
5. HTML prettifyමෙනුවේ තේරීම තෝරන්න

උත්පාතය. සිදු විය. නියම පෙනුමක්

සරලව යන්න

සංස්කරණය කරන්න -> ටැගය -> ලේඛනයේ ස්වයංක්‍රීය හැඩතල ටැග්

මම HTMLBeautify නමින් පැකේජයක් නිර්මාණය කළ අතර එය HTML නැවත ආකෘතිකරණය කිරීමේ හොඳ කාර්යයක් ඉටු කරයි. මම එය 1997 දී නැවත සොයාගත් පර්ල් පිටපතක් මත පදනම් කර ගතිමි - නවීන ටැග් සහිත නවීන ටැග් සමඟ වැඩ කිරීමට මම එය යාවත්කාලීන කළෙමි. :)

එය පරීක්ෂා කර බලා ඔබ සිතන්නේ කුමක්දැයි මට දන්වන්න!

https://github.com/rareyman/HTMLBeautify

මම හිතන්නේ ඔබ සොයන්නේ මෙයයි:

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

අදහස් දැක්වීමේ වරප්‍රසාදය මට තවම ලැබී නැත, එබැවින් මෙය @ පීටර්ගේ පිළිතුරට අදාළ අතිරේක තොරතුරු වේ.

ශීර්ෂ පා I යේ IE කොන්දේසි සහිත අදහස් සම්පුර්ණයෙන්ම පේළියේ නොතිබුනේ නම් HTML බලාපොරොත්තු වූ පරිදි පෙළගස්වා නැති බව මට පෙනී ගියේය.

<!--[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]--> 

ලස්සන විවෘත කේත කෝඩ් ෆෝමැටර් ප්ලගිනයක් ඇත , (නැවත සකස් කිරීම සමඟ) අපිරිසිදු කේත අලංකාර කළ හැකි අතර ඒ සියල්ලම තනි පේළියේ ඇත.

HTML මනාව සකස් කිරීම සඳහා මම අභිරුචි ගොඩනැගීමේ පද්ධතිය සමඟ පිළිවෙලට භාවිතා කරමි .

මගේ පැකේජ / පරිශීලක / නාමාවලිය තුළ මට 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 ස්වයංක්‍රීයව ගොනුව නැවත පූරණය නොකිරීම නිසා ඔබට වෙනත් ගොනුවකට සහ පසුපසට (හෝ වෙනත් යෙදුමකට සහ පසුපසට) මාරු විය යුතු ප්‍රති results ල දැක ගත හැකිය.

මැක්හි මම පිළිවෙලට ස්ථාපනය කිරීම සඳහා මැක්පෝර්ට්ස් භාවිතා කර ඇත, වින්ඩෝස් හි ඔබට එය බාගත කර පිළිවෙලට පිහිටා ඇති තැනීමේ පද්ධතියේ වැඩ කරන නාමාවලිය නියම කළ යුතුය:

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

නැතහොත් එය PATH වෙත එක් කරන්න.

ඔබට කෙටිමං යතුර F12පහසුවෙන් සැකසිය හැකිය !!!

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

විස්තර මෙහි බලන්න .