VSCode es el editor de codigo más utilizado debido a su ecosistema de extensiones. Las extensiones en VSCode pueden hacer que el editor pase de ser solo un editor a servir como un IDE.
Estas extensiones te ayudan en productividad, eficiencia y consistencia. Proporcionan características únicas que pueden ayudarlo a trabajar más rápido con tecnologías como Next JS, React JS, Vue, Node JS, JavasScript.
Aqui traemos una lista con algunas de las extensiones mas populares:
Code runner
Code runner puede ejecutar fácilmente su código y producir los resultados en su VSCode Output (ventana de terminal). Esta extensión puede ejecutar códigos de más de 41 lenguajes populares, incluidos JavaScript, Python y Rust.
Puede ejecutar todos los códigos en un archivo, así como ejecutar un código seleccionado. Por ejemplo, puede seleccionar una función y ejecutar solo esa función. Esto puede ser muy útil para la depuración.
Al ejecutar un código seleccionado, debe asegurarse de que el código seleccionado no dependa de un código no seleccionado, ya que esto puede generar un error.
Solicitudes de extracción de GitHub
La extensión GitHub Pull Request lo ayuda a revisar y administrar sus solicitudes de extracción y problemas de GitHub directamente dentro de VSCode.
Con él, puede enumerar fácilmente problemas y extraer solicitudes de GitHub. Puede comentar problemas, comenzar a trabajar en problemas, revisar y validar solicitudes de extracción y mucho más.
Ya no es necesario abrir el sitio web de GitHub para administrar solicitudes de extracción o resolver problemas, todo se puede hacer directamente en VSCode.
REST Client
REST Client le permite realizar y administrar solicitudes HTTP y ver la respuesta directamente en su editor.
Con esta extensión, puede organizar fácilmente solicitudes HTTP similares (GET, POST, DELETE, PUT, etc.), una característica interesante para trabajar con API. La respuesta de sus solicitudes se puede guardar fácilmente en su disco local.
También es compatible con GraphQL y con la autenticación. Es un excelente reemplazo para Postman, Insomnia, RapidAPI y funciona directamente en VSCode, por lo que no es necesario navegar entre dos aplicaciones.
ESLint
ESLint es una popular biblioteca de código abierto de JavaScript de la fundación OpenJS. Ahora puede integrarse en VSCode con esta extensión. Detecta errores y los corrige automáticamente o proporciona opciones para corregirlos manualmente.
Estos errores se generan a partir de errores de sintaxis o violaciones de la guía de estilo. Las guías de estilo son proporcionadas por diferentes compañías, incluidas Airbnb y Google.
ESLint es fácil de configurar debido a su documentación y también es muy personalizable. Te ayuda a personalizar tus guías de estilo y ser coherente con ellas.
Prettier
A menudo, el formato de nuestro código puede estropearse rápidamente: sangramos incorrectamente nuestro código JavaScript, escribimos más de 80 caracteres por línea, etc. Todo esto puede hacer que nuestro código se vea realmente feo y difícil de leer, lo que significa que es difícil de mantener.
Pero, aquí es donde entra Prettier , formatea nuestro código para que se vea bien y legible. Este formateo incluye sangrar correctamente nuestro código, desglosar el código si es demasiado largo, ser consistente con agregar punto y coma o no y mucho más.
¿Quieres más cursos gratis?
Únete a nuestro canal en Telegram con cientos de cursos gratis publicados diariamente
Puede configurar fácilmente una guía de estilo para que sea más bonita directamente en VSCode. ESLint y Prettier pueden trabajar perfectamente juntos para ayudar a brindarle a su equipo una guía de estilo de JavaScript para ser consistente, muy útil para el mantenimiento.
Viento de colaCSS
TailwindCSS es una extensión de código abierto que le brinda características interesantes para una máxima productividad cuando usa Tailwind CSS.
Como sabemos, Tailwind se trata principalmente de clases, esta extensión le brinda un autocompletado rápido de todos los nombres de clase en TailwindCSS. Con esta extensión, puede ver el estilo de un nombre de clase en particular al pasar el cursor sobre él.
Tailwind CSS también proporciona pelusa para errores en la hoja de estilo o el marcado. Entonces, si usa incorrectamente un nombre de clase, se lo hará saber. ¿Guay, verdad?
GitLens
GitLens potencia las capacidades de Git integradas en VSCode. Le brinda detalles de cualquier cambio de git, autor y hora de los cambios de un vistazo.
Eso significa que mientras codifica puede ver los detalles de los cambios de git al lado del código. Al pasar el mouse, le brinda más información de git y acciones sobre esa línea de código.
Estas acciones incluyen la preparación de cambios, la confirmación de cambios, la inserción de confirmaciones y mucho más. Realmente no necesitaría la CLI de Git con esta extensión. Además, puede navegar y revisar fácilmente el historial de git (hacia atrás y hacia adelante) de cualquier archivo.
Te puede interesar también:
- ¡Crea tu sitio web hoy mismo! Curso gratuito de WordPress para principiantes
- Aprende Machine Learning desde cero: Curso online sin costo
- ¿Quieres ser programador Java? Comienza con este curso gratis
indent-rainbow
Indent rainbow colorea las sangrías antes de su código. Esto es muy útil para lenguajes como JavaScript y Python. Con cada nivel con diferentes colores, puede saber fácilmente qué nivel de sangría tiene.
Esta extensión se puede personalizar para que pueda cambiar fácilmente los colores de cada nivel y también puede extenderla para tener más colores más allá de cuatro.
DotENV
La extensión DotENV resalta sus .envarchivos para que se vean bien y sean fáciles de entender. Como desarrollador de Node, esto será muy útil al configurar las variables de entorno en un .envarchivo.
Esta extensión proporciona diferentes colores para comentarios (permite comentarios), cadenas, números, propiedades, palabras clave y mucho más. Esto solía ser todo blanco en VSCode, pero esta extensión cambia eso. Básicamente, hace que sus .envarchivos se vean como otro archivo de idioma con resaltado de sintaxis.
VSCode Icons
VSCode-Icons proporciona íconos de archivos/carpetas interactivos y atractivos basados en el nombre de la carpeta/archivo o en la extensión del archivo.
Con diferentes tipos de carpetas o archivos que tienen diferentes íconos, puede navegar sin problemas a través de su proyecto sin tener que leer el nombre de la carpeta o el archivo todo el tiempo. Y esto implica una navegación más fácil y rápida, al tiempo que hace que la lista de archivos de su editor sea atractiva y accesible.
Deja tus comentarios y sugerencias
Sobre Facialix
Facialix es un sitio web que tiene como objetivo apoyar en el aprendizaje y educación de jóvenes y grandes. Buscando y categorizando recursos educativos gratuitos de internet, de esta manera Facialix ayuda en el constante aprendizaje de todos.
