Introducción a VSCode
Introducción
Visual Studio Code es un editor de código ligero pero con poderosas herramientas que nos
permitirán trabajar de manera cómoda y eficaz. Sin necesidad de instalar ninguna extensión
adicional viene con soporte para JavaScript, TypeScript y Node. Gracias a su extensa lista de
extensiones se puede customizar la experiencia para facilitarnos el trabajo de desarrollar código.
VS Code incluye un depurador de código interactivo que nos permite recorrer el código,
inspeccionar variables, ver listado de llamadas y ejecutar comandos por consola.
Además, se integra con herramientas de compilación y Git, simplificando la visualización de
cambios pendientes.
Instalación
El proceso de instalación en Ubuntu es simple, necesitamos hacer uso de wget (el cuál habría
que instalar si todavía no lo hicimos) y luego instalar el paquete usando el comando dpkg.
sudo apt install wget
wget '[Link] -O
[Link]
sudo dpkg -i [Link]
rm [Link]
Una vez que corrimos estos comandos, tendremos acceso a la aplicación sin ninguna
complicación.
Interfaz gráfica
VS Code viene con un diseño simple e intuitivo que maximiza el espacio provisto para el editor
mientras deja un amplio espacio para navegar y acceder al contexto completo de su carpeta o
proyecto. La interfaz de usuario se divide en cinco áreas:
● Editor: el área principal para editar sus archivos. Puede abrir tantos editores como desee,
uno al lado del otro, vertical y horizontalmente.
● Barra lateral o side bar: contiene diferentes vistas, como el Explorador, para ayudarlo
mientras trabaja en su proyecto.
● Barra de estado o status bar: información sobre el proyecto abierto y los archivos que
edita.
● Barra de actividad o activity bar: ubicada en el extremo izquierdo, le permite cambiar
entre vistas y le brinda indicadores adicionales específicos del contexto, como la cantidad
de cambios salientes cuando Git está habilitado.
● Panel: puede mostrar diferentes paneles debajo de la región del editor para obtener
información de salida o depuración, errores y advertencias, o un terminal integrado. El
panel también se puede mover hacia la derecha para obtener más espacio vertical.
Además, a la derecha del editor código podremos ver un minimapa del código que nos permitirá
ubicar rápidamente distintas secciones del mismo.
Algunos Comandos útiles
Más allá de los atajos del teclado clásicos como CTRL+C, CTRL+X, etc, VS Code incluye una
serie de atajos que nos permiten agilizar nuestra productividad.
CTRL+P
Se abre un buscador y al tipear el nombre de un archivo nos mostrará los resultados, permitiendo
acceder rápidamente a un archivo, evitando tener que usar el panel lateral para encontrar el
archivo. También mostrará los archivos abiertos recientemente.
CTRL+Shift+P
Nos muestra la paleta de comandos, listando todos los comandos disponibles basado en nuestro
contexto actual.
CTRL+G
Nos permite ir rápidamente a una línea en particular.
CTRL+Shift+7
Comenta o descomenta la líne actual.
CTRL+A
Comenta o descomenta el grupo de líneas seleccionado.
CTRL+Shift+O
Nos permite navegar por las distintos bloques de código del archivo actual.
Git
Extensiones útiles
ESLint
Integra ESLint de JAvascript en VS Code.
[Link]
Prettier
Formatea el código de forma ‘botnita’ permitiendo un estilo consistente.
[Link]
Auto Close Tag
Automáticamente agrega etiquetas de cierre de HTML.
[Link]
Auto Rename Tag
Automáticamente renombra las etiquetas de apertura o cierre cuando cambiamos la otra.
[Link]
DotENV
Agrega soporte para archivos .env a VSCode.
[Link]
Docker
Simplifica el manejo de contenedores.
[Link]
Better Comments
Mejora la experiencia de usuario en los comentarios, identificando con colores específicos los
distintos tipos de comentarios.
[Link]
Path Intellisense
Extensión que permite autocompletar nombres de archivos.
[Link]
npm Intellisense
Agrega autocompletado a la hora de importar módulos npm.
[Link]
GitLens
“Supercarga” las funcionalidades de Git dentro de VS Code
[Link]
Angular Language Service
Agrega al editor servicios para plantillas Angular.
[Link]