Guía Práctica de VS Code: Trucos Esenciales y Herramientas Recomendadas para Desarrolladores Eficientes

Visual Studio Code (VS Code) es un editor de código gratuito, de código abierto y multiplataforma, muy popular entre los desarrolladores. Ofrece funciones potentes, un rico ecosistema de extensiones y una interfaz sencilla y fácil de usar. Este artículo, basado en discusiones recientes en X/Twitter, resume trucos prácticos y recomendaciones de herramientas para VS Code, con el objetivo de ayudarte a mejorar tu eficiencia de desarrollo.

¿Cuál es el atractivo de VS Code?

De las discusiones en X/Twitter, podemos ver el entusiasmo de los desarrolladores por VS Code. @@freeCodeCamp mencionó repetidamente la popularidad y la gratuidad de VS Code, destacando las ricas funcionalidades que ofrece. @@chomado compartió su editor favorito y recomendó extensiones para ingenieros de front-end.

En resumen, las principales ventajas de VS Code incluyen:

• Gratuito y de código abierto: Cualquiera puede usarlo gratis y participar en el desarrollo de la comunidad.
• Multiplataforma: Compatible con múltiples sistemas operativos como Windows, macOS, Linux, etc.
• Ligero: Rápido al iniciar y bajo consumo de recursos.
• Potente ecosistema de extensiones: Al instalar extensiones, se pueden mejorar las funciones de VS Code para satisfacer diversas necesidades de desarrollo.
• Herramientas de depuración integradas: Admite la depuración de múltiples lenguajes de programación, lo que facilita a los desarrolladores la localización y resolución rápida de problemas.
• Integración con Git: Facilita el control de versiones para los desarrolladores.
• Sugerencias inteligentes: Proporciona funciones como autocompletado de código, verificación de sintaxis, etc., para mejorar la eficiencia de la codificación.

Trucos prácticos de VS Code: Mejora tu eficiencia de desarrollo

1. Domina los atajos de teclado: VS Code ofrece una amplia gama de atajos de teclado. Dominar estos atajos puede mejorar enormemente la eficiencia del desarrollo. Aquí hay algunos atajos de teclado comunes:

   • Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): Abre la paleta de comandos. Esta es una de las funciones centrales de VS Code y permite ejecutar varias operaciones a través de la paleta de comandos.
   • Ctrl+P (Windows/Linux) / Cmd+P (macOS): Abre rápidamente un archivo.
   • Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (macOS): Salta rápidamente a un símbolo (función, clase, etc.).
   • Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (macOS): Búsqueda global.
   • Ctrl+D (Windows/Linux) / Cmd+D (macOS): Selecciona la siguiente coincidencia. Permite editar simultáneamente múltiples textos idénticos.
   • Alt+Shift+Down/Up (Windows/Linux) / Option+Shift+Down/Up (macOS): Copia la línea actual a la siguiente línea/línea anterior.
   • Ctrl+/ (Windows/Linux) / Cmd+/ (macOS): Comenta/descomenta la línea actual o el bloque de código seleccionado.
   • Alt+Up/Down (Windows/Linux) / Option+Up/Down (macOS): Mueve hacia arriba/abajo la línea actual o el bloque de código seleccionado.
   • Ctrl+K Ctrl+S: Abre la interfaz de configuración de atajos de teclado, donde puedes ver y personalizar los atajos de teclado.

2. Utiliza la paleta de comandos: Abre la paleta de comandos con Ctrl+Shift+P / Cmd+Shift+P para ejecutar varias operaciones, por ejemplo:

   • Settings: Abre la interfaz de configuración.
   • Extensions: Install Extension: Instala una extensión.
   • Git: Commit: Confirma los cambios de Git.
   • Format Document: Formatea el documento actual.
   • Go to Symbol in Workspace: Salta rápidamente a un símbolo dentro del espacio de trabajo.

3. Personalización: VS Code permite a los usuarios personalizar varias configuraciones, incluyendo temas, fuentes, sangría, etc. Puedes abrir la interfaz de configuración a través de File -> Preferences -> Settings o editar directamente el archivo settings.json.

   • Tema: Elegir un tema que te guste puede mejorar la comodidad al programar.
   • Fuente: Elegir una fuente adecuada puede mejorar la legibilidad del código. Se recomienda usar fuentes monoespaciadas, como Fira Code, JetBrains Mono, etc.
   • Sangría: Configurar la sangría según las normas del proyecto, puedes usar espacios o la tecla Tab.
   • Guardado automático: Activar la función de guardado automático puede evitar la pérdida de código por olvidar guardar.

4. Utilizar fragmentos de código (Code Snippets): Los fragmentos de código pueden ayudarte a insertar rápidamente bloques de código de uso común. VS Code tiene algunos fragmentos de código comunes incorporados, y también puedes personalizar los fragmentos de código.

   • Abre la paleta de comandos, escribe Preferences: Configure User Snippets, selecciona el lenguaje que quieres editar y luego puedes editar los fragmentos de código.
   • Por ejemplo, puedes crear un fragmento de código clog para JavaScript para insertar rápidamente console.log():

   "Print to console": {
       "prefix": "clog",
       "body": [
           "console.log('$1');",
           "$2"
       ],
       "description": "Log output to console"
   }
   

5. Usar edición con múltiples cursores: Mantén presionada la tecla Alt (Windows/Linux) / Option (macOS) y luego haz clic con el ratón para crear cursores en múltiples ubicaciones, editando múltiples líneas de código simultáneamente. También puedes usar Ctrl+D / Cmd+D para seleccionar la siguiente coincidencia y realizar la edición con múltiples cursores.

