27 extensiones útiles para Visual Studio Code que duplican nuestra productividad.
Visual Studio Code (VS Code) es un editor de código conocido y altamente calificado con toneladas de funciones y extensiones para mejorar la experiencia de desarrollo. Uno de los principales beneficios de usar VS Code es su flexibilidad, lo que permite a los desarrolladores personalizarlo según sus necesidades específicas.
Además, VS Code es liviano y rápido, lo que lo convierte en una excelente opción para los desarrolladores que trabajan en proyectos grandes o con recursos limitados. Viene con herramientas de depuración, terminal e integración con Git, lo que la convierte en una solución todo en uno para desarrolladores.
No solo eso, sino que muchas extensiones de VS Code están disponibles en Visual Studio Marketplace, lo que lo convierte en el IDE líder en la comunidad de desarrolladores. Estas extensiones ayudan a los desarrolladores a entregar un código limpio y sin errores, lo que les facilita vivir una vida feliz.
En el artículo de hoy, compartiré con usted algunas de las mejores herramientas de extensión de código de Visual Studio que creo que son muy útiles, con la esperanza de ayudarlo.
01.GraphQL
Extensión GraphQL Visual Studio Code que le brinda un conjunto de herramientas para ayudarlo a escribir, validar y probar el código GraphQL.
La extensión GraphQL incluye autocompletar: sugiere campos y parámetros para usar en consultas a medida que escribe, lo que facilita la escritura de código GraphQL eficiente. Esta característica le ahorra tiempo y reduce la posibilidad de errores de sintaxis.
Instala un linter incorporado que verifica su código en busca de errores y sugiere soluciones. Utilice esta extensión para evitar errores de GraphQL y aumentar la eficiencia.
02, SSH remoto
Puede usar la extensión VS Code para conectarse de forma segura a servidores remotos desde adentro, sin software adicional o ventanas de terminal.
Remote-SSH le permite acceder, editar y transferir archivos fácilmente hacia y desde servidores remotos dentro de la interfaz familiar de Visual Studio Code. Puede usarlo para mejorar su productividad general, no para simplificar su flujo de trabajo.
Puede ejecutar comandos, depurar código e incluso usar extensiones en equipos remotos para aprovechar al máximo las capacidades de Visual Studio Code independientemente de su configuración local.
Remote-SSH es una extensión importante de VS Code. Pruebe la extensión de VS Code para descubrir el poder y la conveniencia de trabajar de forma remota.
03、Configuración de sincronización
Los desarrolladores utilizan regularmente editores de texto para crear aplicaciones web. Es un inconveniente mantener manualmente la misma configuración en varios dispositivos. La sincronización manual de la configuración también puede llevar mucho tiempo y brindar una experiencia inconsistente en todos los dispositivos.
Con la extensión Settings Sync VS Code, puede sincronizar fácilmente la configuración en varios dispositivos, reducir el tiempo de configuración e incluso compartir la configuración con otros.
04, etiqueta de cambio de nombre automático
Siempre que use una etiqueta de apertura, VS Code resaltará automáticamente la etiqueta coincidente y agregará la etiqueta de cierre. La extensión Auto Rename Tags cambia el nombre de las etiquetas que cambias mientras codificas. Por ejemplo:
Cuando cambie el nombre de una etiqueta HTML/XML, esa etiqueta cambiará automáticamente el nombre de todas las etiquetas HTML/XML emparejadas
También puede usar la extensión de etiqueta de cambio de nombre automático en Javascript; simplemente guarde el tipo de archivo como .js. Se empareja automáticamente con etiquetas javascript y se le cambia el nombre.
Esta extensión solo admite HTML, XML, PHP y JavaScript.
05, IA tabnina
La extensión Tabnine VS Code tiene que ver con la productividad. Es un asistente de código de inteligencia artificial que puede acelerar su proceso de desarrollo y completar automáticamente su código en tiempo real. Es compatible con todos los lenguajes de codificación e IDE populares.
Tabnine tiene finalización de código asistida por IA similar a IntelliSense. Esta extensión lo ayuda a escribir código más rápido al predecir y sugerir su próxima línea de código según el contexto y la sintaxis.
06、Vista previa de CSS
Con la extensión CSS Peek VS Code, simplemente puede pasar el cursor sobre un elemento HTML para abrir una ventana de visualización que muestra los estilos CSS aplicados a ese elemento. A continuación, puede editar estilos fácilmente haciendo clic en la ventana de vista para saltar al código CSS. Esta característica le evita tener que buscar manualmente el código CSS cada vez.
CSS Peek también admite preprocesadores de CSS como SCSS, Less y Sass, por lo que puede usarlo para todos sus proyectos, independientemente de los preprocesadores.
Extensión VS Code para colorear sus fragmentos de código
07、Color de par de soportes DLW
Bracket Pair Color DLW VS Extensión de código que colorea automáticamente ciertos caracteres para ayudar a los desarrolladores a determinar la profundidad de anidamiento de una pieza de código.
Admite múltiples idiomas y permite a los desarrolladores definir los colores de los diferentes corchetes que planean usar en su código. De forma predeterminada (), {} y [] coinciden, pero puede usar otros caracteres de paréntesis como desee e incluso definir su color. Con esta extensión, es fácil encontrar corchetes de apertura y cierre y obtener una visión más clara de la estructura de su código.
08, Iconos de código VS
Aunque Visual Studio Code es un potente editor de código, sus iconos predeterminados pueden resultar aburridos y poco atractivos. Aquí es donde entran en juego los temas de iconos.
La extensión VS Code Icons lo ayudará a ver los tipos de archivos identificándolos como React, Javascript, HTML, CSS y más.
Los temas de íconos son una forma rápida y fácil de cambiar la apariencia de la interfaz del editor de VS Code, y pueden tener un gran impacto en su experiencia general.
09、Tema de iconos de materiales
Material Icon Theme es una extensión de VS Code popular y ampliamente utilizada que le da a su editor de código un aspecto elegante y moderno. Esta extensión reemplaza los íconos de diseño de materiales predeterminados de VS Code, lo que le da a su interfaz un aspecto limpio y profesional.
Incluye una variedad de estilos de íconos, incluidos íconos de colores, monocromáticos y de contorno. Esto significa que puede elegir el estilo que mejor se adapte a sus necesidades y preferencias. Puede estar seguro de que todas sus necesidades de codificación se clasifican intuitivamente mediante un amplio conjunto de iconos de carpetas y archivos, lo que le permite acceder fácil y rápidamente a lo que necesita.
10, pavo real
Peacock es una extensión de VS Code que agrega un toque de color a su experiencia de codificación. Esta extensión le permite colorear las pestañas del editor de códigos en función de criterios como el tipo de archivo, la carpeta o el espacio de trabajo.
Una de las características distintivas del pavo real es su adaptabilidad. Puede cambiar los colores utilizados para cada estándar e incluso diseñar sus propios esquemas de color. Esto le permite personalizar la interfaz a su gusto y distinguir entre diferentes tipos de archivos y proyectos.
Extensión VS Code para control de versiones
11, servidor en vivo
Extensión Live Server VS Code para recargar automáticamente sus páginas web. Elimina la necesidad de actualizar manualmente la página.
También puede especificar un puerto o nombre de host personalizado, lo que resulta útil cuando se trabaja en varios proyectos o en un entorno de equipo. Otra característica útil de Live Server es su capacidad para ejecutar el servidor en cualquier archivo o proyecto HTML en el entorno de trabajo.
12、Historial de Git
La extensión Git History muestra el historial de confirmaciones en una vista de árbol, lo que facilita a los codificadores comprender el progreso de los cambios realizados en su código. Esta vista simplifica la navegación a través de diferentes confirmaciones y encuentra el cambio que está buscando.
Esta extensión de VS Code también incluye una potente función de búsqueda que le permite encontrar rápidamente confirmaciones específicas por mensaje, autor o hash. También puede comparar confirmaciones, lo que facilita ver las diferencias entre las diferentes versiones de su código.
13、Lente Git
La extensión Git Lens ayuda a los desarrolladores a visualizar, navegar y comprender el historial Git de sus proyectos. Git Lens, entre otras cosas, agrega una poderosa vista de diferencias divididas que permite a los desarrolladores visualizar fácilmente las diferencias entre compromisos y ramas.
Permite a los desarrolladores buscar en el historial de confirmación de un proyecto por autor, archivo, mensaje de confirmación y otros criterios.
14, Explorador de ventanas acoplables
Docker Explorer VS Code Extension puede identificar y administrar contenedores e imágenes que se están ejecutando actualmente. Permite a los desarrolladores iniciar, detener y reiniciar contenedores fácilmente, inspeccionar registros y propiedades, e incluso dirigirse a contenedores o imágenes específicos por nombre o ID.
Puede generar nuevos contenedores a partir de imágenes, así como enviar y extraer imágenes de los registros. En definitiva, simplifica la creación y gestión de contenedores, lo que simplifica la prueba y la implementación de código en un entorno real.
Extensión VS Code para formatear y desnudar código
15、Más bonita
Prettier es la herramienta de formateo y pelusa más popular para estandarizar el código de acuerdo con las mejores prácticas de la industria. También garantiza que su equipo produzca un código visualmente fluido, por lo que no hay más discusiones sobre cuántas pestañas o espacios usar, o dónde deben ir los paréntesis.
Haga que su código se vea bien con la extensión de código Prettier Visual Studio.
16, embellecer
Beautify es una alternativa a la extensión Prettier con 7 millones de instalaciones. Beautify es otro "embellecedor" de código sólido que inspecciona y formatea su código con una intervención mínima en su código. Puede usarlo para formatear código escrito en cualquier idioma con facilidad.
17、Mejores comentarios
La extensión Better Comments VS Code puede formatear los comentarios según su tipo. Puede usar diferentes estilos de comentarios, incluidas tareas pendientes, preguntas, recordatorios y más.
Esta extensión también le permite priorizar las reseñas por importancia y tiene una poderosa función de búsqueda que le permite encontrar rápidamente reseñas específicas por palabra clave o tipo.
18, ES Lint
La extensión ESlint VS Code detecta errores y problemas potenciales antes de que se conviertan en problemas. Proporciona un sólido conjunto de reglas que se pueden adaptar a sus requisitos específicos, lo que le permite aplicar sus propias convenciones de codificación.
Se puede integrar con otras extensiones populares, como Prettier, que le permite formatear automáticamente su código de acuerdo con las reglas de linting.
19, MarkdownLint
La extensión MarkdownLint es una herramienta de corrección y advertencia de errores fácil de usar. Se puede acceder a los detalles del error haciendo clic en el problema resaltado en el editor de código.
MarkdownLint también se integra con otras extensiones populares, como un corrector ortográfico, que le permite verificar automáticamente sus archivos de rebajas en busca de errores ortográficos.
Extensiones de VS Code para depuración y solución de problemas
20, Depurador de Javascript
La extensión del depurador de Javascript crea puntos de interrupción y pasos en su código. Esto permite a los codificadores pausar la ejecución del código y examinar las variables y la pila de llamadas, lo que simplifica la identificación y corrección de errores.
Esta extensión de VS Code viene con una consola interactiva que permite a los desarrolladores evaluar expresiones, ejecutar código y probar y depurar código en tiempo real. Proporciona una experiencia de depuración integral para todo tipo de proyectos de JavaScript.
21, Corrector ortográfico de código
Evite los errores tipográficos con Code Spell Checker VS Code Extension. Simplemente resalta cualquier error ortográfico a medida que escribe. Tiene una interfaz de corrección de errores fácil de usar a la que se puede acceder haciendo clic derecho en un problema resaltado en el editor de código. Comprueba varios idiomas, lo que le permite asegurarse de que su código esté libre de errores en cualquier idioma.
22, Registro de la consola Turbo
Depure su código sin agregar declaraciones de registro manualmente. La extensión Turbo Console Log le permite agregar declaraciones de registro de consola a su código con solo un clic.
Tiene una consola interactiva para evaluar expresiones y ejecutar código. Ayuda a los desarrolladores a probar y depurar código en tiempo real. También puede personalizar la salida de las declaraciones de registro y lograr un formato más legible resaltando objetos y variables.
23, Visor de expresiones regulares
Regex Previewer proporciona patrones de expresiones regulares para su código. Estos patrones se prueban con texto de muestra que debe coincidir con el texto resaltado en tiempo real. Con él, puede identificar y corregir rápidamente errores en patrones de expresiones regulares.
Además, esta extensión incluye una amplia documentación sobre la sintaxis de expresiones regulares y una biblioteca de patrones de expresiones regulares comunes que se pueden copiar y pegar fácilmente en su código.
Extensiones de VS Code para javascript, react, java, html y css
24, Fragmentos de código de JavaScript
A menudo se encontrará reutilizando varios fragmentos de código en sus proyectos de Javascript simplemente copiando y pegando. Esta tarea puede llevar mucho tiempo, por lo que tener una gran cantidad de fragmentos de código JavaScript diferentes disponibles a través de simples atajos de teclado puede ayudarlo a ser más productivo.
Los fragmentos de JavaScript son fragmentos preconstruidos que puede incluir fácilmente en su código. También es compatible con bibliotecas y marcos de JavaScript específicos, como Angular, Vue.js y Node.js.
25, Fragmentos de código de Reactjs
La extensión Reactjs Code Snippets VS Code ayuda a los desarrolladores a mejorar su flujo de trabajo y la velocidad del código al proporcionar plantillas cuidadosamente empaquetadas y preescritas. Solo necesita escribir el comando de activación para obtener el fragmento de código requerido.
Puede usar esta herramienta para minimizar el tiempo de codificación y concentrarse en lo que mejor sabe hacer: resolver problemas del mundo real.
26, soporte de lenguaje Java
El paquete de extensión de Java incluye varias extensiones para asistencia de codificación, depuración, depuración, formateo y prueba.
Algunas de las extensiones más populares son:
Java Development Kit (JDK) 11 o posterior: necesita el JDK para crear y ejecutar aplicaciones Java. Proporciona soporte completo de idiomas, incluidas funciones como resaltado de sintaxis, finalización de código y depuración.
IntelliCode Java Test Runner: esta extensión facilita la ejecución y depuración de pruebas unitarias en su proyecto. Se integra con marcos de prueba populares como JUnit, TestNG, etc. para brindar una experiencia de prueba perfecta.
Depurador de Java: esta extensión tiene muchas funciones y le permite establecer puntos de interrupción, inspeccionar variables, recorrer el código y muchas más opciones para una fácil depuración.
Soporte de lenguaje de Red Hat para Java: ayuda a mantener una plataforma de desarrollo Java estable y segura, así como herramientas para ayudar a construir, implementar y administrar aplicaciones Java.
En general, Java Language Support Package hace que su entorno Java sea más eficiente y simplifica su experiencia de desarrollo Java.
27, compatibilidad con CSS HTML
La compatibilidad con HTML CSS se amplía para editores de texto y entornos de desarrollo integrados (IDE) para mejorar la compatibilidad con el desarrollo de HTML y CSS.
También proporciona funcionalidad adicional, que incluye:
IntelliSense para HTML y CSS: esta es una función de finalización de código que sugiere etiquetas HTML, atributos, propiedades CSS, valores y unidades mientras se escribe código.
Compatibilidad con Emmet: genera notación abreviada para HTML y CSS para ayudarlo a escribir una sintaxis limpia y expandirla a código HTML o CSS completo con solo unos pocos clics.
Finalización de nombres de clases CSS: autocompletar nombres de clases CSS en documentos HTML.
Opciones de formato y linting HTML y CSS: una herramienta imprescindible para formatear y estructurar código HTML y CSS para facilitar la lectura.
Previsualizador de color CSS incorporado: si tiene problemas con esquemas de color complejos o se siente perdido al ajustar los colores de su sitio, esta función puede ayudarlo. Muestra una vista previa de los colores en sus códigos de color CSS.
en conclusión
Numerosas extensiones están disponibles en Visual Studio Marketplace para ayudar a los desarrolladores a ser más eficientes y productivos. Hemos enumerado las principales extensiones de Visual Studio Code que pueden tener el mayor impacto en su vida como desarrollador. Pruébelos y use estas extensiones para simplificar su flujo de trabajo.