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

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

Preferencias

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

Curso de Visual Studio Code 3

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

Shortcuts de Visual Studio Code

  • Buscar en archivos: ctrl + shift + f
  • 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.
    • Git (ctrl + shift + g)
    • Debug (ctrl + shift + d)
    • Extensions (ctrl + shift + x). Para ir al marketplace.
Curso de Visual Studio Code 4

Extensiones

  • Path Intelligense by Christian Kohler -> Ayuda en el autocompletado de las rutas. Muy útil en React.
  • 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.
  • Open in Browser(alt + b). En linux este shortcut no funcionó y tuve que usar alt + shift + b.
  • En el ordenador de origen: ctrl + shift + p → sync → Advanced options → Sync: Open Settings
  • Material Icon Theme by Philipp Kief -> Redefine los iconos visuales del menú ficheros
  • Project Manager -> Permite gestionar los projectos abiertos más cómodamente.
  • Bracket Pair Colorizer -> Resalta la apertura y cierre de etiquetas.
  • Color HighLighting -> Muestra un previo del color seleccionado
  • ES7 React/Redux/GraphQL/React-Native snippets by dsznajder -> Snippets para Javascript y React.
    • ctrl + shift + p -> ES7 -> Muestra todos los comandos disponibles.
    • rfc + enter -> React Functional Component.
    • clg + enter -> console.log
    • imp + enter -> import module
  • Todo Tree by Gruntfuggly -> Permite tener un listado de tareas vinculado a nuestro proyecto.
  • Debugger for Chrome by Microsoft -> Permite debugar una aplicación poniendo los puntos de parada en el Visual Studio Code. Consideraciones:
    • Será necesario desplegar la aplicación en el servidor (usando localhost).
    • Debemos crear el fichero de configuración: ctrl + shift + p -> Debug: Open launch.json. Debemos asegurarnos de que el puerto definido en el fichero de configuración coincide con el puerto donde se va a ejecutar la aplicación.
    • Finalmente, ejecutamos la aplicación con npm start, y lanzamos el debug con F5.
  • 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.
  • Darcula by rokoroku. Tema de IntellJ.
  • Prettier – Code formatter. Formatea el código con alt + shift + f. Es más potente y capaz de avanzar a más formatos que el formateador que que viene por defecto en el visual studio code.

Usar Emmet

Visual Studio Code viene con Emmet de serie:

Ejemplo: 
ul > li > a

Split View

Puedes usar el botón de split view:

Curso de Visual Studio Code 5

ctrl + shift + p => split editor

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

Crear tus propios Snippets

File -> Preferences -> User Snippets -> New Global Snippets File

{
"Un Snippet de Ejemplo": {
"scope": "html",
"prefix": "ejemplo",
"body": [
 "<p>",
"<a href=\"$1\">$2</a>",
"<p>"
],
}
}

Aviso Legal | Política de privacidad