¿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
- 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"
},
// 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": trueFuncionalidades nativas de Visual Studio Code
Usar Emmet
Visual Studio Code viene con Emmet de serie:
Ejemplos:
div#amor
div.amor
ul>li*5>aSplit View
Puedes usar el botón de split view:
ctrl + shift + p => split editor
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 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.
- 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.
- npm scripts. Permite ejecutar scripts del package.json de manera visual; haciendo click en botones en lugar de ejecutando comandos en la terminal.