308

10 Plugins o extensiones esenciales de VSCode para Frontends

30433Puntos

hace 5 años

Desde hace tiempo trabajo con Visual Studio Code, un editor de código creado por Microsoft que poco ha poco a aumentado su popularidad entre los desarrolladores por su facilidad para personalizar, así como su gran rendimiento.

Es por eso que quiero recomendarte los 10 complementos que utilizo en mi día a día como desarrollador Frontend en Platzi, los cuales me ayudan a realizar mejor mi trabajo, así como tener algunas ventajas para ser más productivo.

Banner prework windows.png

[Lista] 10 plugins o extensiones que utilizo en VSCode

Aquí te va la lista de las que considero son las 10 mejores extensiones para Visual Studio Code.

  1. Babel JavaScript
  2. Color Highlight
  3. ESLint
  4. GitLens
  5. Import Cost
  6. Indent-rainbow
  7. Trailing Spaces
  8. Auto Close Tag
  9. WakaTime
  10. Settings Sync

Entremos más en detalle sobre cada una de estas extensiones.

1. Babel JavaScript

Resaltar la sintaxis de JavaScript, React, Angular, Vue, JSX, Flow y GraphQL, la cual me permite ser más productivo cómo desarrollador JavaScript más dinámico y detectar errores.

https://static.platzi.com/media/user_upload/plugin-babel-vscode-7635aeed-0dc5-4e19-ba04-6354dda9500b.jpg

2. Color highlight

Esta extensión es de mis favoritas, me permite identificar con mayor facilidad los colores que estoy utilizando dentro de mis proyectos en HTML/CSS (También funciona con archivos de Stylus) y apreciar con mayor facilidad el color que estoy utilizando.

3. ESLint

Me permite integrar ESLint dentro de VSCode y con la configuración previa dentro del proyecto, puedo detectar errores en tiempo de desarrollo, es muy útil cuando integras un estándar de trabajo como el propuesto por AirBnb.

4. GitLens

Añada superpoderes a VSCode para trabajar con GIT. Permite crear una auditoria del código a través de anotaciones y nos permite navegar a los cambios por medio de una anotación sobre cualquier línea de código.

https://static.platzi.com/media/user_upload/plugin-gitlens-vscode-b6d194b9-582a-4aa2-9670-a0c1a7b9b598.jpg

5. Import Cost

Esta extensión me permite saber el tamaño del paquete que estoy importando, así como detectar si es demasiado pesado para nuestros proyectos. Saber el tamaño de los recursos que estamos importando nos permitirá entender y trabajar con mayor calidad nuestros proyectos.

https://static.platzi.com/media/user_upload/plugin-import-cost-vscode-eaff6adf-e54a-4717-beb4-b1b3cc9f0f42.jpg

6. Indent-Rainbow

Una de las cosas que más me fijo como desarrollador es tener un código limpio, fácil de entender y bien indentado; es por esto que utilizo este complemento para detectar con mayor facilidad la indentación de mis proyectos.

https://static.platzi.com/media/user_upload/plugin-indent-rainbow-vscode-9f9a81e6-c019-4288-8d04-90d7a5e91f74.jpg

ES7 React/Redux/GraphQL/React-Native snippetsAngular 8 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex LayoutVue 2 Snippets

Como su nombre lo dice nos permite tener una colección de accesos rápidos para construir nuestro código en React, Angular o Vue. Esto te ayudará a automatizar las tareas repetitivas al momento de crear nuevos componentes, funciones y código de en los proyectos.

7. Trailing Spaces

Una extensión muy simple, pero me permite dejar mi código limpio y libre de espacios innecesarios, esta extensión nos marcara en rojo todos aquellos espacios que dejamos dentro de nuestro código.

https://static.platzi.com/media/user_upload/plugin-trailing-spaces-vscode-3a9661a6-a744-47f6-bed2-fd9ab5bb3642.jpg

8. Auto Close Tag

No puede faltar la extensión que nos ayude a cerrar los tags, es muy útil cuando estamos maquetando ya que nos brinda un rendimiento a la hora de crear código.

