Visual Studio Code
Diseño Web

Shortcuts

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

      search en visual studio code
    • Git (ctrl + shift + g)
    • Debug (ctrl + shift + d)
    • Extensions (ctrl + shift + x). Para ir al marketplace.

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.
  • Material Icon Theme by Philipp Kief -> Redefine los iconos visuales del menú ficheros
  • Project Manater -> 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 visual studio code todos
  • 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.

Emmet

Visual Studio Code viene con Emmet de serie:

Ejemplo: ul > li > a

Split View

Puedes usar el botón de split view:

visual studio code split view

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>"
],
}
}
ç

Usar Emmet por defecto cuando editamos un fichero de React Native

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

User Settings

Pegamos el siguiente código

"files.associations": {
    "*.js": "javascriptreact"
}
icono de mandar un mailSOPORTE Usuarios Premium
Pablo Monteserín
contacta conmigoPablo
Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario tener una cuenta premium activa. Para cualquier otra cosa, puedes usar el formulario de la página de contacto.