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.

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

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

{
"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

Pegamos el siguiente código

"files.associations": {
    "*.js": "javascriptreact"
}