Guía práctica de VS Code: habilidades y herramientas esenciales para desarrolladores eficientes

Visual Studio Code (VS Code), como editor de código gratuito, de código abierto y multiplataforma, es muy popular entre los desarrolladores. Tiene funciones potentes, un rico ecosistema de extensiones y una interfaz sencilla y fácil de usar. Este artículo combinará las discusiones recientes en X/Twitter para resumir las habilidades prácticas y las recomendaciones de herramientas de VS Code para ayudarte a mejorar la eficiencia del desarrollo.

¿Cuál es el atractivo de VS Code?

De la discusión en X/Twitter, podemos ver el entusiasmo de los desarrolladores por VS Code. @@freeCodeCamp mencionó repetidamente la popularidad y la gratuidad de VS Code, enfatizando las ricas funciones que ofrece. @@chomado compartió su editor favorito y recomendó extensiones para ingenieros 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 varios sistemas operativos como Windows, macOS, Linux, etc.
• Ligero: Rápido de iniciar y con bajo consumo de recursos.
• Potente ecosistema de extensiones: Al instalar extensiones, puedes mejorar las funciones de VS Code para satisfacer diversas necesidades de desarrollo.
• Herramientas de depuración integradas: Admite la depuración de varios lenguajes de programación, lo que facilita a los desarrolladores la localización y resolución rápida de problemas.
• Git integrado: Facilita a los desarrolladores el control de versiones.
• Sugerencias inteligentes: Proporciona funciones como autocompletado de código e inspección de sintaxis para mejorar la eficiencia de la codificación.

Habilidades prácticas de VS Code: mejora tu eficiencia de desarrollo

1. Domina los atajos de teclado: VS Code proporciona una gran cantidad de atajos de teclado, y dominar estos atajos puede mejorar enormemente la eficiencia del desarrollo. Estos son algunos atajos de teclado comunes:

   • Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): Abre el panel de comandos. Esta es una de las funciones centrales de VS Code y puedes realizar varias operaciones a través del panel 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. Puedes editar varios textos idénticos al mismo tiempo.
   • 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. Haz un buen uso del panel de comandos: Abre el panel de comandos a través de Ctrl+Shift+P / Cmd+Shift+P para realizar varias operaciones, como:

   • 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 en el espacio de trabajo.3. Configuración personalizada: VS Code permite a los usuarios personalizar varias configuraciones, incluidos temas, fuentes, sangría, etc. Puede 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 de la codificación.

   • Fuente: Elegir una fuente adecuada puede mejorar la legibilidad del código. Se recomienda utilizar una fuente monoespaciada, como Fira Code, JetBrains Mono, etc.

   • Sangría: Establece la sangría según las especificaciones 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 olvidarse de guardar.

3. Uso de 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 integrados, y también puedes personalizar los fragmentos de código.

   • Abre la paleta de comandos, escribe Preferences: Configure User Snippets, selecciona el idioma 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"
   }
   

4. Usar la edición con múltiples cursores: Mantén presionada la tecla Alt (Windows/Linux) / Option (macOS), luego haz clic con el mouse para crear cursores en múltiples ubicaciones y editar 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.

5. 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.

6. 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.

7. Usar VS Code en el navegador: Como señaló @@Prathkum, al visitar 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 que no tienen VS Code instalado. El trabajo de @@CompuIves mejoró aún más esto, ya que logró ejecutar VS Code directamente en el navegador y conectarlo a la API de CodeSandbox.

Herramientas recomendadas de VS Code: crea tu IDE personalizado

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

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

  ext install esbenp.prettier-vscode
  

• ESLint: Herramienta de verificación de código JavaScript que puede verificar 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. 
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: Inicia rápidamente un servidor local, lo que facilita la depuración del código frontend. @@ThreatSynop mencionó 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 varios lenguajes de programación, lo que facilita la prueba rápida de fragmentos de código. Del mismo modo, @@ThreatSynop también señaló 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, la información del autor, etc.

  ext install eamodio.gitlens
  

• Bracket Pair Colorizer: Colorea los pares de paréntesis para facilitar la visualización de la estructura del código.

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (Proporcionado por Microsoft) Complemento de código asistido por IA, que 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, que puede generar fragmentos de código, funciones e incluso archivos completos basados en su código. @@aadhilkh mencionó la alta rentabilidad de usar VS Code Copilot.

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

  ext install shd101wyy.markdown-preview-enhanced
  

• Paquete de extensión Remote Development: Incluye extensiones como SSH, Containers, WSL, etc., lo que facilita el desarrollo remoto.

Sobre la integración de LLM y VS Code

También han surgido algunas discusiones sobre la integración de LLM y VS Code en X/Twitter. @@akshay_pachaar compartió un método para entrenar LLM en VS Code. @@MacopeninSUTABA mencionó la integración del agente de codificación de IA "Claude Code" de Anthropic con VS Code. Todo esto presagia que la IA jugará un papel cada vez más importante en el desarrollo futuro.

Consejos de seguridad

Como mencionó @@ThreatSynop, algunas extensiones de VS Code tienen vulnerabilidades de seguridad que pueden provocar el robo de archivos y la ejecución remota de código. Por lo tanto, al usar extensiones, preste atención a los siguientes puntos:

• Elija extensiones oficiales o de buena reputación.
• Actualice las extensiones regularmente.
• Lea atentamente las instrucciones de permisos de la extensión.
• Instale herramientas de verificación de código, como ESLint, que pueden ayudarlo a detectar posibles problemas en el código.
• Preste atención a los anuncios de seguridad de VS Code y las extensiones, y corrija las vulnerabilidades a tiempo.## Conclusión

VS Code, como un potente editor de código, posee numerosas técnicas prácticas 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 y la instalación de extensiones adecuadas, puedes transformar VS Code en tu IDE personalizado. 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 haya sido útil!