¿Qué es la Indentación?
Según la wikipedia:
La indentación es un tipo de notación secundaria utilizado para mejorar la legibilidad del código fuente por parte de los programadores.
Ejemplo de código no indentado, y uno correctamente indentado.
No indentado:
Indentado:
Sitios para indentar nuestro código automáticamente
No es recomendable pero se los dejo de todas formas.
A la hora de programar cualquier cosa, desde un sitio simple hasta un complejo sistema, una regla básica es mantener el código ordenado e indentado, o sea aplicar tabulaciones para que las distintas secciones queden bien separadas a simple vista.
En la realidad es bien sabido que cuanto más extenso es el código más difícil es que esto se respete, generando con el tiempo confusión y problemas.
Tabifier nos permite acomodar código HTML y CSS tan sólo copiandolo y pegándolo en el sitio.
Sitio: https://tools.arantius.com/tabifier
Indentando con Sublime Text
Esta es una forma válida pero hay que tener en cuenta que no siempre funciona tan bien por esa razón tambien les hablaré de plugins en Sublime.
Resultado:
Como pueden observar al costado del body tengo un p pero esa no es la indentación correcta , en mi opinión el reindent funciona cuando el coder ya tiene una forma correcta de indentación y solo quiere ordenarlo.
Utilizando Plugins en Sublime Text
Indentar el código hace que sea más fácil de leer, y por lo tanto, más fácil de ubicar visualmente lo que se busca.
Sublime:
- Si tenemos instalado el Package Control, presionamos Control + Shift + P y nos aparecerá un input donde debemos escribir Package Control Install Package y hacemos clic sobre ella o nos desplazamos con las teclas de movimiento y presionamos intro cuando estemos en Install Package.
2. Ahora escribimos el nombre del plugin en este caso CodeFormatter lo seleccionamos y empezará la instalación.
Usando Sublime Code Formatter ↩
Simple:
3. Selecciona las líneas que deseas indentar, si queremos seleccionar todo utilizamos el atajo Ctrl + A
4. Presiona Ctrl +Alt + F
Antes:
Después:
Lo que recomiendo usar es el CoddeFormater me da una mejor visualización del codigo aunque existe otro llamado Aligment se los dejo como tarea y me dejan sus comentarios.