Comment ranger l'indentation d'un fichier HTML dans le VI?

130

Comment corriger l'indentation de ses énormes fichiers html qui étaient tous foirés?

J'ai essayé la "gg=Gcommande habituelle , qui est ce que j'utilise pour corriger l'indentation des fichiers de code. Cependant, cela ne semblait pas fonctionner correctement sur les fichiers HTML. Il a simplement supprimé toute la mise en forme.

J'ai également essayé de configurer :filetype = xml, pour voir si le faire croire qu'il s'agissait d'un fichier XML aiderait, mais cela ne l'a toujours pas fait.

html vim vi indentation mmcdole
la source

Réponses:

91

Avec à l' filetype indent onintérieur de mon .vimrc, Vim indente assez bien les fichiers HTML.

Exemple simple avec un shiftwidthde 2:

<html>
  <body>
    <p>
    text
    </p>
  </body>
</html>
moinudin
la source
15
Copiez collez le html de cette page de questions dans un fichier html. Ouvrez avec VIM, tapez "set smartindent", puis "gg = G" et cela ne corrige pas l'indentation du fichier.
mmcdole
15
Ça marche pour moi. set ft = html <cr> set si <cr> gg = G <cr>. Formate assez bien cette page.
Don Reba
5
+1 a vérifié que "filetype indent on / off" active ou désactive la magie.
Wim Coenen
4
Oui, après avoir défini le retrait intelligent, filetype = html et et et le filetype ident, cela a fonctionné pour moi.
mmcdole
22
De chovy.com/web-development/fix-indentation-and-tabs-in-vim a trouvé que j'avais besoin de recharger le fichier avec: e après l'indentation du type de fichier.
Marc Stober
189

Il y a plusieurs choses qui doivent toutes être en place. Juste pour les résumer tous en un seul endroit:

Définissez l'option suivante:

:filetype indent on
:set filetype=html           # abbrev -  :set ft=html
:set smartindent             # abbrev -  :set si

Ensuite, déplacez le curseur vers le haut du fichier et indentez jusqu'à la fin: gg =G
ou sélectionnez le texte souhaité à indenter et appuyez =pour l'indenter.

Tylerl
la source
@tyrel, merci, mais pour moi ne fonctionne pas .. Voici le contenu du fichier: pastebin.com/gagia8W2 . Le fichier est appelé home.html. Je n'ai aucun problème pour indenter les fichiers .php. Ici, vous avez mon .vimrc: pastebin.com/FAJ0MCA9
ziiweb
1
Existe-t-il un moyen de définir cela dans le .vimrc? Je ne veux pas lui dire à chaque fois que j'ouvre un fichier HTML que c'est un fichier HTML. Merci beaucoup pour le raccourci gg, =, G. Vraiment pratique.
zakishaheen
1
Notez que dans vim 7.4les paramètres d'indentation défaut échouera pour cet exemple, comme html, bodyet pne sont pas en retrait par défaut. Voyez cette réponse .
Cory Klein
2
smartindentn'est pas nécessaire. De plus, il est réglé pour C et C ++, je préfère utiliser plus général à la autoindentplace.
Kos
Cela fonctionne très bien avec vim7.4. @tylerl existe-t-il un moyen de rendre cette configuration permanente pour les fichiers html en 7.4?
xaph
62

Le principal problème lors de l'utilisation de l'indentation intelligente est que si le XML (ou HTML) se trouve sur une ligne, car il peut finir par revenir d'une requête curl, gg=Gcela ne fera pas l'affaire. Au lieu de cela, je viens de faire l'expérience d'une bonne indentation en utilisant tidy directement appelé depuis VI:

:!tidy -mi -xml -wrap 0 %

Cela indique essentiellement au VI d'appeler tidy pour nettoyer un fichier XML qui n'entoure pas les lignes pour les faire tenir sur les lignes de 68 caractères par défaut. J'ai traité un gros fichier XML de 29 Mo et cela a pris 5 ou 6 secondes. Je suppose que pour un fichier HTML, la commande devrait donc être:

