HTML y CSS

Consejos y Trucos para Visual Studio Code

Para desarrollo web, el editor que siempre había/he utilizado ha sido Sublime Text, me gusta por ser sencillo y ligero.

Pero ahora que estoy siguiendo la Guía Completa para Aprender Desarrollo Web desde Cero, me estoy actualizando y entre ellas ha sido aprender el uso de Visual Studio Code.

Visual Studio Code es un editor de código creado por Microsoft.

Con esto aquí les dejo algunos trucos que ido aprendiendo.

Emmet Abreviation.

Emmet está instalado en Visual Studio y nos permite hacer las cosas más rápido. Son abreviaciones con las que puedes empezar una línea de código y automáticamente se autocompletará dependiendo de lo que escribas.

Te recomiendo guardar en tu barra de marcadores este cheat sheet de Emmet Abreviation para futuras referencias.

Escribe la primera letra de una etiqueta de html y autocompleta automáticamente con TAB o ENTER.

TECLARESULTADO
p + <p> </p>
p + <p></p>
h2 + <h2></h2>
img + <img src="" alt="">
! + <!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=

”width=device-width, initial-
scale=1.0”>
<meta http-equiv=”X-UA-Compatible”

content=”ie=edge”>
<title>Document</title>
</head>
<body>
</body>
</html>

*También puedes usar la tecla ENTER en lugar de TAB                                          

Comentar un párrafo o sección

TECLARESULTADO
+ ?/ Convierte un párrafo de html en comentario

Instala Extension Live Server

Para instalar:

  1. Click en Extensions
  2. Buscar live-server
  3. Seleccionar
  4. Click en Install
  5. Reload para activar

Esto permite visualizar los cambios hechos en el código de manera automática en el navegador, en otras palabras; cada vez que hagas un cambio en tu código automáticamente se verá reflejado en el navegador, sin siquiera refrescar o actualizar el navegador.

Saltas a la siguiente línea cuando estás en medio de un atajo de un párrafo

TECLARESULTADO
+ Se va a la línea siguiente

Generar párrafo de texto demo

TECLARESULTADO
lorem + Lorem ipsum dolor sit amet
consectetur
adipisicing elit. Recusandae,

dignissismos, assumenda quas
tempora
illo vitae accusamus
expedita blanditiis, illum quae

consequuntur
animi numquam ducimus explicabo

sit voluptate quasi provident
voluptatubus?
lorem500 + 500 palabras de texto demo

Corto para copiar una línea de código en la línea siguiente

TECLARESULTADO
Posicionarse en cualquier parte de la línea
+ +
Copia en el siguiente
párrafo la línea de código
donde tu cursor estaba
posicionado

Para saltar tu posicionamiento de una palabra a otra

TECLARESULTADO
+ Salto de posicionamiento
hacia siguiente palabra

Posicionarse al inicio o final de un renglón

TECLARESULTADO
+ Se posiciona al final o inicio del renglón

Mover una línea completa entre renglones

TECLARESULTADO
+ Mueve toda la línea de Código
hacia arriba o abajo

Seleccionar y cambiar varias palabras al mismo tiempo

TECLARESULTADO
+ d + Palabra nuevaCambiar nombre de palabra de varios
renglones al mismo tiempo

Seleccionar párrafo y retroceder una sangría

TECLARESULTADO
Seleccionar texto + + Retrocede
todo el párrafo
un espacio