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

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

Curso de Visual Studio Code 4

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

Curso de Visual Studio Code 5

ctrl + shift + p => split editor

Extensiones

Indispensables:

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