Botón para abrir el Menú Botón para cerrar el Menú
Logo da empresa Alura
Iniciar Sesión Nuestros Planes
Formaciones Conoce a Luri
  • Programación _
  • Front End _
  • Data Science _
  • DevOps _
  • Innovación y Gestión _
Artículos de Tecnología > Front-end

Extensiones de VSCode: descubre cuáles son las más utilizadas

Beatriz Moura
Beatriz Moura
30/01/2022

Compartir

Mira este artículo:
  1. ¿Qué son las extensiones?
  2. Live Server
  3. Visual Studio IntelliCode
  4. Beautify
  5. BookMarks
  6. Auto Import
  7. VSCode Icons
  8. GitLens
  9. Brackets Pair Colorizer

fundo-card

Como uno de los entornos de desarrollo integrado (IDE), más querido por los desarrolladores se encuentra Visual Studio Code, tiene una gran variedad de extensiones en su ecosistema que ayudan en el proceso de escritura de código e independientemente de cualquier lenguaje.

A continuación, te presentaré una lista de extensiones que pueden ser útiles para que tu proceso de desarrollo sea más ágil y productivo.

Si aún no tiene VSCode instalado en tu máquina, haz clic aquí para descargarlo.

¿Qué son las extensiones?

Las extensiones o complementos son herramientas diseñadas para "ajustarse" al programa principal y agregarle funciones. Suelen ser ligeros, no comprometen el funcionamiento del software y son fáciles de instalar.

¡Cada desarrollador tiene su propia forma de programar y es por eso que las extensiones pueden ser grandes aliadas! Con ellos pudimos adaptar VSCode a nuestras necesidades, creando un ambiente más funcional en la rutina de trabajo y estudio.

Live Server

Una de las extensiones imprescindibles para cualquiera que trabaje con front-end a través de Visual Studio Code. ¿Has hecho ese proyecto de html, css y javascript que cada vez que necesitas ver los cambios que has hecho en el código, tienes que actualizar el navegador para ver el resultado? ¡Pues ya no será necesario! Este complemento crea un localhost de la aplicación y cada cambio que se guarda en el proyecto se actualiza automáticamente, evitando actualizar la página con cada modificación realizada en el código. Una vez instalado, simplemente haga clic en el botón Go Live y un localhost se abrirá en su navegador predeterminado.

gif-01

Para descargar esta extensión, haga clic aquí.

Visual Studio IntelliCode

¿Te gustaría usar inteligencia artificial para ayudarte a autocompletar tu código? Esta extensión utiliza la inteligencia artificial y el contexto de tu código para ofrecerte autocompletados referentes a lo que estás escribiendo y acelerando el desarrollo de tu proyecto.

gif-02

Para descargar esta extensión, haga clic aquí.

Beautify

Es uno de los complementos más famosos de los desarrolladores, es un embellecedor de código, creando sangría para archivos json, html, css, Sass y javascript.

gif-03

Descarga esta versión haciendo clic aquí.

BookMarks

Es una extensión que ayuda a marcar líneas o fragmentos de código. ¿Sabe cuándo necesita cambiar una línea de código pero no lo hará en ese momento? BookMark te ayudará a recordarlo. El genera una pestaña única con todas las etiquetas creadas a partir de todos los archivos de su proyecto. Además de la forma de seleccionar un marcador como se muestra en el Gif a continuación, se puede hacer mediante el comando Alt + Windows + k, en Windows o en Mac, Option + Command + k.

gif-04

Haga clic aquí para descargar.

Auto Import

En esta extensión, las importaciones se ubicarán, analizarán y completarán automáticamente la importación a la que se llama.

Descargar.

gif-05

VSCode Icons

Esta extensión crea íconos para cada tecnología que se utiliza en el proyecto, lo que ayuda a organizarlo e identificarlo mejor. Haga clic aquí para descargarlo.

gif-06

GitLens

