Open in app

Sign in

Write

Sign in

Top JavaScript VSCode Extensiones para un desarrollo más rápido 🔥

Wilber Ccori huaman
7 min readAug 28, 2018

VSCode es un editor de código abierto y multiplataforma que se ha convertido en el favorito de los programadores, especialmente en la comunidad de desarrollo web. Es rápido, extensible, personalizable y tiene muchísimas funciones. Debería verificarlo si aún no lo ha hecho.

Se han realizado miles de extensiones para VSCode. Voy a enumerar algunas extensiones que uso día a día. Comencemos !

Quokka.js

Quokka.js es un campo de creación rápida de prototipos para JavaScript y TypeScript. Lo que eso significa es que ejecuta su código inmediatamente mientras escribe y muestra varios resultados de ejecución en su editor de código. Inténtalo tú mismo.

Después de instalar esta extensión , puede presionar Ctrl / Cmd (⌘) + Shift + P para visualizar la paleta de comandos del editor, y luego escribir Quokkapara ver la lista de los comandos disponibles. Seleccione y ejecute el comando Nuevo archivo de JavaScript . También puede presionar (⌘ + K + J) para abrir el archivo directamente. Todo lo que escriba en este archivo se ejecuta inmediatamente.

Quokka.js

Extensiones similares -

  • Code Runner : admite múltiples idiomas como C, C ++, Java, JavaScript, PHP, Python, Perl, Perl 6 y más.
  • Corredor

Parche Colorizer e Indent Rainbow de paréntesis 🔥🔥

Los corchetes y paréntesis son una parte inseparable de muchos lenguajes de programación. En un lenguaje como JavaScript, una sola página puede tener un aluvión de estos caracteres sin un mecanismo fácil para identificar pares de apertura y cierre. Bienvenido Soporte Par Colorizer e Indent Rainbow . Estas son dos extensiones diferentes. Sin embargo, realmente hacen una pareja buena y hermosa. Estas extensiones llenarán tu editor con una ráfaga de colores y harán que los bloques de código sean fácilmente discernibles y agradables a los ojos. Una vez que te acostumbras a ellos, VSCode se siente insípido e insulso sin ellos.

Sin Indent Rainbow y Color par de soporte
🔥🔥 Con Indent Rainbow y Bracket Pair Colorizer 🔥🔥

Fragmentos

Los fragmentos son palabras cortas en un editor. Entonces, en lugar de escribir import React from 'react';, puede escribir imry presionar Tab para expandir este fragmento. Del mismo modo, se clgconvierte console.log.

Existe una gran cantidad de fragmentos para todo tipo de cosas:Javascript (o cualquier otro idioma), React, Redux, Angular, Vue, Jest. Personalmente encuentro los fragmentos de Javascript realmente útiles ya que trabajo principalmente con JS.

Algunas buenas extensiones de fragmentos son:

Todo Highlighter

A menudo sucede que codifica una función y piensa que hay una forma probablemente mejor de hacer lo mismo. Deja un comentario // TODO: Needs Refactoringo algo por el estilo. Pero luego te olvidas de la nota e insertas tu código en master / producción. Con Todo Highlighter , eso no sucederá. Ojalá.

Destaca tus TODO / FIXME o cualquier otra anotación en tu código en colores brillantes para que siempre esté claramente visible. Una característica ingeniosa es List Highlighted annotations. Enumera todos los TODO en la consola de salida.

Todo Highlighter

Extensiones similares -

Costo de importación

Esta extensión le permite ver el tamaño del módulo importado. Es una gran ayuda con bundlers como Webpack. Puede ver si está importando la biblioteca completa o solo una utilidad en particular.

Un problema que existe es que no muestra el costo de los archivos o módulos personalizados.

Costo de importación

Cliente REST

Como desarrollador web, a menudo necesitamos trabajar con API REST. Para examinar las URL y verificar las respuestas, se utilizan herramientas como Cartero . Pero ¿por qué tener una aplicación diferente cuando tu editor puede hacer la misma tarea fácilmente? Bienvenido REST Client . Le permite enviar solicitudes HTTP y ver la respuesta en Visual Studio Code directamente.

Cliente REST

Etiqueta de cierre automático y etiqueta de cambio de nombre automático

