Módulo Herramientas de Desarrollo
Visual Studio Code
Objetivos: Descubrir cómo manejarse en un IDE de desarrollo. Conocer
herramientas provistas por Visual Studio Code y aprender atajos de teclado
para agilizar el desarrollo.
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
Hay varias formas de instalar VS Code en Ubuntu, tal vez la más sencilla es usar la consola
(Ctrl+Alt+T) y ejecutar el comando curl para descargar el instalador oficial y luego instalar el
paquete usando el comando dpkg.
Comenzamos con obtener el archivo de instalación:
curl -o [Link] -L
[Link]
Este comando descarga el archivo de instalación oficial en formato .deb y lo guarda en un
archivo “[Link]”.
Seguimos con el comando dpkg para instalar efectivamente VS Code en nuestro sistema:
sudo dpkg -i [Link]
Una vez que corrimos estos comandos, tendremos acceso a la aplicación sin ninguna
complicación.
Sin embargo, si nos muestra algún error que indica e falta alguna dependencia, puede ser
necesario ejecutar los siguientes comandos para instalar las dependencias faltantes:
sudo apt update
sudo apt install -f
Si todo sale bien, podemos borrar el archivo de instalación.
rm [Link]
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.
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]