Esta extensión ayudará al trabajo en equipo, ya que promueve la visualización de cambios y adiciones realizadas al código, trayendo las diferencias de cada código y una sesión exclusiva de GitLens, que agrega la información más importante del repositorio, como los compromisos realizados, ramificaciones , etiquetas, etc.

Haga clic para descargar.

gif-07

Brackets Pair Colorizer

Famosa extensión que es muy útil para diferenciar con diferentes colores los pares de corchetes en el código, facilitando la visualización de los distintos corchetes encadenados que pueden aparecer.

Puedes descargarlo haciendo clic aquí.

gif-08

En VSCode aún existen otras extensiones que te ayudarán en la productividad y agilidad de tu desarrollo.

¡Ahora está listo para! Si te gustó este artículo y quieres saber más sobre VSCode y Front-end, nuestros cursos y capacitaciones pueden ayudarte.

Beatriz Moura
Beatriz Moura

Estudante de Analise e Desenvolvimento de Sistemas, troquei a área da saúde e mergulhei em programação!Apaixonada por desenvolvimento Front-end e entusiasta de UX/UI Design.Descobri a paixão por ensinar sendo monitora durante uma outra graduação de ensino, onde também era presidente de Liga Acadêmica e Diretora de Mídia no Diretório Acadêmico.Atualmente sou Instrutora e Desenvolvedora de Software na Alura e já fiz parte do Scuba Team de Front-end.

Artículo Anterior
React: componentes con Styled Components
Siguiente Artículo
Glosario de Front-end

Ver otros artículos sobre Front-end

Navegación

  • Planes
  • Instructores
  • Blog
  • Política de privacidad
  • Términos de uso
  • Sobre nosotros
  • Preguntas frecuentes

¡CONTÁCTANOS!

  • ¡Quiero entrar en contacto!

Blog

  • Programación
  • Data Science
  • Front End
  • Innovación y Gestión
  • DevOps

AOVS Sistemas de Informática S.A CNPJ 05.555.382/0001-33

SÍGUENOS EN NUESTRAS REDES SOCIALES

YouTube Facebook Instagram Linkedin Whatsapp Spotify

NOVEDADES Y LANZAMIENTOS

Aliados

  • Programa de aceleração Scale-Up Endeavor
  • En Alura somos unas de las Scale-Ups seleccionadas por Endeavor, programa de aceleración de las empresas que más crecen en el país.
  • Growth Academy 2021 do Google For Startups
  • Fuimos unas de las 7 startups seleccionadas por Google For Startups en participar del programa Growth Academy en 2021
Alura

Powered by

Caelum

AOVS Sistemas de Informática S.A CNPJ 05.555.382/0001-33

SÍGUENOS EN NUESTRAS REDES SOCIALES

YouTube Facebook Instagram Linkedin Whatsapp Spotify

Cursos

Cursos de Programación
Lógica de Programación | Java
Cursos de Front End
HTML y CSS | JavaScript | React
Cursos de Data Science
Data Science | Machine Learning | Excel | Base de Datos | Data Visualization | Estadística
Cursos de DevOps
Docker | Linux
Cursos de Innovación y Gestión
Transformación Ágil | Marketing Analytics

Alura

  • Educação em Tecnologia

    • logo fiap FIAP
    • logo casa do codigo Casa do Código
    • logo pm3 PM3 - Cursos de Produto
  • Mais Alura

    • logo alura start START BY Alura
    • logo alura lingua Alura Língua
    • logo alura para empresas Alura Para Empresas
    • logo alura latam Alura LATAM
  • Comunidade

    • logo tech guide Tech Guide
    • logo 7 days of code 7 days of code
    • logo Hipsters ponto Jobs Hipsters ponto Jobs
  • Podcasts

    • logo Hipster Network Hipster Network
    • logo Hipsters ponto Tech Hipsters ponto Tech
    • logo Dev sem fronteiras Dev sem Fronteiras
    • logo Like a Boss Like a Boss
    • logo IA Sob Controle IA Sob Controle
    • logo Mesa de Produto Mesa de Produto
    • logo Decode Decode
    • logo FIAPCast FIAPCast