Skip to main content

Visual Studio Code

vscode

Visual Studio Code (VS Code) puede ser considerado un IDE (Entorno de Desarrollo Integrado) en muchos aspectos, aunque algunos puristas puedan argumentar que es más bien un editor de texto avanzado con características de IDE.

Sin embargo, VS Code ofrece una amplia gama de características que normalmente encontrarías en un IDE, como:

  • Resaltado de sintaxis: Destaca la sintaxis del código para facilitar la lectura.

  • Integración con control de versiones: Integración con sistemas de control de versiones como Git, permitiendo gestionar cambios de código directamente desde el entorno de desarrollo.

  • Depuración integrada: Soporte para depuración de código directamente en el editor.

  • Gestión de paquetes y extensiones: Posibilidad de instalar extensiones para agregar funcionalidades adicionales, como soporte a lenguajes de programación específicos, herramientas de depuración e integración con servicios en la nube.

  • Terminal integrado: Permite ejecutar comandos directamente desde VS Code, facilitando tareas como compilación, ejecución de scripts y comandos de Git.

  • IntelliSense: Característica de sugerencia de código que ayuda a escribir código más rápidamente, proporcionando sugerencias de código, completando automáticamente palabras clave y brindando información sobre parámetros de función y métodos.

A pesar de existir algunos competidores de Visual Studio Code, ninguno de ellos ha logrado alcanzar su misma popularidad. Considerado por muchos desarrolladores como el mejor editor de código actualmente disponible, Visual Studio Code se destaca por su facilidad de uso, características poderosas y una amplia comunidad de desarrolladores que contribuyen constantemente con nuevas extensiones y mejoras. Además, por ser un software de código abierto, VS Code ofrece la flexibilidad de ser personalizado y extendido conforme a las necesidades específicas de cada usuario.

Una de las principales ventajas de utilizar este editor es la vasta gama de extensiones disponibles, que expanden significativamente sus funcionalidades y lo hacen aún más poderoso. Su interfaz amigable, facilidad de instalación y configuración, aliadas al soporte constante de la comunidad y a las actualizaciones regulares, consolidan Visual Studio Code como la elección preferida entre los desarrolladores.

Visual Studio Code vs Visual Studio​

"Visual Studio Code" y "Visual Studio" son dos herramientas diferentes, aunque comparten parte del nombre y ambas son desarrolladas por Microsoft. Tienen propósitos diferentes y están dirigidas a diferentes tipos de desarrollo.

La principal diferencia entre "VS Code" y "Visual Studio" está en el alcance y enfoque de las herramientas. "Visual Studio" es un IDE completo con una amplia gama de características para desarrollo de software, mientras que "Visual Studio Code" es un editor de código más ligero y flexible, diseñado principalmente para edición de código.

Visual Studio sería el competidor de IntelliJ IDEA y XCode, no de VS Code. Son herramientas para desarrollo de software, aunque muchos programadores prefieren VS Code con los plugins correctos instalados.

IntelliJ IDEA, desarrollado por JetBrains, es un excelente IDE, pero es de pago. Fue desarrollado inicialmente para trabajar con Java, pero hoy en día funciona para cualquier lenguaje. Si eres programador creo que vale la pena darle una oportunidad a este IDE, especialmente si tu empresa ofrece la licencia que no cuesta barata. El gran problema de probar es ¡gustar! Gustar de lo caro es muy fácil...

Instalación VS Code​

La instalación de VS Code es muy simple, una búsqueda rápida en Internet ya muestra cómo hacerlo.

Una recomendación es instalar los repositorios de Microsoft para hacer la instalación vía paquete en lugar de instalar el .deb o .rpm, facilitando la actualización. También está disponible vía snap y flatpak si lo prefieres.

Antes de comenzar a programar, puedes personalizar tu experiencia en VS Code. Ve a "Configuración" haciendo clic en "File" y seleccionando "Preferences" > "Settings". Aquí, puedes personalizar diversos aspectos del editor, como fuente, tema y atajos de teclado.

Plugins VS Code​

VS Code potenciado con los plugins correctos mejora bastante la productividad. Cada persona tiene un entorno diferente, pero dejaré una lista de algunos interesantes.

