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

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.

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.

{
  //Usar emmet cuando estamos codificando con React
  "files.associations": {
      "*.js": "javascriptreact"
  },
  //Detectar HTML en una cadena de Javascript
  "emmet.syntaxProfiles":{
      "javascript":"html"
  },
  "emmet.includeLanguages":{
     "javascript":"html"
  },
  // Ir directamente a la definición de una función o variable al hacer ctrl + click sobre ella
  "editor.multiCursorModifier": "alt",
  // Activar wordwrap por defecto
  "editor.wordWrap":"on",
  // Salvar un fichero cuando pierda el foco
  "files.autoSave":"onFocusChange",
  // Formateado de código automático
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.mouseWheelZoom": true,
  "workbench.tree.indent": 25,
  "workbench.tree.renderIndentGuides": "always",
  //Añadimos una línea roja sobre la pestaña activa
  "workbench.colorCustomizations": { 
     "tab.activeBorderTop": "#ff0a0a" 
  },
}

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:

ctrl + shift + p => split editor

Extensiones

Indispensables:

Path Intelligense by Christian Kohler → Ayuda en el autocompletado de las rutas. Muy útil en React.
Open in Browser by TechEr → Pulsando alt+b se abriá el código HTML que estás haciendo en un navegador web.
Material Icon Theme by Philipp Kief → Redefine los iconos visuales del menú ficheros
Color HighLighting by Sergii N → Muestra un previo del color seleccionado
Auto Rename Tag → renombra automáticamente la otra parte de una etiqueta al editar su nombre.
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.

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.

Accede a tu cuenta