9. WakaTime

Quieres mejorar tu rendimiento como desarrollador, WakaTime es la herramienta para ti. Nos permite conocer las métricas, perspectivas y seguimiento del tiempo que invertimos en nuestros proyectos. La recomiendo demasiado para entender cómo trabajamos, cuánto tiempo gastamos en un desarrollo y poder llevar un mejor control como desarrollares.

https://static.platzi.com/media/user_upload/plugin-wakatime-vscode-406140b6-7540-40a7-ad45-d44d1eacd8e6.jpg

Bonus: la extensión extra que necesitas

10. Settingns Sync

Esta extensión es mi favorita, permite tener un respaldo de todas las extensiones, configuraciones locales, temas y preferencias de VSCode, utiliza Github Gist donde almacena la información de forma privada, de esta forma siempre tendrás actualizado y en buen resguardo tu configuración favorita.

Y por último…

Espero que estas recomendaciones te sirvan, si tienes una extensión que quieras compartir con la comunidad, ponla en los comentarios.

Recuerda que en Platzi encuentras la Escuela de Desarrollo Web donde tienes diferentes cursos para que sigas desarrollando tu carrera. Por ejemplo, puedes entrar al Curso Definitivo de HTML y CSS y ver lo que hemos preparado para ti.

Oscar
Oscar
gndx

30433Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
23
18457Puntos
5 años

Uff Settings Sync se convirtió en mi favorita también 😃.

2
30433Puntos
5 años

Es una gran herramienta, nos permite tener todo bien configurado y resguardado en la nube.

2
10426Puntos
5 años

la tengo pero no se usarl u.u

2
19368Puntos
3 años

en las últimas versiones de Code ya viene integrado

9
20126Puntos
5 años

highlight-matching-tag permite ver donde inicia y cierra una etiqueta

1
30433Puntos
5 años

Lo probare, he usado algunos pero no me terminan de convencer.

5
59041Puntos
5 años

Estos me van a ser muy útiles!

4
13812Puntos
5 años

Están excelentes los plugins, me encanto WakaTime para poder llevar mi tiempo.

Estoy muy agradecido por la información compartida

1
30433Puntos
5 años

Es mi favorito junto a Settings Sync 😃

4
5 años

me he dejado tentar por su popularidad lo probare se ve que va muy bien

1
30433Puntos
5 años

Te va gustar sin duda 😃

3
29645Puntos
5 años

Solo me faltaban los de indentación y los de espacios vacíos

🤘

3
10601Puntos
5 años

Gracias Oscar Desde que vi tus configuraciones en el curso de Developers Circles, quede fascinado. ¡un millón mi pana!

2
12595Puntos
5 años

Muy buen aporte, ya los estoy probando!

1
30433Puntos
5 años

Excelente

2
14428Puntos
5 años

Instalando y sincronizando !!

1
30433Puntos
5 años

Que genial 😃

2
711Puntos
5 años

Trailing Spaces no es necesaria, hay una configuración en vscode llamada “Trim Trailing Whitespace” que al activarla automáticamente remueve los espacios innecesarios al final de cada línea cada que se guarda el archivo.
Esto tomando en cuenta de que entre menos extensiones, mejor performance tendrá vscode.

2
30433Puntos
5 años

Tiene razón en lo que comentas, un punto para utilizar “Trailing Spaces” es por que me ha servido para darme cuenta donde estoy dejando espacios, para mi es una forma de ir mejorando, por que cómo desarrollador poco a poco evito dejar esos espacios en el código.

Si dejamos que lo haga por nosotros cuando no tengamos la opción o estemos editando algún archivo desde un servidor sin un editor de código es donde no tendremos esta buena practica

2
13850Puntos
5 años

Muchas Gracias Oscar, muy buena info. en lo personal, no uso vscode, pero supongo habran sus similares para sublimetext.

1
30433Puntos
5 años

Si, todos estos elementos tienen una versión para SublimeText, pero te invito a probar VSCode.

2
12225Puntos
5 años

