Top 10 extensiones para VSCode
Tags: javascript, programming, webdev, spanish
Published: 2023-01-14 11:38:12

#Contenido:

1. [Tabnine AI Autocomplete for Javascript](#tabnine-ai-autocomplete-for-javascript)
2. [Live Server](#live-server)
3. [Auto Close Tag](#auto-close-tag)
4. [Auto Rename Tag](#auto-rename-tag)
5. [Trailing Spaces](#trailing-spaces)
6. [Error Lens](#error-lens)
7. [RapidAPI client](#rapidapi-client)
8. [Image Preview](#image-preview)
9. [One Dark Pro](#one-dark-pro)
10. [Material Icon Theme](#material-icon-theme)

#Bonus
- [CodeSnap](#codesnap)
- [Indent Rainbow](#indent-rainbow)

##Tabnine AI Autocomplete for Javascript
Tabnine es un asistente de código de IA que lo convierte en un mejor desarrollador. Tabnine aumentará su velocidad de desarrollo con finalizaciones de código en tiempo real en todos los lenguajes de codificación e IDE más populares.
![Tabnine example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cjyv1wip7o4bg2wscjx.gif)

[Link a Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)

##Live Server
Inicie un servidor de desarrollo local con función de recarga en vivo para páginas estáticas y dinámicas.
![Live server example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovas4onpf5w6e5t4mci8.gif)

###Accesos directos para iniciar / detener el servidor

- Abrir un proyecto y hacer clic para Go Live desde la barra de estado para encender / apagar el servidor.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cj0a0pph3fvw6tlwz6l5.jpg)

- Haga clic derecho en un HTML archivo de Explorer Window y haga clic en Open with Live Server.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0i6xslacyqz07npwprq.gif)

- Abra un archivo HTML y haga clic derecho en el editor y haga clic en Open with Live Server.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjodezeim1bgs2bsm4hd.jpg)

- Presione (alt+L, alt+O) para abrir el servidor y (alt+L, alt+C) para detener el servidor ( Puede cambiar la codificación de forma de acceso directo ). [ En MAC, cmd+L, cmd+O y cmd+L, cmd+C]

- Abra el comando Palete presionando F1 o ctrl+shift+P y tipo Live Server: Open With Live Server para iniciar un servidor o tipo Live Server: Stop Live Server para detener un servidor.

[Link a Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

##Auto Close Tag
Agregue automáticamente la etiqueta de cierre HTML / XML, igual que Visual Studio IDE o Sublime Text.
![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fw5kpoduv7xnunx8lzkx.gif)

[Link a Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

##Auto Rename Tag
Cambie el nombre automáticamente a la etiqueta HTML / XML emparejada, al igual que Visual Studio IDE.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zfrboy0nhs36tinje9a.gif)

[Link a Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

##Trailing Spaces
Resalte los espacios finales y elimínelos en un instante!

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7ig654ri2e3fz83vw50.gif)

[Link a Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)

##Error Lens
ErrorLens turbo carga las características de diagnóstico del lenguaje al hacer que los diagnósticos se destaquen más prominentemente, destacando toda la línea donde sea que el lenguaje genere un diagnóstico y también imprima el mensaje en la misma línea.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jdej1p1brgfk7ungr3l.gif)

[Link a Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

##RapidAPI Client
RapidAPI Client es un cliente HTTP con todas las funciones que le permite probar y describe las API que construye o consume. Diseñado para trabajar con sus temas de código VS, RapidAPI Client hace que la composición de solicitudes, la inspección de las respuestas del servidor, la generación de código de cliente para llamadas API y los objetos tipsafe para el desarrollo de aplicaciones sean simples e intuitivos. Nuestro cliente ofrece una excelente alternativa a: cartero, cliente de descanso y otros clientes HTTP.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8v3hik96o0bbnbqk234.jpeg)

[Link a RapidAPI Client](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client)

##Image Preview
Muestra una vista previa de la imagen en el path de la imagen y en la barra lateral.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjlv2myn8vos8yiu763w.png)

[Link a Image Preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)

##One Dark Pro
El icónico tema One Dark de Atom, y uno de los más instalados temas para el código VS!

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9x27zirgfgko5m3oojw.png)

[Link a One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)

##Material Icon Theme
Iconos de Diseño que te ayudarán a distinguir fácilmente diferentes tipos de archivos.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bswg3wtnrxwatsu292t3.png)

[Link a Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

##CodeSnap
Toma hermosas capturas de pantalla de su código en VS Code.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23eb5hn84bx3zuhsu40g.png)

[Link a CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)

##Indent Rainbow
Esta extensión colorea la sangría frente a su texto, alternando cuatro colores diferentes en cada paso. Algunos pueden encontrar útil para escribir código para Python, Nim, Yaml y probablemente incluso tipos de archivos que no dependen de la sangría.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0xz9e3kyej23v26akc0.png)

[Link a Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

#Top 10 extensiones para VSCode
Este es mi Top 10 mejores extenciones que nunca te deben faltar, espero te haya servido de alguna manera, gracias por leerme.