Curso de Visual Studio Code

¿Qué es Visual Studio Code?

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.

Shortcuts de Visual Studio Code

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 Copy

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).

{
  "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
  },
  "editor.tabSize": 2, // Valor de tabulación correcto para el formateador Prettier que instalaremos más adelante
}

Funcionalidades nativas de Visual Studio Code

Extensiones Copy

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.
• Live Server → Permite visualizar nuestro código HTML en un servidor web. Como el atajo es un poco engorroso, podemos sobreescribirlo siguiendo los siguientes pasos:
  1. Pulsamos ctrl + shift + p
  2. Live Server: Open With Live Server
  3. Pulsamos en el engranaje que aparece
  4. Podemos asociar el atajo del teclado alt + b
• 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.
• Prettier → Mejora el formateo de código del Visual Studio code.
• Quokka.js → Nos permite ejecutar nuestro código Javascript directamente en la consola y ver un previo de los resultados de nuestros logs mientras los estamos ejecutando. Para lanzarlo podemos pulsar ctrl + j, q. Será muy útil en los primeros pasos del curso de programación con Javascript. Como el atajo es un poco engorroso, podemos sobreescribirlo siguiendo los siguientes pasos:
  1. Pulsamos ctrl + shift + p
  2. Buscamos: Quokka.js: Start on Current File
  3. Pulsamos en el engranaje que aparece
     .
  4. Podemos usar el atajo alt + q, que seguro que no está cogido.

• Específicas de React:
  • vscode-styled-components by Julien Poissonnier → permite visualizar correctamente el resaltado de sintaxis cuando usemos el módulo de React styled components.
  • VSCode React Component Generator

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 → Utiliza inteligencia artificial para autocompletar el código y dar soluciones a problemas. Es de pago. Sería útil vincular el chat rápido de copilot (Chat: Open Quick Chat (Github Copilot)) a un atajo del teclado (alt + c en mi caso), para ejecutarlo más cómodamente.
• Todo Tree by Gruntfuggly → Permite tener un listado de tareas vinculado a nuestro proyecto.
• 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.