Comment définir le format HTML Auto Indent sur Sublime Text 3?
J'ai une question pendant que j'écris du code HTML sur Sublime Text 3. Je souhaite simplement définir le format HTML à retrait automatique. Par exemple, lorsque j'écris une balise p comme sous code, l'indentation fonctionne comme ça.
<p>
Hello world!
</p>
Mais je veux écrire comme sous code au lieu de ci-dessus.
<p>
Hello world!
</p>
Et pas seulement p tag aussi ul, ol et etc.
Comment définir le format HTML avec mise en retrait automatique sur Sublime Text 3?
Une option consiste à taper [commande] + [shift] + [p] (ou l'équivalent), puis à taper 'indentation'. Le meilleur résultat devrait être 'Indendtation: Reindent Lines'. Appuyez sur [Entrée] pour formater le document.
Une autre option consiste à installer le plug-in Emmet ( http://emmet.io/ ), qui fournira non seulement un meilleur formatage, mais également une myriade d'autres fonctionnalités incroyables. Pour obtenir le résultat recherché avec Sublime Text 3 avec le plug-in Emmet, il suffit de:
p [tab][enter] Hello world!
Lorsque vous tapez p [tab], Emmet le développe comme suit:
<p></p>
Appuyez sur [Entrée] puis développez-le pour:
<p>
</p>
Avec le curseur en retrait et sur la ligne entre les balises. Cela signifie que la saisie de texte entraîne:
<p>
Hello, world!
</p>
Créer un raccourci clavier
Pour mettre automatiquement en retrait le texte Sublime 3 avec une liaison de clé, allez à
Préférences> Liaisons de touches - utilisateurs
Et en ajoutant ce code entre les crochets
{"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}}
ça met shift + alt + f être votre retrait automatique de pleine page.
Source ici
Remarque: Si cela ne fonctionne pas correctement, vous devez convertir votre indentation en tabulations. Les commentaires dans votre code peuvent également pousser votre code au mauvais niveau d'indentation et peuvent devoir être déplacés manuellement.
Ceci est une adaptation de la réponse ci-dessus, mais devrait être plus complète.
Pour être clair, il s’agit de réintroduire les fonctions d’auto-retrait précédentes lorsque les fichiers HTML sont ouverts dans Sublime Text. Ainsi, lorsque vous terminez une balise, elle se met automatiquement en retrait pour l'élément suivant.
tilisateurs Windows
Aller à C:\Program Files\Sublime Text 3\Packages Extraire HTML.sublime-package Comme s'il s'agissait d'un fichier Zip dans un répertoire.
Ouvrez Miscellaneous.tmPreferences Et copiez ce contenu dans le fichier.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.Apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>name</key>
<string>Miscellaneous</string>
<key>scope</key>
<string>text.html</string>
<key>settings</key>
<dict>
<key>decreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>batchDecreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>increaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>batchIncreaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>bracketIndentNextLinePattern</key>
<string><!DOCTYPE(?!.*>)</string>
</dict>
</dict>
</plist>
Ensuite, recompressez le fichier en tant que HTML.sublime-package Et remplacez le HTML.sublime-package Existant par celui que vous venez de créer.
Fermez et ouvrez Sublime Text 3 et vous avez terminé!
Cela me dérangeait aussi, car il s'agissait d'une fonctionnalité standard de Sublime Text 2, mais l'indentation automatique ne fonctionnait plus dans Sublime Text 3 pour les fichiers HTML.
Ma solution a été de rechercher le fichier Miscellaneous.tmPreferences de Sublime Text 2 (situé sous% AppData%/Roaming/Sublime Text 2/Packages/HTML) et de copier ces paramètres dans le même fichier pour ST3.
Maintenant, la gestion des paquets est devenue plus difficile pour ST3, mais heureusement, vous pouvez simplement ajouter les fichiers à votre dossier% AppData%/Roaming/Sublime Text 3/Packages et ils écraseront les paramètres par défaut du répertoire d'installation. Enregistrez simplement ce fichier en tant que "% AppData%/Roaming/Sublime Text 3/Packages/HTML/Miscellaneous.tmPreferences" et le retrait automatique fonctionne à nouveau comme dans ST2.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.Apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>name</key>
<string>Miscellaneous</string>
<key>scope</key>
<string>text.html</string>
<key>settings</key>
<dict>
<key>decreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>batchDecreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>increaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>batchIncreaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>bracketIndentNextLinePattern</key>
<string><!DOCTYPE(?!.*>)</string>
</dict>
</dict>
</plist>