Como consigo esos puntitos al identar?

1
30433Puntos
5 años

Los encuentras en la configuración de VSCode en la parte de indentación

1
4 años

VS Code
View -> Deschequea y vuelve a chequear “Render WhiteSpace” y listo c:

2
17981Puntos
4 años

Les recomiendo Bracket Pair Colorizer 2 para ver de forma colorida donde abren y cierran los bloques de código.

2
10839Puntos
5 años

¿Como se llama el tema que está en la captura donde hablas de ‘Trailing Spaces’?

5
30433Puntos
5 años

SynthWave '84

1
28680Puntos
4 años

En su configuración cuanto usas en:
“synthwave84.brightness”: 0.55
"synthwave84.disableGlow": true

2
6194Puntos
5 años

¡Muchas gracias por el aporte!

2
19335Puntos
5 años

Ahora solo falta tener la memoria RAM para que los plugins funcionen sin que el pc se vuelva loco

2
30433Puntos
5 años

En mi caso no he tenido problemas con estos plugins en un equipo con Linux, Windows con 4 de RAM, que es un computador que uso en casa.

1
4 años

VS Code
View -> Deschequea y vuelve a chequear “Render WhiteSpace” y listo c:

2
21194Puntos
5 años

Gracias, buen Blog

2
23807Puntos
5 años

Increíble aporte, muchas gracias

2
27072Puntos
5 años

¿cuál es el tema para ver en vsc mi código en neón ?

2
8011Puntos
5 años

Hola! me gustaría saber cual es el tema que usa en el VSCode para que las palabras reservada brillen de esa forma, se ve muy genial! un saludo profe c:

1
4 años

Ctrl + Shift + P or Shift + ⌘ + P and choose “Enable Neon Dreams”

1
22055Puntos
3 años

SynthWave '84
es la extensión de la letra con efecto neon

2
8394Puntos
5 años

Estaría genial se explicara el buen uso de este plugin Settingns Sync

2
1881Puntos
5 años

Excelente, me gustó bastante WakaTime

2
17365Puntos
5 años

Gracias Oscar , gran aporte. Estoy pasando de atom a vscode y me cae genial tu post.

Añadiría Bracket Pair Colorizer 2 !

1
30433Puntos
5 años

No lo conocía, lo voy a probar.

1
8884Puntos
4 años

Instalados y listos para utilizar. Muchas gracias.

1
2811Puntos
4 años

@gndx que tema tienes que hace que se ve como luces de neo? esta muy genial. Vale acotar Settings Sync Esta muy Genial! Gracias

1
4848Puntos
5 años

Como se llama la fuente mostrada en el ejemplo de codigo de la primera extención?

1
18747Puntos
4 años

Con cuál plugin puedo manejar mejor JSX?

1
14977Puntos
4 años

¿Alguien sabe como se llama el plugin que genera una línea dentro de una función?.

Captura de pantalla (2).png
1
35030Puntos
2 años

Se llama “Render line highlight”, está incluido en VSCode, búscalo en los settings para configurarlo a tu gusto.

1
15054Puntos
5 años

Gracias, ya las instalé todas, ahora a probarlas.

1
15160Puntos
4 años

Yo prefiero
EditorConfig for VS Code
sobre
Trailing spaces
Porque
.
Además de permitirte borrar los espacios invisibles en las líneas de código como trailling spaces,
puedes personalizar los entornos de trabajo dependiendo de la extensión, nombre, carpeta, lo que quieras y hacer exepciones.
Escoger si los tabs serán “tab” o "espacio"
Determinar el ancho del tab, equivalente a 4 espacios, o lo que quieras.
Determinar cuántos espacios equivale el tab, 2 espacios, etc.

1
33683Puntos
5 años

¡Muchas gracias! Están excelentes 👌

1
7049Puntos
4 años

serial genial que hicieras un post de como configuras ESLint! me encanta que te marque cada vez que tienes errores de tipeo o error de sintaxis… esta super genial… me gustaria conocer tu configuracion

1
6198Puntos
4 años

