html - teclas - emmet sublime text 3
¿Cómo establecer el formato de sangría automática HTML en Sublime Text 3? (4)
Tengo una pregunta mientras escribo código HTML en Sublime Text 3. Solo quiero establecer el formato de sangría automática de HTML. Por ejemplo, cuando escribo una etiqueta p como en el código, la sangría funciona así.
<p>
Hello world!
</p>
Pero quiero escribir como en código en lugar de arriba.
<p>
Hello world!
</p>
Y no solo p tag también ul, ol, etc.
¿Cómo puedo establecer el formato de sangría automática de HTML en Sublime Text 3?
Crear un Keybinding
Para aplicar sangría automática en Sublime text 3 con una combinación de teclas, intente ir a
Preferencias> Enlaces de teclas - usuarios
Y agregando este código entre los corchetes
{"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}}
establece shift + alt + f para ser su sangría automática de página completa.
Fuente here
Nota: si esto no funciona correctamente, entonces debe convertir su sangría en pestañas. También los comentarios en su código pueden llevar su código al nivel de sangría incorrecto y pueden tener que ser movido manualmente.
Esta es una adaptación de la respuesta anterior, pero debería ser más completa.
Para que quede claro, esto es para volver a introducir las características de autoincrustación previas cuando los archivos HTML están abiertos en Sublime Text. Entonces, cuando termina una etiqueta, automáticamente sangra para el siguiente elemento.
Usuarios de Windows
Vaya a C:/Program Files/Sublime Text 3/Packages extrae HTML.sublime-package como si fuera un archivo zip en un directorio.
Abra Miscellaneous.tmPreferences y copie este contenido en el archivo
<?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>
A continuación, vuelva a comprimir el archivo como HTML.sublime-package y reemplace el HTML.sublime-package existente con el que acaba de crear.
Cierre y abra Sublime Text 3 y listo.
Esto también me estaba molestando, ya que esta era una característica estándar en Sublime Text 2, pero de alguna manera la sangría automática ya no funcionaba en Sublime Text 3 para archivos HTML.
Mi solución fue encontrar el archivo Miscellaneous.tmPreferences de Sublime Text 2 (que se encuentra en% AppData% / Roaming / Sublime Text 2 / Packages / HTML) y copiar esas configuraciones en el mismo archivo para ST3.
Ahora el manejo de paquetes se ha vuelto más difícil para ST3, pero afortunadamente puede agregar los archivos a su carpeta% AppData% / Roaming / Sublime Text 3 / Packages y sobrescriben la configuración predeterminada en el directorio de instalación. Simplemente guarde este archivo como "% AppData% / Roaming / Sublime Text 3 / Packages / HTML / Miscellaneous.tmPreferences" y la sangría automática funciona de nuevo como lo hizo en 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>
Una opción es escribir [comando] + [cambiar] + [p] (o el equivalente) y luego escribir ''sangrado''. El resultado superior debería ser ''Indendtation: Reindent Lines''. Presione [enter] y formateará el documento.
Otra opción es instalar el complemento de Emmet ( http://emmet.io/ ), que proporcionará no solo un mejor formato, sino también una miríada de otras características increíbles. Para obtener el resultado que está buscando utilizar Sublime Text 3 con el plugin de Emmet, solo necesita lo siguiente:
p [tab][enter] Hello world!
Cuando escribe p [tab] Emmet lo expande a:
<p></p>
Presionando [enter] luego se expande para:
<p>
</p>
Con el cursor sangrado y en la línea entre las etiquetas. Lo que significa que escribir texto da como resultado:
<p>
Hello, world!
</p>