6. Dividir el editor: Puedes dividir el editor en múltiples ventanas para ver y editar múltiples archivos simultáneamente. Puedes usar el comando View -> Editor Layout -> Split Editor para dividir el editor.

7. Desarrollo remoto: VS Code proporciona la extensión Remote Development, que te permite editar el código en un servidor remoto localmente. Esto es muy útil para desarrollar aplicaciones del lado del servidor.

8. Usar VS Code en el navegador: Como señaló @@Prathkum, al acceder a vscode.dev, puedes usar VS Code directamente en el navegador, lo cual es conveniente y rápido. Esto es muy útil para la edición temporal o para trabajar en dispositivos donde VS Code no está instalado. El trabajo de @@CompuIves ha mejorado aún más esto, ya que logró ejecutar VS Code directamente en el navegador y conectarlo a la API de CodeSandbox.

Recomendaciones de herramientas de VS Code: Crea tu IDE personalizado

La fortaleza de VS Code radica en su rico ecosistema de extensiones. Aquí hay algunas recomendaciones de extensiones de uso común:

• Prettier: Herramienta de formateo de código que puede formatear automáticamente el código y mantener la consistencia del estilo del código.

  ext install esbenp.prettier-vscode
  

• ESLint: Herramienta de comprobación de código JavaScript que puede comprobar errores y problemas potenciales en el código.

  ext install dbaeumer.vscode-eslint
  ```*   **EditorConfig for VS Code:** Herramienta para mantener la consistencia del estilo de código entre diferentes editores. // Herramienta para mantener la consistencia del estilo de código entre diferentes editores.
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: Inicia rápidamente un servidor local, conveniente para depurar código frontend. @@ThreatSynop menciona una vulnerabilidad de seguridad en Live Server, recordando a los desarrolladores que presten atención a la seguridad al usar la extensión. // Inicia rápidamente un servidor local, conveniente para depurar código frontend. @@ThreatSynop menciona una vulnerabilidad de seguridad en Live Server, recordando a los desarrolladores que presten atención a la seguridad al usar la extensión.

  ext install ritwickdey.LiveServer
  

• Code Runner: Admite la ejecución de múltiples lenguajes de programación, conveniente para probar rápidamente fragmentos de código. Del mismo modo, @@ThreatSynop también señala una vulnerabilidad de seguridad en Code Runner. // Admite la ejecución de múltiples lenguajes de programación, conveniente para probar rápidamente fragmentos de código. Del mismo modo, @@ThreatSynop también señala una vulnerabilidad de seguridad en Code Runner.

  ext install formulahendry.code-runner
  

• GitLens: Extensión que mejora las funciones de Git, puede ver el historial de commits del código, información del autor, etc. // Extensión que mejora las funciones de Git, puede ver el historial de commits del código, información del autor, etc.

  ext install eamodio.gitlens
  

• Bracket Pair Colorizer: Colorea los pares de paréntesis, conveniente para ver la estructura del código. // Colorea los pares de paréntesis, conveniente para ver la estructura del código.

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (Proporcionado por Microsoft) Autocompletado de código asistido por IA, puede proporcionar sugerencias de código más inteligentes según el contexto. // Autocompletado de código asistido por IA, puede proporcionar sugerencias de código más inteligentes según el contexto.

  ext install visualstudioexptteam.vscodeintellicode
  

• VS Code Copilot: (Proporcionado por GitHub, de pago) Asistente de código de IA, puede generar fragmentos de código, funciones e incluso archivos completos según su código. @@aadhilkh menciona la alta rentabilidad de usar VS Code Copilot. // Asistente de código de IA, puede generar fragmentos de código, funciones e incluso archivos completos según su código. @@aadhilkh menciona la alta rentabilidad de usar VS Code Copilot.

• Markdown Preview Enhanced: Un mejor plugin de vista previa de Markdown. @@ThreatSynop también señala que este plugin tiene problemas de seguridad y se debe prestar atención. // Un mejor plugin de vista previa de Markdown. @@ThreatSynop también señala que este plugin tiene problemas de seguridad y se debe prestar atención.

  ext install shd101wyy.markdown-preview-enhanced
  

• Paquete de extensiones de Remote Development: Incluye extensiones como SSH, Containers, WSL, etc., conveniente para el desarrollo remoto. // Incluye extensiones como SSH, Containers, WSL, etc., conveniente para el desarrollo remoto.

Sobre la integración de LLM y VS Code

También han surgido algunas discusiones en X/Twitter sobre la integración de LLM y VS Code. @@akshay_pachaar compartió un método para entrenar LLM en VS Code. @@MacopeninSUTABA mencionó la integración del agente de codificación de IA de Anthropic ## Conclusión

VS Code, como un potente editor de código, posee numerosos trucos prácticos y un rico ecosistema de extensiones que pueden ayudar a los desarrolladores a mejorar la eficiencia del desarrollo. Al dominar los atajos de teclado, la configuración personalizada, el uso de fragmentos de código, la instalación de extensiones adecuadas, etc., puedes transformar VS Code en tu IDE exclusivo. Al mismo tiempo, también debes prestar atención a los problemas de seguridad, elegir extensiones oficiales o de buena reputación y actualizar las extensiones periódicamente. ¡Espero que este artículo te sea de utilidad!