Desde el advenimiento de React y la tracción que ha ganado en los últimos años, la sintaxis de tipo HTML en forma de JSX está de moda ahora. Nuevamente tenemos que codificar con etiquetas JavaScript. Cualquier desarrollador web le diría que es un dolor escribir las etiquetas. En la mayoría de los casos, necesitamos una herramienta que pueda generar etiquetas rápida y fácilmente y sus hijos. Emmet es un buen ejemplo de esto ya incorporado en VSCode. Sin embargo, a veces, solo quieres algo simple y conciso. Tal como un cierre automático de etiquetas, que genera el par de cierre de una etiqueta a medida que ingresa el par de apertura. Y cuando cambias esa misma etiqueta, la etiqueta de cierre cambia automáticamente. Estas dos extensiones hacen exactamente eso.

También funciona con JSX y muchos otros lenguajes como XML, PHP, Vue, JavaScript, TypeScript, TSX.

Consígalos aquí — Etiqueta Auto Close y etiqueta Auto Rename

Etiqueta de cambio de nombre automático
Etiqueta de cierre automático

Extensiones similares -

GitLens

Como dijo su autor, GitLens sobrealimenta las capacidades de Git integradas en Visual Studio Code. Incluye una sorprendente cantidad de características, como la autoría del código que se muestra a través de la lente del código, la búsqueda de compromiso, la historia y el explorador de GitLens. Puede leer explicaciones completas de estas características aquí . Baste decir que debes instalar este complemento si trabajas con git.

Hay otras extensiones que se centran en una funcionalidad específica. Puede instalarlos si GitLens se siente hinchado o si no usa muchas de sus funciones.

Extensiones similares -

  • Historia de Git : muestra un bello gráfico del historial de confirmaciones y mucho más. Recomendar .
  • Git Blame : te permite ver la información de Git Blame en la barra de estado de la línea seleccionada actualmente. GitLens también proporciona una función similar.
  • Indicadores de Git : le permite ver los archivos afectados y cuántas líneas se han agregado o eliminado en la barra de estado.
  • ¡Abrir en GitHub / Bitbucket / Gitlab / VisualStudio.com! — Te permite abrir el repositorio en el navegador con un solo comando.

Git Project Manager

Git Project Manager (GPM) le permite abrir una nueva ventana que se dirige a un repositorio git directamente desde la ventana VSCode. Básicamente, ahora puede abrir otro repositorio sin tener que abandonar VSCode.

Después de instalar esta extensión , deberá establecer gitProjectManager.baseProjectsFoldersla lista de URL que contienen los repositorios.

Ejemplo -

{
    "gitProjectManager.baseProjectsFolders": [
        "/home/user/nodeProjects",
        "/home/user/personal/pocs"
    ]
}
Git Project Manager

Extensiones similares -

  • Gerente de proyecto : no lo usó personalmente, pero tiene más de un millón de instalaciones. Así que definitivamente échale un vistazo.

Identificador

Se resalta visualmente la profundidad de sangría actual. Entonces ahora puedes distinguir fácilmente entre varios bloques sangrados en diferentes niveles. Consíguelo aquí .

Identificador

Extensiones similares

Iconos de VSCode

Iconos para hacer que tu editor sea más atractivo.

Iconos de VSCode

Extensiones similares -

Drácula (Tema)

Un tema que me gusta

Tema de Drácula

Otras recomendaciones -

Estas fueron algunas de las extensiones de VSCode que uso regularmente. ¿Qué otras extensiones y temas te gustan? Responda a este artículo y menciónelos. 😀

si te gusto dale muchos aplausos

Para conocer mas tecnologias pueden seguirme en mis redes sociales:
facebook: https://web.facebook.com/wilbeDEV/
facebook: https://web.facebook.com/TechManiako/
Grupo_facebook: https://web.facebook.com/groups/166091130742535/
YouTube: https://www.youtube.com/c/WILBERCCORIDEVELOPER
Blogs: https://www.techmaniako.com/ED/
GitHub: https://github.com/wilberCcoriHuman

linkedin: https://www.linkedin.com/in/wilber-ccori-huaman-63389113b/

--

--

Wilber Ccori huaman

Written by Wilber Ccori huaman

168 Followers

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams