J'ai du code HTML mal formaté que je voudrais reformater. Existe-t-il une commande qui reformatera automatiquement le code HTML dans Sublime Text 2 afin qu'il soit plus beau et plus facile à lire?
J'ai du code HTML mal formaté que je voudrais reformater. Existe-t-il une commande qui reformatera automatiquement le code HTML dans Sublime Text 2 afin qu'il soit plus beau et plus facile à lire?
Réponses:
Vous n'avez pas besoin de plugins pour cela. Sélectionnez simplement toutes les lignes ( Ctrl A) puis dans le menu, sélectionnez Édition → Ligne → Réindentation. Cela fonctionnera si votre fichier est enregistré avec une extension contenant du HTML comme .html
ou .php
.
Si vous le faites souvent, vous pouvez trouver ce mappage de clés utile:
{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }
Si votre fichier n'est pas enregistré (par exemple, vous venez de coller dans un extrait dans une nouvelle fenêtre), vous pouvez définir manuellement la langue de retrait en sélectionnant le menu Affichage → Syntaxe → language of choice
avant de sélectionner l'option de réindentation.
Il existe une demi-douzaine de façons de formater le HTML dans Sublime. J'ai testé chacun des plugins les plus populaires (voir l' écriture que j'ai faite sur mon blog pour plus de détails), mais voici un aperçu rapide de certaines des options les plus populaires:
Avantages:
Les inconvénients:
<script>
blocsAvantages:
Les inconvénients:
<script>
correctement les blocsAvantages:
Les inconvénients:
Avantages:
Les inconvénients:
Avantages:
Les inconvénients:
HTML-CSS-JS Prettify est le gagnant de mon livre. Beaucoup de fonctionnalités intéressantes, pas grand chose à redire.
Le seul paquet que j'ai pu trouver est Tag .
Vous pouvez l'installer à l'aide du contrôle de package. https://sublime.wbond.net
Après avoir installé le contrôle des packages. Accédez au contrôle de package ( Préférences -> Contrôle de package ) puis tapez install
, appuyez sur enter. Tapez ensuite tag
et appuyez sur enter.
Après avoir installé Tag, mettez en surbrillance le texte et appuyez sur le raccourci Ctrl+ Alt+ F.
Indent XML
ou IndentX
entre autres.
Je recommande ce plugin: HTML / CSS / JS Prettify , ça marche vraiment.
Après l'installation, sélectionnez simplement le code et appuyez sur Ctrl+Shift+H.
Terminé!
Juste un conseil général. Ce que j'ai fait pour ranger automatiquement mon code HTML, j'ai installé le package HTML_Tidy, puis ajouté le raccourci clavier suivant aux paramètres par défaut (que j'utilise):
{ "keys": ["enter"], "command": "html_tidy" },
cela exécute HTML Tidy à chaque entrée. Il peut y avoir des inconvénients à cela, je suis moi-même assez nouveau pour Sublime, mais il semble faire ce que je veux :)
Bien que la question concerne le HTML, je voudrais également donner des informations sur la façon de formater automatiquement votre code Javascript pour Sublime Text 2 ;
Vous pouvez sélectionner tout votre code ( ctrl+ A) et utiliser la fonctionnalité in-app, réindenter ( Edit
-> Line
-> Reindent
) ou vous pouvez utiliser le plug-in de formatage JsFormat Sublime Text 2
si vous souhaitez avoir des paramètres plus personnalisables sur la façon de formater votre code pour l'ajouter à les paramètres par défaut de l'onglet / retrait du texte sublime.
https://github.com/jdc0589/JsFormat
Vous pouvez facilement installer JsFormat en utilisant le contrôle de package ( Preferences
-> Package Control
) Ouvrez le contrôle de package puis tapez install, hitenter . Tapez js format
et appuyez enter, vous avez terminé. (Le contrôleur de package affichera l'état de l'installation avec succès et erreurs dans la barre inférieure gauche de Sublime
)
Ajoutez la ligne suivante à vos raccourcis clavier ( Preferences
-> Key Bindings User
)
{ "keys": ["ctrl+alt+2"], "command": "js_format"}
J'utilise ctrl+ alt+ 2, vous pouvez modifier cette touche de raccourci comme vous le souhaitez. Jusqu'à présent, JsFormat
c'est un bon plugin, vaut la peine de l'essayer!
J'espère que cela aidera quelqu'un.
Il y a un plugin appelé SublimeHtmlTidy qui fonctionne plutôt bien
Pour moi, la HTML Prettify
solution était extrêmement simple. Je suis allé à la page HTML Prettify .
Sublime Package Manager
prettify
HTML prettify
sélection dans le menuBoom. Terminé. A fière allure
Allez simplement à
Modifier -> Balise -> Formater automatiquement les balises sur le document
Sublime Text 2 Version 2.0.1, Build 2217
sur Mac. Êtes-vous sûr que c'est une fonctionnalité standard?
<b>somthing</b>
est suivi d'une virgule, la virgule est placée sur une nouvelle ligne, ce qui crée un espace entre quelque chose et la virgule dans une vue de navigateur.
J'ai créé un package appelé HTMLBeautify qui fait un bon travail de reformatage HTML. Je l'ai basé sur un script Perl que j'ai trouvé en 1997 - je l'ai mis à jour pour fonctionner avec toutes les nouvelles balises modernes fangled. :)
Vérifiez-le et faites-moi savoir ce que vous en pensez!
Je pense que c'est ce que vous recherchez:
Je n'ai pas encore le privilège de commenter, il s'agit donc simplement d'informations supplémentaires liées à la réponse de @ peter ci-dessus.
J'ai trouvé que HTML ne s'alignait pas comme prévu si les commentaires conditionnels d' IE dans l'en-tête n'étaient pas complètement en ligne, par exemple à gauche:
<!--[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]-->
Il existe un joli plugin CodeFormatter open source qui (tout au long de la réindentation) peut embellir le code sale même s'il est en une seule ligne.
J'utilise tidy avec un système de construction personnalisé pour embellir le HTML.
J'ai HTMLTidy.sublime-build dans mon répertoire Packages / User /:
{
"cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}
et le fichier tidy_config.cfg dans le même répertoire:
indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0
Et sélectionnez simplement le système de construction et appuyez sur ctrl+ bou cmd+ bpour reformater le contenu du fichier. Un problème mineur avec cela est que ST2 ne recharge pas automatiquement le fichier afin de voir les résultats, vous devez basculer vers un autre fichier et revenir (ou vers une autre application et revenir).
Sur Mac, j'ai utilisé macports pour installer tidy, sur Windows, vous devez le télécharger vous-même et spécifier le répertoire de travail dans le système de construction, où se trouve tidy:
"working_dir": "c:\\HTMLTidy\\"
ou ajoutez-le au CHEMIN.
vous pouvez définir la touche de raccourci F12facilement !!!
{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }
voir détail ici .