Trabajar con Visual Studio Code

Introducción

Visual Studio Code es una de las herramientas más utilizadas en el mundo del desarrollo web por lo que también se usa en asignaturas de los ciclos formativos de SMR, DAM, DAW o ASIR.

A continuación se presenta una guía práctica de como usar y configurar Visual Studio Code.

Atajos de teclado para Visual Studio Code

Atajo de teclado	Inglés	Descripción
Ctrl + P		Buscar archivos por nombre.
Ctrl + Shift + P	Command Palette	Acciones. Por ejemplo, transformar un texto a mayúsculas o minúsuclas.
Ctrl + F	Find	Buscar.
Ctrl + Shift + F	Find	Buscar en todo el proyecto. Puedes usar expresiones regulares. Puedes practicar el uso de estas expresiones regulares aquí.
Ctrl + H		Buscar y reemplazar.
Ctrl + Shift + H		Buscar y reemplazar en todo el proyecto.
Alt + ↑		Mueve la línea actual una posición arriba.
Alt + ↓		Mueve la línea actual una posición abajo.
Ctrl + 1		Te sitúa en el panel 1 (izquierdo).
Ctrl + 2		Te sitúa en el panel 2 (derecho en caso de tener 2). Lo crea si no existe.
Ctrl + Alt + ➡		Pestaña actual a la derecha.
Ctrl + Alt + ⬅		Pestaña actual a la izquierda.
Ctrl + G	Go to line	Ir a una línea concreta del código.
Ctrl + D		Buscar y seleccionar.
Alt + Enter		Seleccionar todo lo que coincida en la búsqueda.
Alt + Shift + ↑		Mueve la línea actual una posición arriba.
Alt + Shift + ↓		Mueve la línea actual una posición abajo.
Ctrl + Shift + K		Delete line.
Ctrl + Alt + ↑		Multiplicar cursor una posición hacia arriba.
Ctrl + Alt + ↓		Multiplicar cursor una posición hacia abajo.
Shift + Alt + F	Format	Dar formato al documento.
Ctrl + Ñ		Mostrar/ocultar consola
Ctrl + B	Toggle Sidebar	Mostrar/ocultar barra lateral izquierda
Alt + Click		Insertar cursor
Click central y arrastrar		Seleccionar en vertical

Puedes descargar un PDF con todos los atajos de teclado en inglés aquí.

Consejos para Visual Studio Code

Si usas el click de la rueda del ratón puedes seleccionar en vertical.

Si escribes html:5 y le das al Enter generas una estructura básica de html.

Si escribes ul>li*5 y le das al Enter se te generará el siguiente código:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Configurar Visual Studio Code

Extensiones de Visual Studio Code

Existe la posibilidad de instalar extensiones en Visual Studio Code, yo te recomiendo las siguientes:

• Live Preview: Ver un navegador integrado que se actualiza solo.
• Live Server: Para probar la web en un servidor local de manera rápida y sencilla.
• Error lens: Mostrar los errores en la misma línea donde se escribe.
• Prettier (necesario npm): Indenta de manera correcta.
• ESLint (necesario npm): Errores de JavaScript.
• Stylelint (necesario npm): Errores de estilo.
• Code Runner (necesario npm): Ejecutar código JavaScript.

Configurar Stylelint y Prettier

Primero necesitas instalar la última versión LTS de Node.js que encontrarás en este enlace.

Posteriormente, puedes seguir los pasos del siguiente tutorial para instalar tanto Stylelint como Prettier en tu proyecto.

Con esto podemos conseguir un análisis de nuestro código, el cual nos puede ayudar a mejorar nuestra calidad de código ya que nos avisa de muchos de nuestros errores como se puede ver en la siguiente Figura.

Mensaje de error de Stylelint

Extensiones para trabajar con Markdown

• Markdown All in One
• markdownlint. Deberás añadir en settings.json de Visual Studio Code la siguiente excepción.

"markdownlint.config": {
    "MD022": false
}

Fuentes para programar

• Cascadia Code
• JetBrins Mono
• Fira Code
• Victor Mono

Bibliografía

• Atajos de teclado en Visual Studio Code.