CONSULTA:
en la sección de la extensión de “Trailing Spaces” veo que su captura tiene su ide las palabras reservadas, import, render, from, pero están resaltadas con un sombra luminosa ¿cómo se puede hacer eso en mi ide? es un Tema? ¿alguna extensión? ¿cómo se llama?.

1
11743Puntos
4 años

Gracias!!! C: ❤️

1
5738Puntos
3 años

muchas gracias, la verdad uso muchas por no decir todas de las extenciones que comparte!

1
39210Puntos
3 años

Gracias por las recomendaciones =)

1
13928Puntos
3 años

Buenisimos!!! Muchas Gracias Oscar!!

1
10377Puntos
3 años

Gracias! Me ahorró un montón de tiempo

1
7289Puntos
3 años

gracias por el aporte, tener buenas extensiones te facilitan el trabajo y ayuda a mitigar cualquier error.

1
21576Puntos
5 años

Gracias, Excelente aporte

1
48661Puntos
5 años

Gracias! Tome varios de aqui

1
13356Puntos
5 años

Excelentes extensiones, la mayoría ya las tenía, muchas gracias por tus recomendaciones.

1
4309Puntos
5 años

¿A que se refiere con: “estándar de trabajo como el propuesto por AirBnb”?

1
5436Puntos
5 años

hola Oscar. el efecto neon lo logras con SunthWave?

1
2994Puntos
5 años

una consulta, como puedo sacar los rectangulos que rodean a las llaves, parentesis etc una vez que doy click sobre ellas? y tambien la “ayuda” que me da cuando me posiciono sobre algun elemento captura codigo.png

1
9575Puntos
5 años

Excelente artículo, he instalado algunas para usar.

1
2908Puntos
4 años

como se llama el tema que usas? me llevo preguntando eso durante todos los cursos que he visto de ti

1
4 años

exelentes erramientas, a probarlas todas en mis proyectos

1
4 años

auto close tag no lo ocupo porque uso emmet

1
16983Puntos
4 años

Oscar, tenías un plugin que coloreaba el tab, ¿Cómo se llama? Por favor.

Específicamente coloreaba esta parte:

1
4 años

muchas gracias por las recomendaciones, después de instaladas seguro harán mi trabajo mucho mas sencillo

1
26710Puntos
3 años

Genial, implemente algunas extensiones que me encantaron!
Gracias Orlando Naipes
#NeverStopLearning

1
6895Puntos
3 años

Excelente los instale toditos ahora voy a probarlos. El wakatime no me esta funcionando y he seguido todos los pasos.

1
4Puntos
3 años
TerminalVisual.png

Alguien sabe como añadir un icono de terminal en la barra de abajo del Visual Studio Code?

1
9677Puntos
3 años

¿Por que no se pueden dejar espacios? En el caso de trailling spaces. osea ¿Por que no hay que dejar espacios en el codigo?

1
35030Puntos
2 años

Es importante escribir código limpio y con buena sintaxis.

1
9217Puntos
2 años

He probado algunas, y la verdad que ayudan bastante. Muchas gracias por tus recomendaciones como siempre Oscar!!
Un saludo!

1
1150Puntos
4 años

Muy util !! Recién lo encuentro me llevo algunas…

0
30861Puntos
4 años

Wenas,

Genial este post. Las voy probar a ver qué tal estan!.

Gracias @gndx

0
4696Puntos
5 años
  • Web boilerplate by James Quick = genera index.html, app.js, app.css para empezar una application.
0
4 años

Excelente aporte, me llevaré varios. ✌
Super recomendado este post.

0
2448Puntos
4 años

Muchas gracias por compartir esto!

0
8807Puntos
4 años

Hola, Settingns Sync, ya esta por default en vscode 2021 correcto?

0
2987Puntos
4 años

Vengo del Curso de Asincronismo con JavaScript 😃
Gracias por este tremendo post, recomendadisimo para aquellas personas que han empezado a tenerle cariño a VSCode.

0
3613Puntos
4 años

Trailing Spaces me viene muy bien 👌