Plugins de Uso General​

  • Dracula Theme excelente tema para programar.

  • Material Icon Theme coloca los iconos en los diferentes tipos de archivos.

  • YAML ayuda bastante con el formateo y validación de archivos yaml.

  • json bueno para analizar archivos json.

  • markdownlint de reglas para incentivar estándares y consistencia para archivos Markdown.

  • Peacock coloca colores en los bordes de VS Code según el proyecto. Ayuda bastante cuando tenemos varias instancias abiertas de VS Code con proyectos diferentes facilitando la identificación.

  • Excalidraw creando un archivo .excalidraw podrás utilizar Excalidraw dentro de VS Code sin necesidad de abrir un navegador para ello y podrás guardar el archivo junto con el proyecto.

  • WSL es esencial si estás utilizando Windows Subsystem for Linux. Abre el proyecto dentro de WSL en VS Code instalado en Windows.

  • Remote - SSH permite trabajar en otras máquinas usando el protocolo SSH. Proporciona una experiencia de desarrollo perfecta, permitiendo editar archivos, ejecutar comandos y depurar aplicaciones directamente desde la instancia local de VS Code en entornos remotos.

  • Remote Explorer complementa Remote SSH arriba.

  • GitLens potencia el control de git.

  • Prettier - Code formatter. Formateador de código que impone un estilo de código consistente en todos tus proyectos. Compatible con varios lenguajes de programación y formatea automáticamente el código según reglas predefinidas, mejorando la legibilidad y reduciendo los conflictos relacionados con el estilo.

  • Code Spell Checker es un corrector ortográfico básico. No llega a verificar gramaticalmente una frase, pero ayuda a no cometer errores de digitación simples.

  • Spanish - Code Spell Checker para que Code Spell Checker verifique palabras en español.

  • vs code-pdf visualiza pdf dentro de VS Code.

  • Path Intellisense completa los nombres y paths de los archivos automáticamente.

  • Regex Previewer ayuda a verificar si el regex está funcionando como debería.

  • Better Comments crear comentarios más amigables en tu código.

  • indent-rainbow coloriza el código para mostrar la indentación, facilitando la visualización de las jerarquías.

  • Guides agrega líneas guía para facilitar la visualización de indentación y espaciado en el código.

  • Svg Preview permite visualizar archivos SVG directamente en VS Code.

  • CodeSnap usado para tomar hermosas capturas de pantalla de tu código en VS Code.

  • EditorConfig for VS Code permite definir y compartir las reglas de formateo de tu código entre diferentes editores y equipos de desarrollo. Con esta extensión puedes garantizar la consistencia del estilo de código en todos los proyectos.

  • Vim juntará lo mejor de NeoVim con lo mejor de VS Code.

  • DotENV

  • psioniq File Header inserta un encabezado en la parte superior del archivo. Requiere un tiempo de configuración, pero es muy útil.

    • /*
      * File: \Users\me\Development\psioniq\myProject\src\myPrecious.js
      * Project: \Users\me\Development\psioniq\myProject
      * Created Date: Saturday December 31 2016
      * Author: Arthur Bodkin, esq
      * -----
      * Last Modified: Sunday January 01 2017
      * Modified By: Tammy Bodkin
      * -----
      * Copyright (c) 2016 psioniq Global Enterprises, Inc
      */

Plugins de Tools​

Plugins que ayudan bastante para trabajar como DevOps.

  • Docker facilita la creación, gestión e implementación de aplicaciones en contenedores.
  • Dev Containers ayuda en la creación de Dockerfiles.
  • Kubernetes permite la visualización de los objetos del cluster y tiene varios templates listos para crear los manifiestos.
  • HashiCorp Terraform mejora bastante el desarrollo usando terraform.
  • Ansible facilita la creación de playbooks.
  • Vagrant facilita la gestión de las máquinas y la sintaxis del Vagrantfile.
  • Packer facilita la sintaxis de los archivos .pkr.hcl.

Plugins de Lenguajes​

Para trabajar con desarrollo web.

  • Auto Close Tag cierra automáticamente tags HTML/XML, ahorrando tiempo al programar.
  • Auto Rename Tag renombra automáticamente la tag correspondiente, manteniendo consistencia en el código.
  • ESLint: identifica y corrige problemas de código JavaScript/TypeScript siguiendo reglas y estándares predefinidos.
  • Live Server inicia un servidor de desarrollo local en tu navegador web predeterminado usando un número de puerto. Siempre que hagas cambios en archivos como HTML, CSS o JavaScript, los cambios se reflejan.

Plugins de Repos y Pipelines​

  • GitLab Workflow integra GitLab en VS Code y ayuda en el desarrollo de pipelines usando gitlab-ci.

  • GitHub Actions ayuda en la creación y depuración de pipelines usando GitHub Actions.