Curso de Visual Studio Code

¿Qué es Visual Studio Code?

Es un editor de código fuente desarrollado por Microsoft y disponible para Windows, Linux y Mac. Es muy completo y rápido, entre las funcionalidades que tiene están: autocompletado, restaltado de sintaxis, formateado automático de código, atajos del teclado personalizables, interfaz visual personalizable, soporte para git integrado o la capacidad de aumentar sus funcionalidades mediante extensiones.

Instalación

En este enlace podemos descargar el Visual Studio Code.

Para que apareczca un menú contextual que nos permita abrir carpetas y ficheros utilizando el Visual Studio Code, debemos marcar las siguientes checks durante el proceso de instalación.

Curso de Visual Studio Code 1
Curso de Visual Studio Code 2

Shortcuts de Visual Studio Code

  • Ir al archivo → ctrl + p
  • Abrir terminal → ctrl + ñ
  • Toggle word wrap → alt + z
  • Selección múltiple → ctrl + d
  • Cursor múltiple → alt + click
  • Comentar / descomentar código → ctrl + Ç
  • Botón derecho sobre la pestaña → Open container folder
  • Accesos de la sidebar:
    • Explorador de ficheros (ctrl + shift + e)
    • Búsqueda (ctrl + shift + f) Pulsando en la flechita desplegaremos la posibilidad de reemplazar. Nota: ctrl + f busca algo en el propio archivo.
    • Git (ctrl + shift + g)
    • Debug (ctrl + shift + d)
    • Extensions (ctrl + shift + x). Para ir al marketplace.

Curso de Visual Studio Code 3

Paleta de comandos (ctrl + shift + p)

  • Envolver una palabra: Selecciono la palabra que quiero envolver -> wrap with abreviation
  • View: Toggle Menu Bar
  • View: Toggle Status Bar
  • View: Toggle Full Screen
  • View: Toggle Side Bar Visibility

User settings

Su configuración nos permitirá afinar algunos comportamientos de Visual Studio Code para ser más productivos (autosalvado, autoformato, autocompletado en en proyectos de ReactJS).

Rueda dentada de la esquina inferior izquierda → Setting (Ajustes)→ Iconito en la esquina superior derecha → Pegamos el código que muestro más abajo en el lugar del que había.

Curso de Visual Studio Code 4
{
  "files.associations": {
      "*.js": "javascriptreact" //Usar emmet cuando estamos codificando con React
  },
  "emmet.syntaxProfiles":{
      "javascript":"html" //Detectar HTML en una cadena de Javascript
  },
  "emmet.includeLanguages":{
     "javascript":"html"
  },
  "editor.multiCursorModifier": "alt",  // Ir directamente a la definición de una función o variable al hacer ctrl + click sobre ella
  "editor.wordWrap":"on",  // Activar wordwrap por defecto
  "files.autoSave":"onFocusChange", // Salvar un fichero cuando pierda el foco
  "editor.formatOnSave": true, // Formateado de código automático
  "editor.formatOnPaste": true,
  "editor.mouseWheelZoom": true,
  "workbench.tree.indent": 25,
  "editor.linkedEditing": true, // Al renombrer una etiqueta, se renombra la pareja
  "workbench.tree.renderIndentGuides": "always",
  "editor.guides.bracketPairs": true, // Añade coloreado a los pares de llaves y paréntesis
  "editor.cursorSmoothCaretAnimation": "on", // El cursor hará una transición animada al cambiar de posición
  "workbench.colorCustomizations": { 
     "tab.activeBackground": "#f77754" //Añadimos una línea roja sobre la pestaña activa

  },
}

Funcionalidades nativas de Visual Studio Code

Usar Emmet

Visual Studio Code viene con Emmet de serie:

Ejemplos: 
div#amor
div.amor
ul>li*5>a

Split View

Puedes usar el botón de split view:

Curso de Visual Studio Code 5

ctrl + shift + p => split editor

Extensiones

Indispensables:

  • Path Intelligense by Christian Kohler → Ayuda en el autocompletado de las rutas. Mejora el autocompletado nativo de VSC cuando usamos inicializadores de aplicaciones como Vite, etc.
  • Open in Browser by TechEr → Pulsando alt+b se abriá el código HTML que estás haciendo en un navegador web.
  • Live Server by Ritwick Dey
  • Material Icon Theme by Philipp Kief → Redefine los iconos visuales del menú ficheros
  • Color HighLighting by Sergii N → Muestra un previo del color seleccionado
  • ES7 React/Redux snippets by dsznajder → Añade algunos snippets útiles, como:
    • clg para hacer un console.log.
    • rafce para crear el código de un componente funcional.
  • ESLint by Microsoft → Te hace recomendaciones, en los proyectos donde ha sido configurado (como los creados con create-react-app) para mejorar tu código y evitar errores.
  • Indent Rainbow → Te resalta con diferentes colores las tabulaciones del código.
  • Copy With Imports → Al pegar un código, si este utiliza imports, estos son añadidos también.
  • Específicas de React:

Interesantes:

  • ftp-simple by humy2833 → Permite subir un proyecto a internet cómodamente. El comando ftp-simple config es para configurar la conexión. Luego podemos subir a internet pulsando con el botón derecho sobre la carpeta deseada.
  • Project Manager by Alessandro Fragnani → Permite gestionar los projectos abiertos más cómodamente.
  • Github Copilot by GitHub → Autocompleta el código con inteligencia artificial. Actualmente es de pago.
  • Todo Tree by Gruntfuggly → Permite tener un listado de tareas vinculado a nuestro proyecto.
  • vscode-styled-components by Julien Poissonnier → permite visualizar correctamente el resaltado de sintaxis cuando usemos el módulo de React styled components.
  • Bookmarks by Alessandro Fragnani → Permite marcar una líneas de código para saltar entre ellas. ctrl + alt + k: crea un bookmark. ctrl + alt + j: salta entre bookmarks.
  • Git Graph → Permite ver el árbol de github de manera visual.