:!tidy -mi -html -wrap 0 %

Comme mentionné dans les commentaires, tidyest un outil de base que vous pouvez trouver sur de nombreux systèmes Linux / MacOS de base. Voici la page du projet au cas où vous souhaiteriez l'avoir mais pas: HTML Tidy .

Oscar
la source
1
Je ne pense pas que le HTML soit nécessaire, car il est par défaut html
lsiebert
4
D'accord avec vous @Isieber. Cependant, je suppose que cela facilite la compréhension de la logique et pourrait même être considéré comme une bonne pratique par certaines personnes.
oscaroscar
2
Pour info, ranger les étouffements si le HTML comprend SVG (par exemple, des graphiques, etc.).
Alex Quinn
1
Oui, si le code html est sur une seule ligne, la commande vim indent ne fonctionnera pas!
wisbucky
Qu'est-ce que ranger autre qu'un mot dans un dictionnaire? Ce n'est pas une réponse complète sans lien avec le projet.
Bruno Bronosky
49

Comme l'explique tylerl ci-dessus, définissez les paramètres suivants:

:filetype indent on
:set filetype=html
:set smartindent

Toutefois, notez que dans vim 7.4 les balises HTML html, head, bodyet d'autres sont pas en retrait par défaut. Cela a du sens, car presque tout le contenu d'un fichier HTML relève de ces balises. Si vous le souhaitez vraiment, vous pouvez obtenir ces balises en retrait comme ceci:

:let g:html_indent_inctags = "html,body,head,tbody"

Voir "L' indentation HTML ne fonctionne pas dans Vim 7.4 compilé, des idées? " Et "Un script d'indentation html alternatif " pour plus d'informations.

Cory Klein
la source
c'est le gagnant de mon livre! Utiliser Vim 7.4 sous Windows et cela fonctionne à merveille! : D
Michael J
12

C'est ma solution qui fonctionne bien pour ouvrir du HTML "laid" d'une manière bien espacée:

vim fileIn.html -c "set sw=2 | %s/>/>\r/ | execute 'normal gg=G' | set nohlsearch | g/^\\s*\$/d"
  • La swcommande est due au fait que ma valeur par défaut est 4, ce qui est trop élevé pour HTML.
  • La partie suivante ajoute une nouvelle ligne (Vim pense que c'est un retour chariot, soupir) après chaque élément ( >).
  • Puis ré-indenter le fichier entier avec =.
  • Puis éteignez >(puisque j'ai set hlsearchdans mon vimrc).
  • Ensuite, supprimez toutes les lignes vides / d'espaces uniquement (voir « Vim supprimer les lignes vides » pour plus, également ceci est double-échappé car il est dans le shell).

Vous pouvez même ajouter | wq! fileOut.htmlà la fin si vous ne voulez pas du tout entrer dans Vim, mais simplement nettoyer le fichier.

adam_0
la source
Solution soignée! Je l'ai modifié en :%s/>\s*/>\r/g(ajouté un gpour le remplacement global et \s*pour supprimer les espaces de fin). J'ai également ajouté :%s/</\r</gpour ajouter une nouvelle ligne avant le crochet ouvert. Sinon, les balises comme <td>foo</td>seraient divisées comme <td>et foo</td>.
wisbucky
Bon point, j'ai activé le remplacement global par défaut, c'est pourquoi ce n'est pas dans ma solution.
adam_0
7

J'utilise ce script: https://github.com/maksimr/vim-jsbeautify

Dans le lien ci-dessus, vous avez toutes les informations:

  1. Installer
  2. Configurer (copie du premier exemple)
  3. Courir :call HtmlBeautify()

Fait le travail à merveille!

SimonW
la source
3
haha, pourquoi voudriez-vous utiliser node + js pour nettoyer le html dans vim, qui a cette capacité intégrée depuis plus longtemps que node existe même ... me dérange ...
mb21
4

Avez-vous essayé d'utiliser le script d'indentation HTML sur le site Vim?

JaredPar
la source
+1, je n'ai pas vu ça. Ce serait bien si je n'avais pas besoin d'exécuter un script, mais il semble que ce soit le seul moyen.
mmcdole
Ce script est désormais obsolète et une version plus récente est fournie avec vim (par exemple /usr/share/vim/vim74/indent/html.vim). "04 juillet 2014: Vim 7.4.356 ou version ultérieure inclut un descendant de ce script (le script officiel est maintenant maintenu par Bram et inclut des changements massifs)"
wisbucky
4

Voici une solution lourde qui vous permet de mettre en retrait, ainsi que toutes les jolies impressions HTML dont vous ne voulez pas nécessairement vous soucier pendant que vous éditez.

Tout d'abord, téléchargez Tidy . Assurez-vous d'ajouter le binaire à votre chemin afin de pouvoir l'appeler depuis n'importe quel endroit.

Ensuite, créez un fichier de configuration décrivant votre saveur HTML préférée. La documentation n'est pas excellente pour Tidy, mais voici un aperçu et une liste de toutes les options . Voici mon fichier de configuration:

bare: yes
break-before-br: no
clean: yes
drop-proprietary-attributes: yes
fix-uri: yes
indent-spaces: 4
indent: yes
logical-emphasis: yes
markup: yes
output-xhtml: yes
quiet: yes
quote-marks: yes
replace-color: yes
tab-size: 4
uppercase-tags: no
vertical-space: yes
word-2000: yes
wrap: 0

Enregistrez-le tidyrc_html.txtdans votre ftplugindossier (sous vimfiles).

Encore un fichier: ajoutez la ligne suivante à (ou créez) html.vim, également dans ftplugin:

map <leader>tidy :%! tidy -config ~/vimfiles/ftplugin/tidyrc_html.txt <CR>

Pour l'utiliser, ouvrez simplement un fichier HTML et tapez /tidy. (C'est /la <leader>clé.)

Voilà! Ce n'est en aucun cas une solution rapide, mais maintenant vous êtes un peu mieux équipé pour éditer ces énormes fichiers HTML en désordre.

Maki
la source
2

Vous pouvez intégrer automatiquement tidy et html-beautify en installant le plugin vim-autoformat . Après cela, vous pouvez exécuter le formateur installé avec une seule touche.

Chiel ten Brinke
la source
0

J'ai essayé la commande habituelle "gg = G", qui est ce que j'utilise pour corriger l'indentation des fichiers de code. Cependant, cela ne semblait pas fonctionner correctement sur les fichiers HTML. Il a simplement supprimé toute la mise en forme.

Si l'autoformat / indentation de vim gg=G semble être "cassé" (comme l'indentation à gauche de chaque ligne), il est fort probable que le plugin d'indentation n'est pas activé / chargé. Cela devrait vraiment donner un message d'erreur au lieu de simplement faire une mauvaise indentation, sinon les utilisateurs pensent simplement que la fonction de mise en forme automatique / indentation est horrible, alors qu'elle est en fait plutôt bonne.

Pour vérifier si le plugin d'indentation est activé / chargé, exécutez :scriptnames. Voir si .../indent/html.vimest dans la liste. Sinon, cela signifie que le plugin n'est pas chargé. Dans ce cas, ajoutez cette ligne à ~/.vimrc:

filetype plugin indent on

Maintenant, si vous ouvrez le fichier et exécutez :scriptnames, vous devriez voir .../indent/html.vim. Ensuite, exécutez gg=G, ce qui devrait faire le bon formatage automatique / retrait maintenant. (Bien qu'il n'ajoute pas de nouvelles lignes, donc si tout le code html est sur une seule ligne, il ne sera pas en retrait).

Remarque: si vous exécutez :filetype plugin indent onsur la ligne de commande vim au lieu de ~/.vimrc, vous devez rouvrir le fichier:e .

De plus, vous n'avez pas à vous soucier des paramètres autoindentet smartindent, ils ne sont pas pertinents pour cela.

wisbucky
la source