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

ctrl + shift + p → Preferences: Open User Settings → Iconito en la esquina superior derecha

Editamos el objeto JSON que aparece.

{
  //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",
}

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
Github Copilot by GitHub → Autocompleta el código con inteligencia artificial.
Auto Rename Tag → renombra automáticamente la otra parte de una etiqueta al editar su nombre.
Rainbow Brackets by 2gua → Colorea las llaves de apertura y cierre.
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.
npm by Microsoft → Muestra un panel para poder ejecutar cómodamente los scripts del package.json.
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.

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